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

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/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.d.ts

@@ -10,7 +10,7 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
     notifyVisibleChange(isVisible: any): void;
     getPopupContainerRect(): PopupContainerDOMRect;
     containerIsBody(): boolean;
-    off(arg0: string, arg1?: () => void): void;
+    off(arg0: string): void;
     canMotion(): boolean;
     registerScrollHandler(arg: () => Record<string, any>): void;
     unregisterScrollHandler(): void;
@@ -47,7 +47,6 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
     notifyEscKeydown(event: any): void;
     getTriggerNode(): any;
     setId(): void;
-    getTriggerDOM(): HTMLElement | null;
 }
 export type Position = ArrayElement<typeof strings.POSITION_SET>;
 export interface PopupContainerDOMRect extends DOMRectLikeType {

package/lib/cjs/tooltip/foundation.js

@@ -58,16 +58,6 @@ class Tooltip extends _foundation.default {
     this.show = () => {
       const content = this.getProp('content');
       const trigger = this.getProp('trigger');
-      if (trigger === "hover") {
-        const checkTriggerIsHover = () => {
-          const triggerDOM = this._adapter.getTriggerDOM();
-          if (trigger && !triggerDOM.matches(":hover")) {
-            this.hide();
-          }
-          this._adapter.off("portalInserted", checkTriggerIsHover);
-        };
-        this._adapter.on('portalInserted', checkTriggerIsHover);
-      }
       const clickTriggerToHide = this.getProp('clickTriggerToHide');
       const {
         visible,
@@ -245,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/utils/Event.js

@@ -51,9 +51,7 @@ class Event {
     if (!this._eventMap.has(event)) {
       return false;
     }
-    const callbacks = [...this._eventMap.get(event)];
-    // clone to avoid someone writing  the logic of deleting callback in callbacks into his or her callback code, for example the once func above
-    callbacks.forEach(callback => callback(...args));
+    this._eventMap.get(event).forEach(callback => callback(...args));
     return true;
   }
 }

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.d.ts

@@ -10,7 +10,7 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
     notifyVisibleChange(isVisible: any): void;
     getPopupContainerRect(): PopupContainerDOMRect;
     containerIsBody(): boolean;
-    off(arg0: string, arg1?: () => void): void;
+    off(arg0: string): void;
     canMotion(): boolean;
     registerScrollHandler(arg: () => Record<string, any>): void;
     unregisterScrollHandler(): void;
@@ -47,7 +47,6 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
     notifyEscKeydown(event: any): void;
     getTriggerNode(): any;
     setId(): void;
-    getTriggerDOM(): HTMLElement | null;
 }
 export type Position = ArrayElement<typeof strings.POSITION_SET>;
 export interface PopupContainerDOMRect extends DOMRectLikeType {

package/lib/es/tooltip/foundation.js

@@ -50,16 +50,6 @@ export default class Tooltip extends BaseFoundation {
     this.show = () => {
       const content = this.getProp('content');
       const trigger = this.getProp('trigger');
-      if (trigger === "hover") {
-        const checkTriggerIsHover = () => {
-          const triggerDOM = this._adapter.getTriggerDOM();
-          if (trigger && !triggerDOM.matches(":hover")) {
-            this.hide();
-          }
-          this._adapter.off("portalInserted", checkTriggerIsHover);
-        };
-        this._adapter.on('portalInserted', checkTriggerIsHover);
-      }
       const clickTriggerToHide = this.getProp('clickTriggerToHide');
       const {
         visible,
@@ -237,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/utils/Event.js

@@ -44,9 +44,7 @@ export default class Event {
     if (!this._eventMap.has(event)) {
       return false;
     }
-    const callbacks = [...this._eventMap.get(event)];
-    // clone to avoid someone writing  the logic of deleting callback in callbacks into his or her callback code, for example the once func above
-    callbacks.forEach(callback => callback(...args));
+    this._eventMap.get(event).forEach(callback => callback(...args));
     return true;
   }
 }

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.2",
+    "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.2",
+        "@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": "8fb732d3d44b16a0bda607843c72b625bd7929af",
+    "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

@@ -32,7 +32,7 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
     notifyVisibleChange(isVisible: any): void;
     getPopupContainerRect(): PopupContainerDOMRect;
     containerIsBody(): boolean;
-    off(arg0: string, arg1?: () => void): void;
+    off(arg0: string): void;
     canMotion(): boolean;
     registerScrollHandler(arg: () => Record<string, any>): void;
     unregisterScrollHandler(): void;
@@ -68,8 +68,7 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
     setInitialFocus(): void;
     notifyEscKeydown(event: any): void;
     getTriggerNode(): any;
-    setId(): void;
-    getTriggerDOM(): HTMLElement|null
+    setId(): void
 }
 
 export type Position = ArrayElement<typeof strings.POSITION_SET>;
@@ -116,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>) {
@@ -299,16 +299,6 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     show = () => {
         const content = this.getProp('content');
         const trigger = this.getProp('trigger');
-        if (trigger==="hover") {
-            const checkTriggerIsHover = () => {
-                const triggerDOM = this._adapter.getTriggerDOM();
-                if (trigger && !triggerDOM.matches(":hover")) {
-                    this.hide();
-                }
-                this._adapter.off("portalInserted", checkTriggerIsHover);
-            };
-            this._adapter.on('portalInserted', checkTriggerIsHover);
-        }
         const clickTriggerToHide = this.getProp('clickTriggerToHide');
         const { visible, displayNone } = this.getStates();
         if (displayNone) {

package/utils/Event.ts

@@ -45,9 +45,7 @@ export default class Event {
         if (!this._eventMap.has(event)) {
             return false;
         }
-        const callbacks = [...this._eventMap.get(event)];
-        // clone to avoid someone writing  the logic of deleting callback in callbacks into his or her callback code, for example the once func above
-        callbacks.forEach(callback => callback(...args));
+        this._eventMap.get(event).forEach(callback => callback(...args));
         return true;
     }
 }