@douyinfe/semi-foundation 2.23.0-beta.0 → 2.23.0

package/lib/es/tabs/tabs.css

@@ -39,7 +39,7 @@
   margin-right: 8px;
   top: 3px;
   color: var(--semi-color-text-2);
-  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
 }
 .semi-tabs-bar .semi-tabs-tab .semi-icon-close {
   margin-right: 0;
@@ -103,12 +103,52 @@
   outline: 2px solid var(--semi-color-primary-light-active);
   outline-offset: -2px;
 }
+.semi-tabs-bar-collapse .semi-overflow-list > .semi-button-disabled {
+  color: var(--semi-color-disabled-text);
+  background-color: transparent;
+}
+.semi-tabs-bar-collapse .semi-overflow-list > .semi-button-disabled:hover {
+  color: var(--semi-color-disabled-text);
+  background-color: transparent;
+}
 .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start {
   margin-right: 4px;
 }
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button {
+  color: var(--semi-color-primary);
+  padding: 8px;
+  border: 0px solid transparent;
+  background-color: transparent;
+}
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button:hover {
+  background-color: var(--semi-color-fill-0);
+  color: var(--semi-color-primary);
+  border-color: transparent;
+}
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button:active {
+  background-color: var(--semi-color-fill-1);
+  color: var(--semi-color-primary);
+  border-color: transparent;
+}
 .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end {
   margin-left: 4px;
 }
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button {
+  color: var(--semi-color-primary);
+  padding: 8px;
+  border: 0px solid transparent;
+  background-color: transparent;
+}
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button:hover {
+  background-color: var(--semi-color-fill-0);
+  color: var(--semi-color-primary);
+  border-color: transparent;
+}
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button:active {
+  background-color: var(--semi-color-fill-1);
+  color: var(--semi-color-primary);
+  border-color: transparent;
+}
 .semi-tabs-bar-dropdown {
   max-height: 300px;
   overflow-y: auto;
@@ -121,12 +161,12 @@
 }
 .semi-tabs-bar-line.semi-tabs-bar-top {
   border-bottom: 1px solid var(--semi-color-border);
-  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab {
   padding: 16px 4px 14px 4px;
-  transition: border-bottom-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transition: border-bottom-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   border-bottom: 2px solid transparent;
 }
 .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:nth-of-type(1) {
@@ -160,7 +200,7 @@
 .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab {
   padding: 12px;
   border-left: 2px solid transparent;
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
 }
 .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover {
   border-left: 2px solid var(--semi-color-fill-0);
@@ -251,7 +291,7 @@
 }
 .semi-tabs-bar-card .semi-tabs-tab {
   padding: 8px 12px;
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-tabs-bar-card .semi-tabs-tab:hover {
@@ -278,7 +318,7 @@
   border-radius: var(--semi-border-radius-small);
   color: var(--semi-color-text-2);
   border: none;
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-tabs-bar-button .semi-tabs-tab:hover {

package/lib/es/tabs/tabs.scss

@@ -134,14 +134,55 @@ $module: #{$prefix}-tabs;
                     outline-offset: $width-tabs-outline-offset;
                 }
             }
+            & > .#{$prefix}-button-disabled{
+                color: $color-tabs_tab-pane_arrow_disabled-text-default;
+                background-color: $color-tabs_tab-pane_arrow_disabled-bg-default;
+                &:hover{
+                    color: $color-tabs_tab-pane_arrow_disabled-text-hover;
+                    background-color: $color-tabs_tab-pane_arrow_disabled-bg-hover;
+                }
+            }
         }
 
         .#{$module}-bar-arrow-start {
             margin-right: $spacing-tabs_overflow_icon-marginRight;
+            & > .#{$prefix}-button{
+                color: $color-tabs_tab-pane_arrow-text-default;
+                padding: $spacing-tabs_tab-pane_arrow;
+                border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
+                background-color: $color-tabs_tab-pane_arrow-bg-default;
+                &:hover{
+                    background-color: var(--semi-color-fill-0);
+                    color: $color-tabs_tab-pane_arrow-text-hover;
+                    border-color: $color-tabs_tab-pane_arrow-border-hover;
+                }
+                &:active{
+                    background-color: var(--semi-color-fill-1);
+                    color: $color-tabs_tab-pane_arrow-text-active;
+                    border-color: $color-tabs_tab-pane_arrow-border-active;
+                }
+            }
+
         }
 
         .#{$module}-bar-arrow-end {
             margin-left: $spacing-tabs_overflow_icon-marginLeft;
