@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/image/previewInnerFoundation.ts

@@ -1,28 +1,29 @@
+import { handlePrevent } from "../utils/a11y";
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
 import KeyCode from "../utils/keyCode";
 import { getPreloadImagArr, downloadImage, isTargetEmit } from "./utils";
+import { isUndefined, throttle } from "lodash";
 
+export type RatioType = "adaptation" | "realSize";
 export interface PreviewInnerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getIsInGroup: () => boolean;
     notifyChange: (index: number, direction: string) => void;
     notifyZoom: (zoom: number, increase: boolean) => void;
     notifyClose: () => void;
     notifyVisibleChange: (visible: boolean) => void;
-    notifyRatioChange: (type: string) => void;
+    notifyRatioChange: (type: RatioType) => void;
     notifyRotateChange: (angle: number) => void;
     notifyDownload: (src: string, index: number) => void;
+    notifyDownloadError: (src: string) => void;
     registerKeyDownListener: () => void;
     unregisterKeyDownListener: () => void;
-    getMouseActiveTime: () => number;
-    getStopTiming: () => boolean;
-    setStopTiming: (value: boolean) => void;
-    getStartMouseDown: () => {x: number; y: number};
-    setStartMouseDown: (x: number, y: number) => void;
-    setMouseActiveTime: (time: number) => void;
     disabledBodyScroll: () => void;
-    enabledBodyScroll: () => void
+    enabledBodyScroll: () => void;
+    getSetDownloadFunc: () => (src: string) => string;
+    isValidTarget: (e: any) => boolean
 }
 
+
 const NOT_CLOSE_TARGETS = ["icon", "footer"];
 const STOP_CLOSE_TARGET = ["icon", "footer", "header"];
 
@@ -31,56 +32,94 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
         super({ ...adapter });
     }
 
