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

package/highlight/variables.scss

@@ -1,5 +1,5 @@
 
-$color-highlight-text-default: rgba(var(--semi-yellow-4), 1); // 高亮文字颜色
-$color-highlight-text-bg-default: transparent; // 高亮文字背景颜色
+$color-highlight-text-default: var(--semi-color-highlight); // 高亮文字颜色
+$color-highlight-text-bg-default:  var(--semi-color-highlight-bg); // 高亮文字背景颜色
 
 $font-highlight-text-fontWeight: 600; // 高亮文字字重

package/input/foundation.ts

@@ -15,6 +15,7 @@ export interface InputAdapter extends Partial<DefaultAdapter>, Partial<InputDefa
     notifyBlur(value: any, e: any): void;
     setEyeClosed(eyeClosed: boolean): void;
     toggleFocusing(focused: boolean): void;
+    focusInput(): void;
     notifyFocus(value: any, e: any): void;
     notifyInput(e: any): void;
     notifyKeyDown(e: any): void;
@@ -198,6 +199,7 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
         }
         // do not handle bubbling up events
         if (this._adapter.isEventTarget(e)) {
+            this._adapter.focusInput();
             this._adapter.toggleFocusing(true);
         }
     }
@@ -212,6 +214,7 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
 
     handleClickEye(e: any) {
         const eyeClosed = this._adapter.getState('eyeClosed');
+        this._adapter.focusInput();
         this._adapter.toggleFocusing(true);
         this._adapter.setEyeClosed(!eyeClosed);
     }
@@ -276,6 +279,7 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
         const { disabled } = this._adapter.getProps();
         const { isFocus } = this._adapter.getStates();
         if (!disabled && !isFocus) {
+            this._adapter.focusInput();
             this._adapter.toggleFocusing(true);
         }
     }

package/inputNumber/foundation.ts

