@douyinfe/semi-foundation 2.38.2-alpha.1 → 2.38.2-alpha.2-patch-modal

package/anchor/foundation.ts

@@ -171,7 +171,7 @@ export default class AnchorFoundation<P = Record<string, any>, S = Record<string
                  *      2. There is a scroll axis (clientHeight < scrollHeight | | clientWidth < scrollWidth)
                  *      3.overflowX or overflowY has a value and is not visible or clip
                  *       For details, please see https://github.com/stipsan/compute-scroll-into-view
-                 *
+                 * 
                  * behavior定义滚动行为
                  *  - 可选 'auto' | 'smooth' | Function
                  *  - Function 自定义滚动行为
@@ -184,12 +184,9 @@ export default class AnchorFoundation<P = Record<string, any>, S = Record<string
                  */
                 behavior: actions => {
                     // We just need to scroll the innermost target container
-                    const verticalScrollAction = actions.find(action => {
-                        const { el } = action;
-                        return el.scrollHeight > el.clientHeight;
-                    });
-                    const el = get(verticalScrollAction, 'el');
-                    const top = get(verticalScrollAction, 'top');
+                    const innermostAction = get(actions, '0');
+                    const el = get(innermostAction, 'el');
+                    const top = get(innermostAction, 'top');
                     if (el) {
                         const offsetTop = top - targetOffset;
                         if (el.scroll && canSmoothScroll) {

package/button/iconButton.scss

@@ -4,6 +4,30 @@
 $module: #{$prefix}-button;
 
 .#{$module} {
+    @keyframes #{$prefix}-animation-rotate {
+        from {
+            transform: rotate(0);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    @keyframes #{$prefix}-animation-circle {
+        0% {
+            stroke-dasharray: 1, 220;
+            stroke-dashoffset: 0;
+        }
+        50% {
+            stroke-dasharray: 150, 220;
+            stroke-dashoffset: -68px;
+        }
+        100% {
+            stroke-dasharray: 150, 220;
+            stroke-dashoffset: -218px;
+        }
+    }
+
     &.#{$module}-with-icon {
         display: inline-flex;
         align-items: center;
@@ -24,8 +48,12 @@ $module: #{$prefix}-button;
             &>svg {
                 width: 16px;
                 height: 16px;
-                animation: .6s linear infinite #{$prefix}-animation-rotate;
+                animation: 1200ms linear infinite #{$prefix}-animation-rotate;
                 animation-fill-mode: forwards;
+
+                & > circle {
+                    animation: 2500ms ease-in-out infinite #{$prefix}-animation-circle;
+                }
             }
         }
     }

package/lib/cjs/anchor/foundation.js

@@ -165,14 +165,9 @@ class AnchorFoundation extends _foundation.default {
            */
           behavior: actions => {
             // We just need to scroll the innermost target container
-            const verticalScrollAction = actions.find(action => {
-              const {
-                el
-              } = action;
-              return el.scrollHeight > el.clientHeight;
-            });
-            const el = (0, _get2.default)(verticalScrollAction, 'el');
-            const top = (0, _get2.default)(verticalScrollAction, 'top');
+            const innermostAction = (0, _get2.default)(actions, '0');
+            const el = (0, _get2.default)(innermostAction, 'el');
+            const top = (0, _get2.default)(innermostAction, 'top');
             if (el) {
               const offsetTop = top - targetOffset;
               if (el.scroll && canSmoothScroll) {

package/lib/cjs/button/iconButton.css

@@ -1,6 +1,28 @@
 /* shadow */
 /* sizing */
 /* spacing */
+@keyframes semi-animation-rotate {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes semi-animation-circle {
+  0% {
+    stroke-dasharray: 1, 220;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 150, 220;
+    stroke-dashoffset: -68px;
+  }
+  100% {
+    stroke-dasharray: 150, 220;
+    stroke-dashoffset: -218px;
+  }
+}
 .semi-button.semi-button-with-icon {
   display: inline-flex;
   align-items: center;
@@ -17,9 +39,12 @@
 .semi-button.semi-button-loading .semi-button-content > svg {
   width: 16px;
   height: 16px;
-  animation: 0.6s linear infinite semi-animation-rotate;
+  animation: 1200ms linear infinite semi-animation-rotate;
   animation-fill-mode: forwards;
 }
+.semi-button.semi-button-loading .semi-button-content > svg > circle {
+  animation: 2500ms ease-in-out infinite semi-animation-circle;
+}
 .semi-button.semi-button-with-icon-only {
   padding-left: 8px;
   padding-right: 8px;

package/lib/cjs/button/iconButton.scss

@@ -4,6 +4,30 @@
 $module: #{$prefix}-button;
 
 .#{$module} {
+    @keyframes #{$prefix}-animation-rotate {
+        from {
+            transform: rotate(0);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    @keyframes #{$prefix}-animation-circle {
+        0% {
+            stroke-dasharray: 1, 220;
+            stroke-dashoffset: 0;
+        }
+        50% {
+            stroke-dasharray: 150, 220;
+            stroke-dashoffset: -68px;
+        }
+        100% {
+            stroke-dasharray: 150, 220;
+            stroke-dashoffset: -218px;
+        }
+    }
+
     &.#{$module}-with-icon {
         display: inline-flex;
         align-items: center;
@@ -24,8 +48,12 @@ $module: #{$prefix}-button;
             &>svg {
                 width: 16px;
                 height: 16px;
-                animation: .6s linear infinite #{$prefix}-animation-rotate;
+                animation: 1200ms linear infinite #{$prefix}-animation-rotate;
                 animation-fill-mode: forwards;
+
+                & > circle {
+                    animation: 2500ms ease-in-out infinite #{$prefix}-animation-circle;
+                }
             }
         }
     }

package/lib/cjs/lib/cjs/_portal/portal.scss

@@ -0,0 +1,17 @@
+//@import '../theme/variables.scss';
+
+$module: #{$prefix}-portal;
+
+.#{$module} {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: $z-portal;
+
+    &-inner {
+        position: absolute;
+        background-color: transparent;
+        min-width: max-content;
+    }
+}

package/lib/cjs/lib/cjs/anchor/anchor.scss

@@ -0,0 +1,127 @@
+@import "./animation.scss";
+@import './variables.scss';
+
+$module: #{$prefix}-anchor;
+
+.#{$module} {
+    @include font-size-regular;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+
+    &-size-small {
+        @include font-size-small;
+    }
+
+    &-slide {
+        position: absolute;
+        left: $spacing-anchor_slide-left;
+        top: $spacing-anchor_slide-top;
+        height: 100%;
+
+        &-muted {
+            display: none;
+        }
+
+        &-bar {
+            display: none;
+            position: absolute;
+            top: 0;
+            width: $width-anchor_slide_default;
+            border-radius: $radius-anchor_slide;
+
+            &-active {
+                display: inline-block;
+            }
+
+            &-default {
+                height: $height-anchor_slide_default + 2 * $spacing-anchor_slide_default-Y;
+            }
+
+            &-small {
+                height: $height-anchor_slide_small + 2 * $spacing-anchor_slide_small-Y;
+            }
+
+            &-primary {
+                background-color: $color-anchor_slide_primary-bg-active;
+            }
+
+            &-tertiary {
+                background-color: $color-anchor_slide_tertiary-bg-active;
+            }
+        }
+
+        &::before {
+            position: absolute;
+            display: block;
+            width: $width-anchor_slide_default;
+            height: 100%;
+            background-color: $color-anchor_slide_default-bg-default;
+            border-radius: $radius-anchor_slide;
+            content: ' ';
+        }
+    }
+
+    &-link {
+
+        &-title {
+            cursor: pointer;
+            color: $color-anchor_title-text-default;
+            padding-top: $spacing-anchor_link_title-paddingTop;
+            padding-bottom: $spacing-anchor_link_title-paddingBottom;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            border-radius: $width-anchor-outline_border_radius;
+            transition: color $transition_duration-anchor_title-text $transition_function-anchor_title-text $transition_delay-anchor_title-text;//锚点选项文字的动效
+            transform: scale($transform_scale-anchor_title-text);
+            &:hover {
+                color: $color-anchor_title-text-hover;
+            }
+
+            &-active {
+                color: $color-anchor_title-text-active;
+            }
+
+            &:focus-visible {
+                outline: $width-anchor-outline solid $color-anchor_title-outline-focus;
+                outline-offset: $width-anchor-outlineOffset;
+            }
+
+            &-disabled {
+                color: $color-anchor_title-text-disabled;
+                cursor: not-allowed;
+                &:hover {
+                    color: $color-anchor_title-text-disabled;
+                }
+            }
+        }
+
+        &-tooltip {
+            cursor: pointer;
+            color: $color-anchor_title-text-default !important;
+
+            &-small {
+                @include font-size-small;
+            }
+
+            &:hover {
+                color: $color-anchor_title-text-hover !important;
+            }
+
+            &-active {
+                color: $color-anchor_title-text-active !important;
+            }
+
+            &-disabled {
+                color: $color-anchor_title-text-disabled !important;
+                cursor: not-allowed;
+                &:hover {
+                    color: $color-anchor_title-text-disabled !important;
+                }
+            }
+        }
+    }
+}
+
+@import "./rtl.scss";

package/lib/cjs/lib/es/_portal/portal.scss

@@ -0,0 +1,17 @@
+//@import '../theme/variables.scss';
+
+$module: #{$prefix}-portal;
+
+.#{$module} {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: $z-portal;
+
+    &-inner {
+        position: absolute;
+        background-color: transparent;
+        min-width: max-content;
+    }
+}

package/lib/cjs/lib/es/anchor/anchor.scss

@@ -0,0 +1,127 @@
+@import "./animation.scss";
+@import './variables.scss';
+
+$module: #{$prefix}-anchor;
+
+.#{$module} {
+    @include font-size-regular;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+
+    &-size-small {
+        @include font-size-small;
+    }
+
+    &-slide {
+        position: absolute;
+        left: $spacing-anchor_slide-left;
+        top: $spacing-anchor_slide-top;
+        height: 100%;
+
+        &-muted {
+            display: none;
+        }
+
+        &-bar {
+            display: none;
+            position: absolute;
+            top: 0;
+            width: $width-anchor_slide_default;
+            border-radius: $radius-anchor_slide;
+
+            &-active {
+                display: inline-block;
+            }
+
+            &-default {
+                height: $height-anchor_slide_default + 2 * $spacing-anchor_slide_default-Y;
+            }
+
+            &-small {
+                height: $height-anchor_slide_small + 2 * $spacing-anchor_slide_small-Y;
+            }
+
+            &-primary {
+                background-color: $color-anchor_slide_primary-bg-active;
+            }
+
+            &-tertiary {
+                background-color: $color-anchor_slide_tertiary-bg-active;
+            }
+        }
+
+        &::before {
+            position: absolute;
+            display: block;
+            width: $width-anchor_slide_default;
+            height: 100%;
+            background-color: $color-anchor_slide_default-bg-default;
+            border-radius: $radius-anchor_slide;
+            content: ' ';
+        }
+    }
+
+    &-link {
+
+        &-title {
+            cursor: pointer;
+            color: $color-anchor_title-text-default;
+            padding-top: $spacing-anchor_link_title-paddingTop;
+            padding-bottom: $spacing-anchor_link_title-paddingBottom;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            border-radius: $width-anchor-outline_border_radius;
+            transition: color $transition_duration-anchor_title-text $transition_function-anchor_title-text $transition_delay-anchor_title-text;//锚点选项文字的动效
+            transform: scale($transform_scale-anchor_title-text);
+            &:hover {
+                color: $color-anchor_title-text-hover;
+            }
+
+            &-active {
+                color: $color-anchor_title-text-active;
+            }
+
+            &:focus-visible {
+                outline: $width-anchor-outline solid $color-anchor_title-outline-focus;
+                outline-offset: $width-anchor-outlineOffset;
+            }
+
+            &-disabled {
+                color: $color-anchor_title-text-disabled;
+                cursor: not-allowed;
+                &:hover {
+                    color: $color-anchor_title-text-disabled;
+                }
+            }
+        }
+
+        &-tooltip {
+            cursor: pointer;
+            color: $color-anchor_title-text-default !important;
+
+            &-small {
+                @include font-size-small;
+            }
+
+            &:hover {
+                color: $color-anchor_title-text-hover !important;
+            }
+
+            &-active {
+                color: $color-anchor_title-text-active !important;
+            }
+
+            &-disabled {
+                color: $color-anchor_title-text-disabled !important;
+                cursor: not-allowed;
+                &:hover {
+                    color: $color-anchor_title-text-disabled !important;
+                }
+            }
+        }
+    }
+}
+
+@import "./rtl.scss";

package/lib/cjs/navigation/subNavFoundation.js

@@ -33,7 +33,9 @@ class SubNavFoundation extends _foundation.default {
     // this.log('invoke SubNavFoundation init()');
     this._timer = null;
   }
-  destroy() {} // eslint-disable-line
+  destroy() {
+    this.clearDelayTimer();
+  }
   clearDelayTimer() {
     if (this._timer) {
       clearTimeout(this._timer);

package/lib/cjs/spin/animation.scss

@@ -1,2 +1,3 @@
-$animation_duration-spin_wrapper-spin: 600ms; // 加载图标容器旋转一周时长
-$animation_duration-spin_customChildren-spin: 1600ms; // 自定义指示器时旋转一周时长
+$animation_duration-spin_wrapper-spin: 1200ms; // 加载图标容器旋转一周时长
+$animation_duration-spin_customChildren-spin: 1600ms; // 自定义指示器时旋转一周时长
+$animation_duration-spin_wrapper-spin-circle: 2500ms; // 加载图标弹性运动一周时长

package/lib/cjs/spin/spin.css

@@ -15,6 +15,20 @@
     transform: rotate(360deg);
   }
 }
+@keyframes semi-animation-circle {
+  0% {
+    stroke-dasharray: 1, 220;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 150, 220;
+    stroke-dashoffset: -68px;
+  }
+  100% {
+    stroke-dasharray: 150, 220;
+    stroke-dashoffset: -218px;
+  }
+}
 .semi-spin-wrapper {
   text-align: center;
   position: absolute;
@@ -24,12 +38,16 @@
   color: var(--semi-color-primary);
 }
 .semi-spin-wrapper > svg {
-  animation: 600ms linear infinite semi-animation-rotate;
+  display: inline;
+  animation: 1200ms linear infinite semi-animation-rotate;
   animation-fill-mode: forwards;
   vertical-align: top;
   width: 20px;
   height: 20px;
 }
+.semi-spin-wrapper > svg > circle {
+  animation: 2500ms ease-in-out infinite semi-animation-circle;
+}
 .semi-spin-animate {
   display: inline-flex;
   animation: 1600ms linear infinite semi-animation-rotate;

package/lib/cjs/spin/spin.scss

@@ -18,6 +18,21 @@ $module: #{$prefix}-spin;
         }
     }
 
+    @keyframes #{$prefix}-animation-circle {
+        0% {
+            stroke-dasharray: 1, 220;
+            stroke-dashoffset: 0;
+        }
+        50% {
+            stroke-dasharray: 150, 220;
+            stroke-dashoffset: -68px;
+        }
+        100% {
+            stroke-dasharray: 150, 220;
+            stroke-dashoffset: -218px;
+        }
+    }
+
     &-wrapper {
         text-align: center;
         position: absolute;
@@ -27,10 +42,15 @@ $module: #{$prefix}-spin;
         color: $color-spin-bg;
 
         & > svg {
+            display: inline;
             animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
             animation-fill-mode: forwards;
             vertical-align: top;
             @include size($width-spin_middle);
+
+            & > circle {
+                animation: $animation_duration-spin_wrapper-spin-circle ease-in-out infinite #{$prefix}-animation-circle;
+            }
         }
     }
 