+    _timer = null;
+    _startMouseDown = { x: 0, y: 0 };
+
     beforeShow() {
         this._adapter.registerKeyDownListener();
         this._adapter.disabledBodyScroll();
+        this.updateTimer();
     }
 
     afterHide() {
         this._adapter.unregisterKeyDownListener();
         this._adapter.enabledBodyScroll();
-    }
-
-    handleRatio(type: string) {
-        this.setState({
-            ratio: type,
-        } as any);
+        this.clearTimer();
     }
 
     handleViewVisibleChange = () => {
-        const nowTime = new Date().getTime();
-        const mouseActiveTime = this._adapter.getMouseActiveTime();
-        const stopTiming = this._adapter.getStopTiming();
-        const { viewerVisibleDelay } = this.getProps();
         const { viewerVisible } = this.getStates();
-        if (nowTime - mouseActiveTime > viewerVisibleDelay && !stopTiming) {
-            viewerVisible && this.setState({
+        if (viewerVisible) {
+            this.setState({
                 viewerVisible: false,
             } as any);
+            this.clearTimer();
         }
     }
 
-    handleMouseMoveEvent = (e: any, event: string) => {
-        const isTarget = isTargetEmit(e, STOP_CLOSE_TARGET);
-        if (isTarget && event === "over") {
-            this._adapter.setStopTiming(true);
-        } else if (isTarget && event === "out") {
-            this._adapter.setStopTiming(false);
+    handleMouseMove = (e) => {
+        this._persistEvent(e);
+        this.mouseMoveHandler(e);
+    }
+    
+    mouseMoveHandler = throttle((e: any) => {
+        const { viewerVisible } = this.getStates();
+        const isValidTarget = this._adapter.isValidTarget(e);
+        if (isValidTarget) {
+            if (!viewerVisible) {
+                this.setState({
+                    viewerVisible: true,
+                } as any);
+            }
+            this.updateTimer();
+        } else {
+            this.clearTimer();
         }
+    }, 50);
+
+    updateTimer = () => {
+        const { viewerVisibleDelay } = this.getProps();
+        this.clearTimer();
+        this._timer = setTimeout(this.handleViewVisibleChange, viewerVisibleDelay);
     }
 
-    handleMouseMove = (e: any) => {
-        this._adapter.setMouseActiveTime(new Date().getTime());
-        this.setState({
-            viewerVisible: true,
-        } as any);
+    clearTimer = () => {
+        if (this._timer) {
+            clearTimeout(this._timer);
+            this._timer = null;
+        }
+    }
+
+    handleWheel = (e: any) => {
+        this.onWheel(e);
+        handlePrevent(e);
     }
 
+    onWheel = (e: any): void => {
+        const { zoomStep, maxZoom, minZoom } = this.getProps();
+        const { zoom: currZoom } = this.getStates();
+        let _zoom: number;
+        if (e.deltaY < 0) {
+            /* zoom in */
+            if (currZoom + zoomStep <= maxZoom) {
+                _zoom = Number((currZoom + zoomStep).toFixed(2));
+            }
+        } else if (e.deltaY > 0) {
+            /* zoom out */
+            if (currZoom - zoomStep >= minZoom) {
+                _zoom = Number((currZoom - zoomStep).toFixed(2));
+            }
+        }
+        if (!isUndefined(_zoom)) {
+            this.handleZoomImage(_zoom);
+        }
+    };
+
     handleMouseUp = (e: any) => {
         const { maskClosable } = this.getProps();
         let couldClose = !isTargetEmit(e, NOT_CLOSE_TARGETS);
         const { clientX, clientY } = e;
-        const { x, y } = this._adapter.getStartMouseDown();
+        const { x, y } = this._startMouseDown;
         // 对鼠标移动做容错处理，当 x 和 y 方向在 mouseUp 的时候移动距离都小于等于 5px 时候就可以关闭预览
         // Error-tolerant processing of mouse movement, when the movement distance in the x and y directions is less than or equal to 5px in mouseUp, the preview can be closed
         // 不做容错处理的话，直接用 clientX !== x || y !== clientY 做判断，鼠标在用户点击时候无意识的轻微移动无法关闭预览，不符合用户预期
@@ -89,13 +128,13 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
             couldClose = false;
         }
         if (couldClose && maskClosable) {
-            this.handlePreviewClose();
+            this._adapter.notifyVisibleChange(false);
         }
     }
 
     handleMouseDown = (e: any) => {
         const { clientX, clientY } = e;
-        this._adapter.setStartMouseDown(clientX, clientY);
+        this._startMouseDown = { x: clientX, y: clientY } ;
     }
 
     handleKeyDown = (e: any) => {
@@ -128,23 +167,24 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
             direction,
             rotation: 0,
         } as any);
-        this._adapter.notifyRotateChange(0);
     }
 
     handleDownload = () => {
         const { currentIndex, imgSrc } = this.getStates();
+        const setDownloadName = this._adapter.getSetDownloadFunc();
         const downloadSrc = imgSrc[currentIndex];
-        const downloadName = downloadSrc.slice(downloadSrc.lastIndexOf("/") + 1);
-        downloadImage(downloadSrc, downloadName);
+        const downloadName = setDownloadName ? setDownloadName(downloadSrc) : downloadSrc.slice(downloadSrc.lastIndexOf("/") + 1).split('?')[0];
+        downloadImage(downloadSrc, downloadName, this._adapter.notifyDownloadError);
         this._adapter.notifyDownload(downloadSrc, currentIndex);
     }
 
-    handlePreviewClose = () => {
+    handlePreviewClose = (e: any) => {
         this._adapter.notifyVisibleChange(false);
         this._adapter.notifyClose();
+        handlePrevent(e);
     }
 
-    handleAdjustRatio = (type: string) => {
+    handleAdjustRatio = (type: RatioType) => {
         this.setState({
             ratio: type,
         } as any);
@@ -160,12 +200,14 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
         this._adapter.notifyRotateChange(newRotation);
     }
 
-    handleZoomImage = (newZoom: number) => {
+    handleZoomImage = (newZoom: number, notify: boolean = true) => {
         const { zoom } = this.getStates();
-        this._adapter.notifyZoom(newZoom, newZoom > zoom);
-        this.setState({
-            zoom: newZoom,
-        } as any);
+        if (zoom !== newZoom) {
+            notify && this._adapter.notifyZoom(newZoom, newZoom > zoom);
+            this.setState({
+                zoom: newZoom,
+            } as any);
+        }
     }
 
     // 当 visible 改变之后，预览组件完成首张图片加载后，启动预加载
@@ -180,14 +222,18 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
         const { preLoad, preLoadGap, infinite, currentIndex } = this.getProps();
 
         const { imgSrc }= this.getStates();
-        if (!preLoad || typeof preLoadGap !== "number" || preLoadGap < 1){
+        if (!preLoad || typeof preLoadGap !== "number" || preLoadGap < 1) {
             return;
         }
 
         const preloadImages = getPreloadImagArr(imgSrc, currentIndex, preLoadGap, infinite);
+        if (preloadImages.length === 0) {
+            return;
+        }
+
         const Img = new Image();
         let index = 0;
-        function callback(e: any){
+        function callback(e: any) {
             index++;
             if (index < preloadImages.length) {
                 Img.src = preloadImages[index];
@@ -214,7 +260,7 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
     preloadSingleImage = () => {
         const { preLoad, preLoadGap, infinite } = this.getProps();
         const { imgSrc, currentIndex, direction, imgLoadStatus } = this.getStates();
-        if (!preLoad || typeof preLoadGap !== "number" || preLoadGap < 1){
+        if (!preLoad || typeof preLoadGap !== "number" || preLoadGap < 1) {
             return;
         }
         // 根据方向决定preload那个index

package/image/utils.ts

@@ -12,26 +12,24 @@ export const isTargetEmit = (event, targetClasses): boolean => {
     return isTarget;
 };
 
-export const downloadImage = (src: string, filename: string): void => {
-    const image = new Image();
-    image.src = src;
-    image.crossOrigin = "anonymous";
-    image.onload = (e): void => {
-        const eleLink = document.createElement("a");
-        eleLink.download = filename;
-        eleLink.style.display = "none";
-        eleLink.download = filename;
-        eleLink.href = src;
-        const canvas = document.createElement("canvas");
-        canvas.width = image.width;
-        canvas.height = image.height;
-        const context = canvas.getContext("2d");
-        context.drawImage(image, 0, 0, image.width, image.height);
-        eleLink.href = canvas.toDataURL("image/jpeg");
-        document.body.appendChild(eleLink);
-        eleLink.click();
-        document.body.removeChild(eleLink);
-    };
+export const downloadImage = async (src: string, filename: string, downloadErrorCb: (src: string) => void ) => {
+    try {
+        const response = await fetch(src);
+        if (response.ok) {
+            const blob = await response.blob();
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = filename;
+            link.click();
+            URL.revokeObjectURL(url);
+            link.remove();
+        } else {
+            downloadErrorCb(src);
+        }
+    } catch (error) {
+        downloadErrorCb(src);
+    }
 };
 
 export const crossMerge = (leftArr = [], rightArr = []) => {

package/image/variables.scss

@@ -27,7 +27,7 @@ $height-image_preview_icon: 40px; // 图像预览footer操作区icon高度
 $height-image_preview_header_close: 30px; // 图像预览header部分的关闭热区高度
 
 $radius-image: var(--semi-border-radius-small); // 图像圆角
-$radius-image_preview_footer: 6px; // 图像预览footer操作区圆角
+$radius-image_preview_footer: var(--semi-border-radius-medium); // 图像预览footer操作区圆角
 
 $color-image_mask-bg: var(--semi-color-overlay-bg); // 图像蒙层背景色
 $color-image_mask_info_text: var(--semi-color-white); // 图像蒙层文字颜色

package/input/foundation.ts

@@ -51,7 +51,6 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
         }
     }
 
-    // eslint-disable-next-line
     setDisable() {}
 
     _setInitValue() {
@@ -120,7 +119,6 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
         if (isNumber(maxLength) && maxLength >= 0 && isFunction(getValueLength) && isString(value)) {
             const valueLength = getValueLength(value);
             if (valueLength > maxLength) {
-                // eslint-disable-next-line max-len
                 console.warn('[Semi Input] The input character is truncated because the input length exceeds the maximum length limit');
                 const truncatedValue = this.handleTruncateValue(value, maxLength);
                 return truncatedValue;
@@ -270,8 +268,8 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
 
     isAllowClear() {
         const { value, isFocus, isHovering } = this._adapter.getStates();
-        const { showClear, disabled } = this._adapter.getProps();
-        const allowClear = value && showClear && !disabled && (isFocus || isHovering);
+        const { showClear, disabled, showClearIgnoreDisabled } = this._adapter.getProps();
+        const allowClear = value && showClear && (!disabled || showClearIgnoreDisabled) && (isFocus || isHovering);
         return allowClear;
     }
 

package/input/input.scss

@@ -30,6 +30,7 @@ $module: #{$prefix}-input;
     transform: scale($transform_scale-input);
 }
 
+
 .#{$module}-wrapper {
     display: inline-block;
     position: relative;
@@ -84,7 +85,7 @@ $module: #{$prefix}-input;
         border: $color-input_default-border-focus solid $width-input_wrapper_focus-border;
 
         &:hover {
-            background-color: $color-input_default-bg-focus;
+            background-color: $color-input_default-bg-focus-hover;
             border-color: $color-input_default-border-focus;
         }
 
@@ -224,7 +225,6 @@ $module: #{$prefix}-input;
 
             &:not(:last-child) {
                 border-right-style: none;
-                border-radius: 0;
             }
         }
     }
@@ -461,6 +461,9 @@ $module: #{$prefix}-input;
     &[type="password"]::-ms-clear {
         display: none;
     }
+    &[type="search"]::-webkit-search-cancel-button {
+        display: none;
+    }
 
     &::placeholder {
         color: $color-input_placeholder-text-default;
@@ -514,7 +517,7 @@ $module: #{$prefix}-input;
         &-text {
             margin: 0 $spacing-base-tight;
             color: $color-input_prefix-text-default;
-            font-weight: 600;
+            font-weight: $font-weight-bold;
             white-space: nowrap;
         }
 
@@ -593,6 +596,7 @@ $module: #{$prefix}-input;
 
         // select与autocomplete的border-radius都是基于select
         .#{$prefix}-select,
+        .#{$prefix}-tagInput,
         .#{$prefix}-cascader,
         .#{$prefix}-tree-select,
         & > .#{$module}-wrapper {
@@ -622,8 +626,13 @@ $module: #{$prefix}-input;
             }
         }
 
+        .#{$prefix}-select{
+            overflow-y: visible;
+        }
+        
         .#{$prefix}-input-number,
         .#{$prefix}-datepicker,
+        .#{$prefix}-timepicker,
         .#{$prefix}-autocomplete {
             border-radius: 0;
 
@@ -681,4 +690,40 @@ $module: #{$prefix}-input;
     }
 }
 
+.#{$module}-only_border{
+    background: transparent;
+    &:hover{
+        background: transparent;
+        border-color: $color_input-default-border-only_border-hover;
+    }
+    &:focus-within{
+        background: transparent;
+    }
+    border-color: $color_input-default-border-only_border-default;
+
+}
+
+.#{$module}-borderless{
+
+    &:not(:focus-within):not(:hover){
+        background-color:transparent;
+        border-color: transparent;
+    }
+
+    &:focus-within:not(:active){
+        background-color:transparent;
+    }
+
+
+    &.#{$module}-wrapper-error:not(:focus-within){
+        border-color: $color-input_danger-border-focus;
+    }
+
+    &.#{$module}-wrapper-warning:not(:focus-within){
+        border-color: $color-input_warning-border-focus;
+    }
+
+
+}
+
 @import "./rtl.scss";

package/input/textarea.scss

@@ -195,4 +195,38 @@ $module: #{$prefix}-input;
     }
 }
 
+.#{$module}-textarea-borderless{
+    &:not(:focus-within):not(:hover){
+        background-color:transparent;
+        border-color: transparent;
+    }
+
+    &:focus-within:not(:active){
+        background-color:transparent;
+    }
+
+    &.#{$module}-textarea-wrapper-error:not(:focus-within){
+        border-color: $color-input_danger-border-focus;
+    }
+
+
+
+    &.#{$module}-textarea-wrapper-warning:not(:focus-within){
+        border-color: $color-input_warning-border-focus;
+    }
+
+    &.#{$module}-textarea-wrapper-error{
+            .#{$module}-textarea-counter{
+                color: $color-input_danger-border-focus;
+            }
+    }
+
+    &.#{$module}-textarea-wrapper-warning{
+        .#{$module}-textarea-counter{
+            color: $color-input_warning-border-focus;
+        }
+    }
+
+}
+
 @import "./rtl.scss";