+            & > .#{$prefix}-button{
+                color: $color-tabs_tab-pane_arrow-text-default;
+                padding: $spacing-tabs_tab-pane_arrow;
+                border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
+                background-color: $color-tabs_tab-pane_arrow-bg-default;
+                &:hover{
+                    background-color: var(--semi-color-fill-0);
+                    color: $color-tabs_tab-pane_arrow-text-hover;
+                    border-color: $color-tabs_tab-pane_arrow-border-hover;
+                }
+                &:active{
+                    background-color: var(--semi-color-fill-1);
+                    color: $color-tabs_tab-pane_arrow-text-active;
+                    border-color: $color-tabs_tab-pane_arrow-border-active;
+                }
+            }
         }
     }
 
@@ -160,13 +201,13 @@ $module: #{$prefix}-tabs;
     &-bar-line {
         &.#{$module}-bar-top {
             border-bottom: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
-            transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的 color的transition
+            transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的 color的transition
             transform:scale($transform_scale-tabs_tab_line-item);
 
             .#{$module}-tab {
                 padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
                 transition: border-bottom-color $transition_duration-tabs_tab_line-border $transition_function-tabs_tab_line-border $transition_delay-tabs_tab_line-border,
-                color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的border-color 的 transition
+                color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的border-color 的 transition
                 &:nth-of-type(1) {
                     padding-left: 0;
                 }

package/lib/es/tabs/variables.scss

@@ -48,6 +48,23 @@ $color-tabs_tab-outline-focus: var(--semi-color-primary-light-active); // 页签
 
 $color-tabs_tab-pane-text-default: var(--semi-color-text-0); // 标签页内容文本颜色 - 默认
 
+$color-tabs_tab-pane_arrow-text-default: var(--semi-color-primary); // 滚动折叠箭头颜色 - 默认
+$color-tabs_tab-pane_arrow-border-default: transparent; // 滚动折叠箭头边框颜色 - 默认
+$color-tabs_tab-pane_arrow-bg-default:transparent; // 滚动折叠箭头背景色 - 默认
+
+$color-tabs_tab-pane_arrow-text-hover: var(--semi-color-primary); // 滚动折叠箭头颜色 - 悬浮
+$color-tabs_tab-pane_arrow-border-hover: transparent; // 滚动折叠箭头边框颜色 - 悬浮
+$color-tabs_tab-pane_arrow-bg-hover: var(--semi-color-fill-0); // 滚动折叠箭头背景色 - 悬浮
+
+$color-tabs_tab-pane_arrow-text-active: var(--semi-color-primary); // 滚动折叠箭头颜色 - 按下
+$color-tabs_tab-pane_arrow-border-active: transparent; // 滚动折叠箭头边框颜色 - 按下
+$color-tabs_tab-pane_arrow-bg-active: var(--semi-color-fill-1); // 滚动折叠箭头背景色 - 按下
+
+$color-tabs_tab-pane_arrow_disabled-bg-default: transparent;
+$color-tabs_tab-pane_arrow_disabled-bg-hover:  transparent;
+$color-tabs_tab-pane_arrow_disabled-text-default: var(--semi-color-disabled-text);
+$color-tabs_tab-pane_arrow_disabled-text-hover:  var(--semi-color-disabled-text);
+
 $font-tabs_tab-fontWeight: $font-weight-regular; // 页签文本字重 - 默认
 $font-tabs_tab_active-fontWeight: $font-weight-bold; // 页签文本字重 - 选中
 
@@ -60,6 +77,7 @@ $width-tabs_bar_card-border: $border-thickness-control; // 卡片式页签底部
 $width-tabs-outline: 2px; // 聚焦轮廓宽度
 $width-tabs-outline-offset: -2px; // 聚焦轮廓偏移宽度
 $width-tabs_bar_line-outline-offset: -1px; // 线条式页签聚焦轮廓偏移宽度
+$width-tabs_tab-pane_arrow-border:0px; // 滚动折叠箭头边框宽度
 
 $height-tabs_bar_extra_large: 50px; // 大尺寸页签高度
 $font-tabs_bar_extra_large-lineHeight: $height-tabs_bar_extra_large; // 大尺寸页签文字行高
@@ -67,6 +85,7 @@ $font-tabs_bar_extra_large-lineHeight: $height-tabs_bar_extra_large; // 大尺
 $height-tabs_bar_extra_small: 36px; // 小尺寸页签高度
 $font-tabs_bar_extra_small-lineHeight: $height-tabs_bar_extra_small; // 小尺寸页签文字行高
 
+$spacing-tabs_tab-pane_arrow: 8px; //滚动折叠箭头内边距
 $spacing-tabs_bar_extra-paddingY: 0px; // 附加操作垂直内边距
 $spacing-tabs_bar_extra-paddingX: 5px; // 附加操作水平内边距
 $spacing-tabs_tab_icon-marginRight: $spacing-tight; // 附加操作垂直内边距
@@ -119,3 +138,4 @@ $spacing-tabs_bar_button_tab-paddingX: $spacing-base-tight; // 按钮式页签
 $radius-tabs_tab_card: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0; // 卡片式页签四向圆角
 $radius-tabs_tab_card_left: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); // 垂直卡片式页签四向圆角
 $radius-tabs_tab_button: var(--semi-border-radius-small); // 按钮式页签圆角