package/lib/cjs/tooltip/foundation.js

@@ -235,6 +235,7 @@ class Tooltip extends _foundation.default {
     this._adapter.unregisterClickOutsideHandler();
     this.unBindResizeEvent();
     this.unBindScrollEvent();
+    clearTimeout(this._timer);
   }
   _bindTriggerEvent(triggerEventSet) {
     this._adapter.registerTriggerEvent(triggerEventSet);

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): 1 | -1 | 0;
+export declare function calcDropRelativePosition(event: any, treeNode: any): 0 | 1 | -1;
 export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
 export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;

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: ("auto" | "custom")[];
+    UPLOAD_TRIGGER: ("custom" | "auto")[];
     VALIDATE_STATUS: readonly ["default", "error", "warning", "success"];
     PROMPT_POSITION: readonly ["left", "right", "bottom"];
 };

package/lib/es/anchor/foundation.js

@@ -158,14 +158,9 @@ export default class AnchorFoundation extends BaseFoundation {
            */
           behavior: actions => {
             // We just need to scroll the innermost target container
-            const verticalScrollAction = actions.find(action => {
-              const {
-                el
-              } = action;
-              return el.scrollHeight > el.clientHeight;
-            });
-            const el = _get(verticalScrollAction, 'el');
-            const top = _get(verticalScrollAction, 'top');
+            const innermostAction = _get(actions, '0');
+            const el = _get(innermostAction, 'el');
+            const top = _get(innermostAction, 'top');
             if (el) {
               const offsetTop = top - targetOffset;
               if (el.scroll && canSmoothScroll) {

package/lib/es/button/iconButton.css

@@ -1,6 +1,28 @@
 /* shadow */
 /* sizing */
 /* spacing */
+@keyframes semi-animation-rotate {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes semi-animation-circle {
+  0% {
+    stroke-dasharray: 1, 220;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 150, 220;
+    stroke-dashoffset: -68px;
+  }
+  100% {
+    stroke-dasharray: 150, 220;
+    stroke-dashoffset: -218px;
+  }
+}
 .semi-button.semi-button-with-icon {
   display: inline-flex;
   align-items: center;
@@ -17,9 +39,12 @@
 .semi-button.semi-button-loading .semi-button-content > svg {
   width: 16px;
   height: 16px;
-  animation: 0.6s linear infinite semi-animation-rotate;
+  animation: 1200ms linear infinite semi-animation-rotate;
   animation-fill-mode: forwards;
 }
+.semi-button.semi-button-loading .semi-button-content > svg > circle {
+  animation: 2500ms ease-in-out infinite semi-animation-circle;
+}
 .semi-button.semi-button-with-icon-only {
   padding-left: 8px;
   padding-right: 8px;

package/lib/es/button/iconButton.scss

@@ -4,6 +4,30 @@
 $module: #{$prefix}-button;
 
 .#{$module} {
+    @keyframes #{$prefix}-animation-rotate {
+        from {
+            transform: rotate(0);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    @keyframes #{$prefix}-animation-circle {
+        0% {
+            stroke-dasharray: 1, 220;
+            stroke-dashoffset: 0;
+        }
+        50% {
+            stroke-dasharray: 150, 220;
+            stroke-dashoffset: -68px;
+        }
+        100% {
+            stroke-dasharray: 150, 220;
+            stroke-dashoffset: -218px;
+        }
+    }
+
     &.#{$module}-with-icon {
         display: inline-flex;
         align-items: center;
@@ -24,8 +48,12 @@ $module: #{$prefix}-button;
             &>svg {
                 width: 16px;
                 height: 16px;
-                animation: .6s linear infinite #{$prefix}-animation-rotate;
+                animation: 1200ms linear infinite #{$prefix}-animation-rotate;
                 animation-fill-mode: forwards;
+
+                & > circle {
+                    animation: 2500ms ease-in-out infinite #{$prefix}-animation-circle;
+                }
             }
         }
     }

package/lib/es/lib/cjs/_portal/portal.scss

@@ -0,0 +1,17 @@
+//@import '../theme/variables.scss';
+
+$module: #{$prefix}-portal;
+
+.#{$module} {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: $z-portal;
+
+    &-inner {
+        position: absolute;
+        background-color: transparent;
+        min-width: max-content;
+    }
+}

package/lib/es/lib/cjs/anchor/anchor.scss

@@ -0,0 +1,127 @@
+@import "./animation.scss";
+@import './variables.scss';
+
+$module: #{$prefix}-anchor;
+
+.#{$module} {
+    @include font-size-regular;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+
+    &-size-small {
+        @include font-size-small;
+    }
+
+    &-slide {
+        position: absolute;
+        left: $spacing-anchor_slide-left;
+        top: $spacing-anchor_slide-top;
+        height: 100%;
+
+        &-muted {
+            display: none;
+        }
+
+        &-bar {
+            display: none;
+            position: absolute;
+            top: 0;
+            width: $width-anchor_slide_default;
+            border-radius: $radius-anchor_slide;
+
+            &-active {
+                display: inline-block;
+            }
+
+            &-default {
+                height: $height-anchor_slide_default + 2 * $spacing-anchor_slide_default-Y;
+            }
+
+            &-small {
+                height: $height-anchor_slide_small + 2 * $spacing-anchor_slide_small-Y;
+            }
+
+            &-primary {
+                background-color: $color-anchor_slide_primary-bg-active;
+            }
+
+            &-tertiary {
+                background-color: $color-anchor_slide_tertiary-bg-active;
+            }
+        }
+
+        &::before {
+            position: absolute;
+            display: block;
+            width: $width-anchor_slide_default;
+            height: 100%;
+            background-color: $color-anchor_slide_default-bg-default;
+            border-radius: $radius-anchor_slide;
+            content: ' ';
+        }
+    }
+
+    &-link {
+
+        &-title {
+            cursor: pointer;
+            color: $color-anchor_title-text-default;
+            padding-top: $spacing-anchor_link_title-paddingTop;
+            padding-bottom: $spacing-anchor_link_title-paddingBottom;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            border-radius: $width-anchor-outline_border_radius;
+            transition: color $transition_duration-anchor_title-text $transition_function-anchor_title-text $transition_delay-anchor_title-text;//锚点选项文字的动效
+            transform: scale($transform_scale-anchor_title-text);
+            &:hover {
+                color: $color-anchor_title-text-hover;
+            }
+
+            &-active {
+                color: $color-anchor_title-text-active;
+            }
+
+            &:focus-visible {
+                outline: $width-anchor-outline solid $color-anchor_title-outline-focus;
+                outline-offset: $width-anchor-outlineOffset;
+            }
+
+            &-disabled {
+                color: $color-anchor_title-text-disabled;
+                cursor: not-allowed;
+                &:hover {
+                    color: $color-anchor_title-text-disabled;
+                }
+            }
+        }
+
+        &-tooltip {
+            cursor: pointer;
+            color: $color-anchor_title-text-default !important;
+
+            &-small {
+                @include font-size-small;
+            }
+
+            &:hover {
+                color: $color-anchor_title-text-hover !important;
+            }
+
+            &-active {
+                color: $color-anchor_title-text-active !important;
+            }
+
+            &-disabled {
+                color: $color-anchor_title-text-disabled !important;
+                cursor: not-allowed;
+                &:hover {
+                    color: $color-anchor_title-text-disabled !important;
+                }
+            }
+        }
+    }
+}
+
+@import "./rtl.scss";

package/lib/es/lib/es/_portal/portal.scss

@@ -0,0 +1,17 @@
+//@import '../theme/variables.scss';
+
+$module: #{$prefix}-portal;
+
+.#{$module} {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: $z-portal;
+
+    &-inner {
+        position: absolute;
+        background-color: transparent;
+        min-width: max-content;
+    }
+}

package/lib/es/lib/es/anchor/anchor.scss

@@ -0,0 +1,127 @@
+@import "./animation.scss";
+@import './variables.scss';
+
+$module: #{$prefix}-anchor;
+
+.#{$module} {
+    @include font-size-regular;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+
+    &-size-small {
+        @include font-size-small;
+    }
+
+    &-slide {
+        position: absolute;
+        left: $spacing-anchor_slide-left;
+        top: $spacing-anchor_slide-top;
+        height: 100%;
+
+        &-muted {
+            display: none;
+        }
+
+        &-bar {
+            display: none;
+            position: absolute;
+            top: 0;
+            width: $width-anchor_slide_default;
+            border-radius: $radius-anchor_slide;
+
+            &-active {
+                display: inline-block;
+            }
+
+            &-default {
+                height: $height-anchor_slide_default + 2 * $spacing-anchor_slide_default-Y;
+            }
+
+            &-small {
+                height: $height-anchor_slide_small + 2 * $spacing-anchor_slide_small-Y;
+            }
+
+            &-primary {
+                background-color: $color-anchor_slide_primary-bg-active;
+            }
+
+            &-tertiary {
+                background-color: $color-anchor_slide_tertiary-bg-active;
+            }
+        }
+
+        &::before {
+            position: absolute;
+            display: block;
+            width: $width-anchor_slide_default;
+            height: 100%;
+            background-color: $color-anchor_slide_default-bg-default;
+            border-radius: $radius-anchor_slide;
+            content: ' ';
+        }
+    }
+
+    &-link {
+
+        &-title {
+            cursor: pointer;
+            color: $color-anchor_title-text-default;
+            padding-top: $spacing-anchor_link_title-paddingTop;
+            padding-bottom: $spacing-anchor_link_title-paddingBottom;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            border-radius: $width-anchor-outline_border_radius;
+            transition: color $transition_duration-anchor_title-text $transition_function-anchor_title-text $transition_delay-anchor_title-text;//锚点选项文字的动效
+            transform: scale($transform_scale-anchor_title-text);
+            &:hover {
+                color: $color-anchor_title-text-hover;
+            }
+
+            &-active {
+                color: $color-anchor_title-text-active;
+            }
+
+            &:focus-visible {
+                outline: $width-anchor-outline solid $color-anchor_title-outline-focus;
+                outline-offset: $width-anchor-outlineOffset;
+            }
+
+            &-disabled {
+                color: $color-anchor_title-text-disabled;
+                cursor: not-allowed;
+                &:hover {
+                    color: $color-anchor_title-text-disabled;
+                }
+            }
+        }
+
+        &-tooltip {
+            cursor: pointer;
+            color: $color-anchor_title-text-default !important;
+
+            &-small {
+                @include font-size-small;
+            }
+
+            &:hover {
+                color: $color-anchor_title-text-hover !important;
+            }
+
+            &-active {
+                color: $color-anchor_title-text-active !important;
+            }
+
+            &-disabled {
+                color: $color-anchor_title-text-disabled !important;
+                cursor: not-allowed;
+                &:hover {
+                    color: $color-anchor_title-text-disabled !important;
+                }
+            }
+        }
+    }
+}
+
+@import "./rtl.scss";

package/lib/es/navigation/subNavFoundation.js

@@ -26,7 +26,9 @@ export default class SubNavFoundation extends BaseFoundation {
     // this.log('invoke SubNavFoundation init()');
     this._timer = null;
   }
-  destroy() {} // eslint-disable-line
+  destroy() {
+    this.clearDelayTimer();
+  }
   clearDelayTimer() {
     if (this._timer) {
       clearTimeout(this._timer);

package/lib/es/spin/animation.scss

@@ -1,2 +1,3 @@
-$animation_duration-spin_wrapper-spin: 600ms; // 加载图标容器旋转一周时长
-$animation_duration-spin_customChildren-spin: 1600ms; // 自定义指示器时旋转一周时长
+$animation_duration-spin_wrapper-spin: 1200ms; // 加载图标容器旋转一周时长
+$animation_duration-spin_customChildren-spin: 1600ms; // 自定义指示器时旋转一周时长
+$animation_duration-spin_wrapper-spin-circle: 2500ms; // 加载图标弹性运动一周时长

package/lib/es/spin/spin.css

@@ -15,6 +15,20 @@
     transform: rotate(360deg);
   }
 }
+@keyframes semi-animation-circle {
+  0% {
+    stroke-dasharray: 1, 220;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 150, 220;
+    stroke-dashoffset: -68px;
+  }
+  100% {
+    stroke-dasharray: 150, 220;
+    stroke-dashoffset: -218px;
+  }
+}
 .semi-spin-wrapper {
   text-align: center;
   position: absolute;
@@ -24,12 +38,16 @@
   color: var(--semi-color-primary);
 }
 .semi-spin-wrapper > svg {
-  animation: 600ms linear infinite semi-animation-rotate;
+  display: inline;
+  animation: 1200ms linear infinite semi-animation-rotate;
   animation-fill-mode: forwards;
   vertical-align: top;
   width: 20px;
   height: 20px;
 }
+.semi-spin-wrapper > svg > circle {
+  animation: 2500ms ease-in-out infinite semi-animation-circle;
+}
 .semi-spin-animate {
   display: inline-flex;
   animation: 1600ms linear infinite semi-animation-rotate;

package/lib/es/spin/spin.scss

@@ -18,6 +18,21 @@ $module: #{$prefix}-spin;
         }
     }
 