package/input/textareaFoundation.ts

@@ -52,7 +52,6 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
         this.setInitValue();
     }
 
-    // eslint-disable-next-line
     destroy() { }
 
     setInitValue() {
@@ -114,16 +113,21 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
      */
     handleVisibleMaxLength(value: string) {
         const { maxLength, getValueLength } = this._adapter.getProps();
-        if (isNumber(maxLength) && maxLength >= 0 && isFunction(getValueLength) && isString(value)) {
-            const valueLength = getValueLength(value);
-            if (valueLength > maxLength) {
-                // eslint-disable-next-line max-len
-                console.warn('[Semi TextArea] The input character is truncated because the input length exceeds the maximum length limit');
-                const truncatedValue = this.handleTruncateValue(value, maxLength);
-                return truncatedValue;
+        if (isNumber(maxLength) && maxLength >= 0 && isString(value)) {
+            if (isFunction(getValueLength)) {
+                const valueLength = getValueLength(value);
+                if (valueLength > maxLength) {
+                    console.warn('[Semi TextArea] The input character is truncated because the input length exceeds the maximum length limit');
+                    const truncatedValue = this.handleTruncateValue(value, maxLength);
+                    return truncatedValue;
+                }
             } else {
-                return value;
+                if (value.length > maxLength) {
+                    console.warn('[Semi TextArea] The input character is truncated because the input length exceeds the maximum length limit');
+                    return value.slice(0, maxLength);
+                }
             }
+            return value;
         }
         return undefined;
     }
@@ -160,8 +164,26 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
 
     handleBlur(e: any) {
         const { value } = this.getStates();
+        const { maxLength } = this.getProps();
+        let realValue = value;
+        if (maxLength) {
+            // 如果设置了 maxLength，在中文输输入过程中，如果点击外部触发 blur，则拼音字符的所有内容会回显，
+            // 该表现不符合 maxLength 规定，因此需要在 blur 的时候二次确认
+            // 详情见 https://github.com/DouyinFE/semi-design/issues/2005
+            // If maxLength is set, during the Chinese input process, if you click outside to trigger blur, 
+            // all the contents of the Pinyin characters will be echoed.
+            // This behavior does not meet the maxLength requirement, so we need to confirm twice when blurring。
+            // For details, see https://github.com/DouyinFE/semi-design/issues/2005
+            realValue = this.handleVisibleMaxLength(value);
+            if (realValue !== value) {
+                if (!this._isControlledComponent()) {
+                    this._adapter.setValue(realValue);
+                }
+                this._adapter.notifyChange(realValue, e);
+            }
+        }
         this._adapter.toggleFocusing(false);
-        this._adapter.notifyBlur(value, e);
+        this._adapter.notifyBlur(realValue, e);
     }
 
     handleKeyDown(e: any) {
@@ -171,22 +193,26 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
         }
     }
 
-    resizeTextarea = (cb?: any) => {
+    resizeTextarea = () => {
         const { height } = this.getStates();
-        const { rows } = this.getProps();
+        const { rows, autosize } = this.getProps();
         const node = this._adapter.getRef();
         const nodeSizingData = getSizingData(node);
 
         if (!nodeSizingData) {
-            cb && cb();
             return;
         }
 
+        const [minRows, maxRows] = autosize !== null && typeof autosize === 'object' ? [
+            autosize?.minRows ?? rows,
+            autosize?.maxRows
+        ] : [rows];
+
         const newHeight = calculateNodeHeight(
             nodeSizingData,
             node.value || node.placeholder || 'x',
-            rows
-            // maxRows,
+            minRows,
+            maxRows
         );
 
         if (height !== newHeight) {
@@ -194,8 +220,6 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
             node.style.height = `${newHeight}px`;
             return;
         }
-
-        cb && cb();
     };
 
     // e: MouseEvent
@@ -234,4 +258,4 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
         this._adapter.notifyClear(e);
         this.stopPropagation(e);
     }
-}
+}