+

package/lib/es/tagInput/animation.scss

@@ -1,7 +1,7 @@
-$transition_duration-tagInput-bg: var(--semi-transition_duration-faster);//标签输入框-背景色-动画持续时间
+$transition_duration-tagInput-bg: var(--semi-transition_duration-none);//标签输入框-背景色-动画持续时间
 $transition_function-tagInput-bg: var(--semi-transition_function-easeIn);//标签输入框-背景色-过渡曲线
-$transition_delay-tagInput-bg: var(--semi-transition_delay-fastest);//标签输入框-背景色-延迟时间
+$transition_delay-tagInput-bg: var(--semi-transition_delay-none);//标签输入框-背景色-延迟时间
 
-$transition_duration-tagInput-border: var(--semi-transition_duration-faster);//标签输入框-边框-动画持续时间
+$transition_duration-tagInput-border: var(--semi-transition_duration-none);//标签输入框-边框-动画持续时间
 $transition_function-tagInput-border: var(--semi-transition_function-easeIn);//标签输入框-边框-过渡曲线
-$transition_delay-tagInput-border: var(--semi-transition_delay-fastest);//标签输入框-边框-延迟时间
+$transition_delay-tagInput-border: var(--semi-transition_delay-none);//标签输入框-边框-延迟时间

package/lib/es/tagInput/tagInput.css