+    @keyframes #{$prefix}-animation-circle {
+        0% {
+            stroke-dasharray: 1, 220;
+            stroke-dashoffset: 0;
+        }
+        50% {
+            stroke-dasharray: 150, 220;
+            stroke-dashoffset: -68px;
+        }
+        100% {
+            stroke-dasharray: 150, 220;
+            stroke-dashoffset: -218px;
+        }
+    }
+
     &-wrapper {
         text-align: center;
         position: absolute;
@@ -27,10 +42,15 @@ $module: #{$prefix}-spin;
         color: $color-spin-bg;
 
         & > svg {
+            display: inline;
             animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
             animation-fill-mode: forwards;
             vertical-align: top;
             @include size($width-spin_middle);
+
+            & > circle {
+                animation: $animation_duration-spin_wrapper-spin-circle ease-in-out infinite #{$prefix}-animation-circle;
+            }
         }
     }
 

package/lib/es/tooltip/foundation.js

@@ -227,6 +227,7 @@ export default class Tooltip extends BaseFoundation {
     this._adapter.unregisterClickOutsideHandler();
     this.unBindResizeEvent();
     this.unBindScrollEvent();
+    clearTimeout(this._timer);
   }
   _bindTriggerEvent(triggerEventSet) {
     this._adapter.registerTriggerEvent(triggerEventSet);

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): 1 | -1 | 0;
+export declare function calcDropRelativePosition(event: any, treeNode: any): 0 | 1 | -1;
 export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
 export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;

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: ("auto" | "custom")[];
+    UPLOAD_TRIGGER: ("custom" | "auto")[];
     VALIDATE_STATUS: readonly ["default", "error", "warning", "success"];
     PROMPT_POSITION: readonly ["left", "right", "bottom"];
 };