@@ -343,7 +343,8 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
 
     _preventDefault(event: any) {
         const keepFocus = this._adapter.getProp('keepFocus');
-        if (keepFocus) {
+        const innerButtons = this._adapter.getProp('innerButtons');
+        if (keepFocus || innerButtons) {
             event.preventDefault();
         }
     }

package/lib/cjs/highlight/highlight.css

@@ -2,7 +2,7 @@
 /* sizing */
 /* spacing */
 .semi-highlight-tag {
-  color: rgba(var(--semi-yellow-4), 1);
-  background-color: transparent;
+  color: var(--semi-color-highlight);
+  background-color: var(--semi-color-highlight-bg);
   font-weight: 600;
 }

package/lib/cjs/highlight/variables.scss

@@ -1,5 +1,5 @@
 
-$color-highlight-text-default: rgba(var(--semi-yellow-4), 1); // 高亮文字颜色
-$color-highlight-text-bg-default: transparent; // 高亮文字背景颜色
+$color-highlight-text-default: var(--semi-color-highlight); // 高亮文字颜色
+$color-highlight-text-bg-default:  var(--semi-color-highlight-bg); // 高亮文字背景颜色
 
 $font-highlight-text-fontWeight: 600; // 高亮文字字重

package/lib/cjs/input/foundation.d.ts

@@ -9,6 +9,7 @@ export interface InputAdapter extends Partial<DefaultAdapter>, Partial<InputDefa
     notifyBlur(value: any, e: any): void;
     setEyeClosed(eyeClosed: boolean): void;
     toggleFocusing(focused: boolean): void;
+    focusInput(): void;
     notifyFocus(value: any, e: any): void;
     notifyInput(e: any): void;
     notifyKeyDown(e: any): void;

package/lib/cjs/input/foundation.js

@@ -240,6 +240,8 @@ class InputFoundation extends _foundation.default {
 
 
     if (this._adapter.isEventTarget(e)) {
+      this._adapter.focusInput();
+
       this._adapter.toggleFocusing(true);
     }
   }
@@ -255,6 +257,8 @@ class InputFoundation extends _foundation.default {
   handleClickEye(e) {
     const eyeClosed = this._adapter.getState('eyeClosed');
 
+    this._adapter.focusInput();
+
     this._adapter.toggleFocusing(true);
 
     this._adapter.setEyeClosed(!eyeClosed);
@@ -347,6 +351,8 @@ class InputFoundation extends _foundation.default {
     } = this._adapter.getStates();
 
     if (!disabled && !isFocus) {
+      this._adapter.focusInput();
+
       this._adapter.toggleFocusing(true);
     }
   }

package/lib/cjs/inputNumber/foundation.js

@@ -371,7 +371,9 @@ class InputNumberFoundation extends _foundation.default {
   _preventDefault(event) {
     const keepFocus = this._adapter.getProp('keepFocus');
 
-    if (keepFocus) {
+    const innerButtons = this._adapter.getProp('innerButtons');
+
+    if (keepFocus || innerButtons) {
       event.preventDefault();
     }
   }

package/lib/cjs/tooltip/foundation.js

@@ -1142,23 +1142,26 @@ class Tooltip extends _foundation.default {
 
 
       if (this.isTB(position)) {
-        isHeightOverFlow = isViewYOverFlow && isContainerYOverFlow;
+        isHeightOverFlow = isViewYOverFlow && isContainerYOverFlow; // Related PR: https://github.com/DouyinFE/semi-design/pull/1297
+        // If clientRight or restClientRight less than 0, means that the left and right parts of the trigger are blocked
+        // Then the display of the wrapper will also be affected, make width overflow to offset the wrapper
 
         if (position === 'top' || position === 'bottom') {
-          isWidthOverFlow = isViewXOverFlowSideHalf && isContainerXOverFlowSideHalf;
+          isWidthOverFlow = isViewXOverFlowSideHalf && isContainerXOverFlowSideHalf || clientRight < 0 || restClientRight < 0;
         } else {
-          isWidthOverFlow = isViewXOverFlowSide && isContainerXOverFlowSide;
+          isWidthOverFlow = isViewXOverFlowSide && isContainerXOverFlowSide || clientRight < 0 || restClientRight < 0;
         }
       } // 左右方向 left and right
 
 
       if (this.isLR(position)) {
-        isWidthOverFlow = isViewXOverFlow && isContainerXOverFlow;
+        isWidthOverFlow = isViewXOverFlow && isContainerXOverFlow; // If clientTop or restClientTop less than 0, means that the top and bottom parts of the trigger are blocked
+        // Then the display of the wrapper will also be affected, make height overflow to offset the wrapper
 
         if (position === 'left' || position === 'right') {
-          isHeightOverFlow = isViewYOverFlowSideHalf && isContainerYOverFlowSideHalf;
+          isHeightOverFlow = isViewYOverFlowSideHalf && isContainerYOverFlowSideHalf || clientTop < 0 || restClientTop < 0;
         } else {
-          isHeightOverFlow = isViewYOverFlowSide && isContainerYOverFlowSide;
+          isHeightOverFlow = isViewYOverFlowSide && isContainerYOverFlowSide || clientTop < 0 || restClientTop < 0;
         }
       }
     }

package/lib/es/highlight/highlight.css

@@ -2,7 +2,7 @@
 /* sizing */
 /* spacing */
 .semi-highlight-tag {
-  color: rgba(var(--semi-yellow-4), 1);
-  background-color: transparent;
+  color: var(--semi-color-highlight);
+  background-color: var(--semi-color-highlight-bg);
   font-weight: 600;
 }

package/lib/es/highlight/variables.scss

@@ -1,5 +1,5 @@
 
-$color-highlight-text-default: rgba(var(--semi-yellow-4), 1); // 高亮文字颜色
-$color-highlight-text-bg-default: transparent; // 高亮文字背景颜色
+$color-highlight-text-default: var(--semi-color-highlight); // 高亮文字颜色
+$color-highlight-text-bg-default:  var(--semi-color-highlight-bg); // 高亮文字背景颜色
 
 $font-highlight-text-fontWeight: 600; // 高亮文字字重

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

@@ -9,6 +9,7 @@ export interface InputAdapter extends Partial<DefaultAdapter>, Partial<InputDefa
     notifyBlur(value: any, e: any): void;
     setEyeClosed(eyeClosed: boolean): void;
     toggleFocusing(focused: boolean): void;
+    focusInput(): void;
     notifyFocus(value: any, e: any): void;
     notifyInput(e: any): void;
     notifyKeyDown(e: any): void;

package/lib/es/input/foundation.js

@@ -225,6 +225,8 @@ class InputFoundation extends BaseFoundation {
 
 
     if (this._adapter.isEventTarget(e)) {
+      this._adapter.focusInput();
+
       this._adapter.toggleFocusing(true);
     }
   }
@@ -240,6 +242,8 @@ class InputFoundation extends BaseFoundation {
   handleClickEye(e) {
     const eyeClosed = this._adapter.getState('eyeClosed');
 
+    this._adapter.focusInput();
+
     this._adapter.toggleFocusing(true);
 
     this._adapter.setEyeClosed(!eyeClosed);
@@ -332,6 +336,8 @@ class InputFoundation extends BaseFoundation {
     } = this._adapter.getStates();
 
     if (!disabled && !isFocus) {
+      this._adapter.focusInput();
+
       this._adapter.toggleFocusing(true);
     }
   }

package/lib/es/inputNumber/foundation.js

@@ -355,7 +355,9 @@ class InputNumberFoundation extends BaseFoundation {
   _preventDefault(event) {
     const keepFocus = this._adapter.getProp('keepFocus');
 
-    if (keepFocus) {
+    const innerButtons = this._adapter.getProp('innerButtons');
+
+    if (keepFocus || innerButtons) {
       event.preventDefault();
     }
   }

package/lib/es/tooltip/foundation.js

@@ -1132,23 +1132,26 @@ export default class Tooltip extends BaseFoundation {
 
 
       if (this.isTB(position)) {
-        isHeightOverFlow = isViewYOverFlow && isContainerYOverFlow;
+        isHeightOverFlow = isViewYOverFlow && isContainerYOverFlow; // Related PR: https://github.com/DouyinFE/semi-design/pull/1297
+        // If clientRight or restClientRight less than 0, means that the left and right parts of the trigger are blocked
+        // Then the display of the wrapper will also be affected, make width overflow to offset the wrapper
 
         if (position === 'top' || position === 'bottom') {
-          isWidthOverFlow = isViewXOverFlowSideHalf && isContainerXOverFlowSideHalf;
+          isWidthOverFlow = isViewXOverFlowSideHalf && isContainerXOverFlowSideHalf || clientRight < 0 || restClientRight < 0;
         } else {
-          isWidthOverFlow = isViewXOverFlowSide && isContainerXOverFlowSide;
+          isWidthOverFlow = isViewXOverFlowSide && isContainerXOverFlowSide || clientRight < 0 || restClientRight < 0;
         }
       } // 左右方向 left and right
 
 
       if (this.isLR(position)) {
-        isWidthOverFlow = isViewXOverFlow && isContainerXOverFlow;
+        isWidthOverFlow = isViewXOverFlow && isContainerXOverFlow; // If clientTop or restClientTop less than 0, means that the top and bottom parts of the trigger are blocked
+        // Then the display of the wrapper will also be affected, make height overflow to offset the wrapper
 
         if (position === 'left' || position === 'right') {
-          isHeightOverFlow = isViewYOverFlowSideHalf && isContainerYOverFlowSideHalf;
+          isHeightOverFlow = isViewYOverFlowSideHalf && isContainerYOverFlowSideHalf || clientTop < 0 || restClientTop < 0;
         } else {
-          isHeightOverFlow = isViewYOverFlowSide && isContainerYOverFlowSide;
+          isHeightOverFlow = isViewYOverFlowSide && isContainerYOverFlowSide || clientTop < 0 || restClientTop < 0;
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.24.0-beta.0",
+    "version": "2.24.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "31e17a2fa310d85e240da05803b514a08507a451",
+    "gitHead": "3cf6c8a6fa76511fd3797c7168f9ecd4bc0ef662",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/tooltip/foundation.ts

@@ -1002,19 +1002,24 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
             // 上下方向 top and bottom
             if (this.isTB(position)){
                 isHeightOverFlow = isViewYOverFlow && isContainerYOverFlow;
+                // Related PR: https://github.com/DouyinFE/semi-design/pull/1297
+                // If clientRight or restClientRight less than 0, means that the left and right parts of the trigger are blocked
+                // Then the display of the wrapper will also be affected, make width overflow to offset the wrapper
                 if (position === 'top' || position === 'bottom') {
-                    isWidthOverFlow = isViewXOverFlowSideHalf && isContainerXOverFlowSideHalf;
+                    isWidthOverFlow = isViewXOverFlowSideHalf && isContainerXOverFlowSideHalf || (clientRight < 0 || restClientRight < 0);
                 } else {
-                    isWidthOverFlow = isViewXOverFlowSide && isContainerXOverFlowSide;
+                    isWidthOverFlow = isViewXOverFlowSide && isContainerXOverFlowSide || (clientRight < 0 || restClientRight < 0);
                 }
             }
             // 左右方向 left and right
             if (this.isLR(position)){
                 isWidthOverFlow = isViewXOverFlow && isContainerXOverFlow;
+                // If clientTop or restClientTop less than 0, means that the top and bottom parts of the trigger are blocked
+                // Then the display of the wrapper will also be affected, make height overflow to offset the wrapper
                 if (position === 'left' || position === 'right') {
-                    isHeightOverFlow = isViewYOverFlowSideHalf && isContainerYOverFlowSideHalf;
+                    isHeightOverFlow = isViewYOverFlowSideHalf && isContainerYOverFlowSideHalf || (clientTop < 0 || restClientTop < 0);
                 } else {
-                    isHeightOverFlow = isViewYOverFlowSide && isContainerYOverFlowSide;
+                    isHeightOverFlow = isViewYOverFlowSide && isContainerYOverFlowSide || (clientTop < 0 || restClientTop < 0);
                 }
             }
         }