@@ -9,7 +9,7 @@
   font-weight: 400;
   width: 100%;
   box-sizing: border-box;
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
 }
 .semi-tagInput-drag-item {
   display: flex;

package/lib/es/timePicker/utils/animation.scss

@@ -1,7 +1,7 @@
-$transition_duration-timePicker-bg: var(--semi-transition_duration-faster);//标签输入框-背景色-动画持续时间
+$transition_duration-timePicker-bg: var(--semi-transition_duration-none);//标签输入框-背景色-动画持续时间
 $transition_function-tagInput-bg: var(--semi-transition_function-easeIn);//标签输入框-背景色-过渡曲线
-$transition_delay-tagInput-bg: var(--semi-transition_delay-fastest);//标签输入框-背景色-延迟时间
+$transition_delay-tagInput-bg: var(--semi-transition_delay-none);//标签输入框-背景色-延迟时间
 
-$transition_duration-tagInput-border: var(--semi-transition_duration-faster);//标签输入框-边框-动画持续时间
+$transition_duration-tagInput-border: var(--semi-transition_duration-none);//标签输入框-边框-动画持续时间
 $transition_function-tagInput-border: var(--semi-transition_function-easeIn);//标签输入框-边框-过渡曲线
-$transition_delay-tagInput-border: var(--semi-transition_delay-fastest);//标签输入框-边框-延迟时间
+$transition_delay-tagInput-border: var(--semi-transition_delay-none);//标签输入框-边框-延迟时间

package/lib/es/tooltip/constants.d.ts

@@ -18,5 +18,6 @@ declare const numbers: {
     readonly MOUSE_ENTER_DELAY: 50;
     readonly MOUSE_LEAVE_DELAY: 50;
     readonly SPACING: 8;
+    readonly MARGIN: 0;
 };
 export { cssClasses, strings, numbers };

package/lib/es/tooltip/constants.js

@@ -18,7 +18,7 @@ const numbers = {
   DEFAULT_Z_INDEX: 1060,
   MOUSE_ENTER_DELAY: 50,
   MOUSE_LEAVE_DELAY: 50,
-  SPACING: 8 // Values are consistent with spacing-tight in scss
-
+  SPACING: 8,
+  MARGIN: 0
 };
 export { cssClasses, strings, numbers };

package/lib/es/tooltip/foundation.d.ts

@@ -65,7 +65,10 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     _bindResizeEvent(): void;
     unBindResizeEvent(): void;
     removePortal: () => void;
+    _adjustPos(position?: string, isVertical?: boolean, adjustType?: string, concatPos?: any): string;
     _reversePos(position?: string, isVertical?: boolean): string;
+    _expandPos(position: string, concatPos: string): string;
+    _reducePos(position?: string): string;
     clearDelayTimer(): void;
     _generateEvent(types: ArrayElement<typeof strings.TRIGGER_SET>): {
         triggerEventSet: {
@@ -80,7 +83,14 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     _togglePortalVisible(isVisible: boolean): void;
     _roundPixel(pixel: number): number;
     calcTransformOrigin(position: Position, triggerRect: DOMRect, translateX: number, translateY: number): string;
-    calcPosStyle(triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect, position?: Position, spacing?: number): Record<string, string | number>;
+    calcPosStyle(props: {
+        triggerRect: DOMRect;
+        wrapperRect: DOMRect;
+        containerRect: PopupContainerDOMRect;
+        position?: Position;
+        spacing?: number;
+        isOverFlow?: [boolean, boolean];
+    }): Record<string, string | number>;
     /**
      * 耦合的东西比较多，稍微罗列一下：
      *
@@ -97,7 +107,16 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     calcPosition: (triggerRect?: DOMRect, wrapperRect?: DOMRect, containerRect?: PopupContainerDOMRect, shouldUpdatePos?: boolean) => Record<string, string | number>;
     isLR(position?: string): boolean;
     isTB(position?: string): boolean;
-    adjustPosIfNeed(position: Position | string, style: Record<string, any>, triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect): string;
+    isReverse(rowSpace: number, reverseSpace: number, size: number): boolean;
+    isOverFlow(rowSpace: number, reverseSpace: number, size: number): boolean;
+    isHalfOverFlow(posSpace: number, negSpace: number, size: number): boolean;
+    isHalfAllEnough(posSpace: number, negSpace: number, size: number): boolean;
+    getReverse(viewOverFlow: boolean, containerOverFlow: boolean, shouldReverseView: boolean, shouldReverseContainer: boolean): boolean;
+    adjustPosIfNeed(position: Position | string, style: Record<string, any>, triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect): {
+        position: string;
+        isHeightOverFlow: boolean;
+        isWidthOverFlow: boolean;
+    };
     delayHide: () => void;
     hide: () => void;
     _bindScrollEvent(): void;