package/input/variables.scss

@@ -13,6 +13,8 @@ $color-input_default-bg-focus: var(--semi-color-fill-0); // 输入框背景颜
 $color-input_default-border-focus: var(--semi-color-focus-border); // 输入框描边颜色 - 选中
 $color-input_icon-outline: var(--semi-color-primary-light-active); // 输入框 icon outline 颜色
 
+$color-input_default-bg-focus-hover: $color-input_default-bg-focus; // 输入框背景颜色 - 选中悬浮
+
 // error
 $color-input_danger-bg-default: var(--semi-color-danger-light-default); // 错误输入框背景颜色 - 默认
 $color-input_danger-border-default: var(--semi-color-danger-light-default); // 错误输入框描边颜色 - 默认
@@ -57,6 +59,9 @@ $color-input_counter_danger-text-default: var(--semi-color-danger); // 多行文
 
 $color-input_group-border-default: var(--semi-color-border); // 输入框组合分割线颜色
 
+$color_input-default-border-only_border-default: var(--semi-color-border); // 只有描边的输入框描边颜色 - 默认
+$color_input-default-border-only_border-hover: var(--semi-color-border); // 只有描边的输入框描边颜色 - 默认
+
 $height-input_large: $height-control-large - 2px; // 输入框高度 & 行高 - 大尺寸
 $height-input_small: $height-control-small - 2px; // 输入框高度 & 行高 - 小尺寸
 $height-input_default: $height-control-default - 2px; // 输入框高度 & 行高 - 默认尺寸