package/navigation/subNavFoundation.ts

@@ -52,7 +52,9 @@ export default class SubNavFoundation<P = Record<string, any>, S = Record<string
         this._timer = null;
     }
 
-    destroy() {} // eslint-disable-line
+    destroy() {
+        this.clearDelayTimer();
+    }
 
     clearDelayTimer() {
         if (this._timer) {

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.38.2-alpha.1",
+    "version": "2.38.2-alpha.2-patch-modal",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.38.2-alpha.1",
+        "@douyinfe/semi-animation": "2.38.2-alpha.2-patch-modal",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "cb42a0565bba8660255835264d23dfcba6ff4aa3",
+    "gitHead": "0b01c3ee2c2e054522e1022f24f64fcc1b6ce6ac",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/spin/animation.scss

@@ -1,2 +1,3 @@
-$animation_duration-spin_wrapper-spin: 600ms; // 加载图标容器旋转一周时长
-$animation_duration-spin_customChildren-spin: 1600ms; // 自定义指示器时旋转一周时长
+$animation_duration-spin_wrapper-spin: 1200ms; // 加载图标容器旋转一周时长
+$animation_duration-spin_customChildren-spin: 1600ms; // 自定义指示器时旋转一周时长
+$animation_duration-spin_wrapper-spin-circle: 2500ms; // 加载图标弹性运动一周时长

package/spin/spin.scss

@@ -18,6 +18,21 @@ $module: #{$prefix}-spin;
         }
     }
 
+    @keyframes #{$prefix}-animation-circle {
+        0% {
+            stroke-dasharray: 1, 220;
+            stroke-dashoffset: 0;
+        }
+        50% {
+            stroke-dasharray: 150, 220;
+            stroke-dashoffset: -68px;
+        }
+        100% {
+            stroke-dasharray: 150, 220;
+            stroke-dashoffset: -218px;
+        }
+    }
+
     &-wrapper {
         text-align: center;
         position: absolute;
@@ -27,10 +42,15 @@ $module: #{$prefix}-spin;
         color: $color-spin-bg;
 
         & > svg {
+            display: inline;
             animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
             animation-fill-mode: forwards;
             vertical-align: top;
             @include size($width-spin_middle);
+
+            & > circle {
+                animation: $animation_duration-spin_wrapper-spin-circle ease-in-out infinite #{$prefix}-animation-circle;
+            }
         }
     }
 

package/tooltip/foundation.ts

@@ -115,6 +115,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         this._adapter.unregisterClickOutsideHandler();
         this.unBindResizeEvent();
         this.unBindScrollEvent();
+        clearTimeout(this._timer);
     }
 
     _bindTriggerEvent(triggerEventSet: Record<string, any>) {