@@ -111,3 +116,5 @@ $width-textarea-icon: $width-icon-medium + $spacing-tight; // clear 图标最小
 $height-textarea-default: 32px; // 多行文本 clear 图标的高度
 $spacing-textarea_withShowClear-paddingRight: 36px; // 多行文本设置 showClear 后的右内边距
 $spacing-textarea-icon-right: $spacing-extra-tight;// 多行文本 clear 图标的右边距
+
+

package/inputNumber/foundation.ts

@@ -1,6 +1,3 @@
-/* eslint-disable max-len */
-/* eslint-disable no-param-reassign */
-/* eslint-disable eqeqeq */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import keyCode from '../utils/keyCode';
 import { numbers } from './constants';
@@ -177,7 +174,6 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
                     const dotBeginStr = dotIndex > -1 ? valueAfterParser.slice(dotIndex) : '';
                     formattedNum += dotBeginStr;
                 } else if (precLength < lengthAfterDot) {
-                    // eslint-disable-next-line max-depth
                     for (let i = 0; i < lengthAfterDot - precLength; i++) {
                         formattedNum += '0';
                     }
@@ -261,7 +257,6 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
                 }
 
                 if (willSetNum != null) {
-                    // eslint-disable-next-line max-depth
                     if (!this._isControlledComponent('value')) {
                         this._adapter.setNumber(willSetNum);
                     }

package/inputNumber/inputNumber.scss

@@ -108,4 +108,13 @@ $module: #{$prefix}-input-number;
     }
 }
 
+
+.#{$module}:not(:focus-within):not(:hover){
+    .#{$prefix}-input-borderless{
+        & + .#{$module}-suffix-btns{
+            opacity: 0;
+        }
+    }
+}
+
 @import "./rtl.scss";

package/lib/cjs/anchor/anchor.css

@@ -65,12 +65,17 @@
   border-radius: 3px;
   transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
+  background: transparent;
 }
 .semi-anchor-link-title:hover {
   color: var(--semi-color-tertiary-hover);
 }
 .semi-anchor-link-title-active {
   color: var(--semi-color-text-0);
+  background: transparent;
+}
+.semi-anchor-link-title-active:hover {
+  color: var(--semi-color-tertiary-hover);
 }
 .semi-anchor-link-title:focus-visible {
   outline: 2px solid var(--semi-color-primary-light-active);