@douyinfe/semi-foundation 2.70.0-alpha.2 → 2.70.0

package/lib/es/resizable/group/index.js

@@ -1,3 +1,4 @@
+import _debounce from "lodash/debounce";
 import { getItemDirection, getPixelSize } from "../utils";
 import BaseFoundation from '../../base/foundation';
 import { adjustNewSize, judgeConstraint, getOffset } from "../utils";
@@ -39,16 +40,18 @@ export class ResizeGroupFoundation extends BaseFoundation {
       // offset caused by padding and border
       const lastStyle = this.window.getComputedStyle(lastItem);
       const nextStyle = this.window.getComputedStyle(nextItem);
-      lastOffset = getOffset(lastStyle, this.direction);
-      nextOffset = getOffset(nextStyle, this.direction);
+      lastOffset = getOffset(lastStyle, this.direction) + this.itemMinusMap.get(handlerIndex);
+      nextOffset = getOffset(nextStyle, this.direction) + this.itemMinusMap.get(handlerIndex + 1);
+      let lastItemSize = (this.direction === 'horizontal' ? lastItem.offsetWidth : lastItem.offsetHeight) + this.itemMinusMap.get(handlerIndex),
+        nextItemSize = (this.direction === 'horizontal' ? nextItem.offsetWidth : nextItem.offsetHeight) + this.itemMinusMap.get(handlerIndex + 1);
       const states = this.getStates();
       this.setState({
         isResizing: true,
         originalPosition: {
           x: clientX,
           y: clientY,
-          lastItemSize: this.direction === 'horizontal' ? lastItem.offsetWidth : lastItem.offsetHeight,
-          nextItemSize: this.direction === 'horizontal' ? nextItem.offsetWidth : nextItem.offsetHeight,
+          lastItemSize,
+          nextItemSize,
           lastOffset,
           nextOffset
         },
@@ -95,28 +98,33 @@ export class ResizeGroupFoundation extends BaseFoundation {
       } = props;
       let lastItem = this._adapter.getItem(curHandler),
         nextItem = this._adapter.getItem(curHandler + 1);
-      let parentSize = this.direction === 'horizontal' ? this.groupRef.offsetWidth : this.groupRef.offsetHeight;
-      let availableSize = parentSize - this.totalMinus;
+      let parentSize = this.groupSize;
       let delta = direction === 'horizontal' ? clientX - initX : clientY - initY;
       let lastNewSize = lastItemSize + delta;
       let nextNewSize = nextItemSize - delta;
       // 判断是否超出限制
-      let lastFlag = judgeConstraint(lastNewSize, this._adapter.getItemMin(curHandler), this._adapter.getItemMax(curHandler), availableSize, lastOffset),
-        nextFlag = judgeConstraint(nextNewSize, this._adapter.getItemMin(curHandler + 1), this._adapter.getItemMax(curHandler + 1), availableSize, nextOffset);
+      let lastFlag = judgeConstraint(lastNewSize, this._adapter.getItemMin(curHandler), this._adapter.getItemMax(curHandler), parentSize, lastOffset),
+        nextFlag = judgeConstraint(nextNewSize, this._adapter.getItemMin(curHandler + 1), this._adapter.getItemMax(curHandler + 1), parentSize, nextOffset);
       if (lastFlag) {
-        lastNewSize = adjustNewSize(lastNewSize, this._adapter.getItemMin(curHandler), this._adapter.getItemMax(curHandler), availableSize, lastOffset);
+        lastNewSize = adjustNewSize(lastNewSize, this._adapter.getItemMin(curHandler), this._adapter.getItemMax(curHandler), parentSize, lastOffset);
         nextNewSize = lastItemSize + nextItemSize - lastNewSize;
       }
       if (nextFlag) {
-        nextNewSize = adjustNewSize(nextNewSize, this._adapter.getItemMin(curHandler + 1), this._adapter.getItemMax(curHandler + 1), availableSize, nextOffset);
+        nextNewSize = adjustNewSize(nextNewSize, this._adapter.getItemMin(curHandler + 1), this._adapter.getItemMax(curHandler + 1), parentSize, nextOffset);
         lastNewSize = lastItemSize + nextItemSize - nextNewSize;
       }
+      let lastItemPercent = this.itemPercentMap.get(curHandler),
+        nextItemPercent = this.itemPercentMap.get(curHandler + 1);
+      let lastNewPercent = lastNewSize / parentSize * 100;
+      let nextNewPercent = lastItemPercent + nextItemPercent - lastNewPercent; // 消除浮点误差
+      this.itemPercentMap.set(curHandler, lastNewPercent);
+      this.itemPercentMap.set(curHandler + 1, nextNewPercent);
       if (direction === 'horizontal') {
-        lastItem.style.width = lastNewSize / parentSize * 100 + '%';
-        nextItem.style.width = nextNewSize / parentSize * 100 + '%';
+        lastItem.style.width = `calc(${lastNewPercent}% - ${this.itemMinusMap.get(curHandler)}px)`;
+        nextItem.style.width = `calc(${nextNewPercent}% - ${this.itemMinusMap.get(curHandler + 1)}px)`;
       } else if (direction === 'vertical') {
-        lastItem.style.height = lastNewSize / parentSize * 100 + '%';
-        nextItem.style.height = nextNewSize / parentSize * 100 + '%';
+        lastItem.style.height = `calc(${lastNewPercent}% - ${this.itemMinusMap.get(curHandler)}px)`;
+        nextItem.style.height = `calc(${nextNewPercent}% - ${this.itemMinusMap.get(curHandler + 1)}px)`;
       }
       let lastFunc = this._adapter.getItemChange(curHandler),
         nextFunc = this._adapter.getItemChange(curHandler + 1);
@@ -161,14 +169,14 @@ export class ResizeGroupFoundation extends BaseFoundation {
       });
       this.unregisterEvents();
     };
-    this.calculateSpace = () => {
+    this.initSpace = () => {
       const props = this.getProps();
       const {
         direction
       } = props;
       // calculate accurate space for group item
       let handlerSizes = new Array(this._adapter.getHandlerCount()).fill(0);
-      let groupSize = direction === 'horizontal' ? this.groupRef.offsetWidth : this.groupRef.offsetHeight;
+      let parentSize = this.groupSize;
       this.totalMinus = 0;
       for (let i = 0; i < this._adapter.getHandlerCount(); i++) {
         let handlerSize = direction === 'horizontal' ? this._adapter.getHandler(i).offsetWidth : this._adapter.getHandler(i).offsetHeight;
@@ -190,8 +198,8 @@ export class ResizeGroupFoundation extends BaseFoundation {
         const child = this._adapter.getItem(i);
         let minSize = this._adapter.getItemMin(i),
           maxSize = this._adapter.getItemMax(i);
-        let minSizePercent = minSize ? getPixelSize(minSize, groupSize) / groupSize * 100 : 0,
-          maxSizePercent = maxSize ? getPixelSize(maxSize, groupSize) / groupSize * 100 : 100;
+        let minSizePercent = minSize ? getPixelSize(minSize, parentSize) / parentSize * 100 : 0,
+          maxSizePercent = maxSize ? getPixelSize(maxSize, parentSize) / parentSize * 100 : 100;
         if (minSizePercent > maxSizePercent) {
           console.warn('[Semi ResizableItem]: min size bigger than max size');
         }
@@ -201,15 +209,17 @@ export class ResizeGroupFoundation extends BaseFoundation {
           if (typeof defaultSize === 'string') {
             if (defaultSize.endsWith('%')) {
               itemSizePercent = parseFloat(defaultSize.slice(0, -1));
+              this.itemPercentMap.set(i, itemSizePercent);
             } else if (defaultSize.endsWith('px')) {
-              itemSizePercent = parseFloat(defaultSize.slice(0, -2)) / groupSize * 100;
+              itemSizePercent = parseFloat(defaultSize.slice(0, -2)) / parentSize * 100;
+              this.itemPercentMap.set(i, itemSizePercent);
             } else if (/^-?\d+(\.\d+)?$/.test(defaultSize)) {
               // 仅由数字组成，表示按比例分配剩下空间
               undefineLoc.set(i, parseFloat(defaultSize));
               undefinedTotal += parseFloat(defaultSize);
               continue;
             }
-          } else {
+          } else if (typeof defaultSize === 'number') {
             undefineLoc.set(i, defaultSize);
             undefinedTotal += defaultSize;
             continue;
@@ -238,21 +248,78 @@ export class ResizeGroupFoundation extends BaseFoundation {
       }
       undefineLoc.forEach((value, key) => {
         const child = this._adapter.getItem(key);
+        const percent = value / undefinedTotal * undefineSizePercent;
+        this.itemPercentMap.set(key, percent);
         if (direction === 'horizontal') {
-          child.style.width = `calc(${undefineSizePercent / undefinedTotal * value}% - ${this.itemMinusMap.get(key)}px)`;
+          child.style.width = `calc(${percent}% - ${this.itemMinusMap.get(key)}px)`;
         } else {
-          child.style.height = `calc(${undefineSizePercent / undefinedTotal * value}% - ${this.itemMinusMap.get(key)}px)`;
+          child.style.height = `calc(${percent}% - ${this.itemMinusMap.get(key)}px)`;
         }
       });
     };
+    this.ensureConstraint = _debounce(() => {
+      // 浏览器拖拽时保证px值最大最小仍生效
+      const {
+        direction
+      } = this.getProps();
+      const itemCount = this._adapter.getItemCount();
+      let continueFlag = true;
+      for (let i = 0; i < itemCount; i++) {
+        const child = this._adapter.getItem(i);
+        const childSize = direction === 'horizontal' ? child.offsetWidth : child.offsetHeight;
+        // 判断由非鼠标拖拽导致item的size变化过程中是否有超出限制的情况
+        const childFlag = judgeConstraint(childSize, this._adapter.getItemMin(i), this._adapter.getItemMax(i), this.groupSize, this.itemMinusMap.get(i));
+        if (childFlag) {
+          const childNewSize = adjustNewSize(childSize, this._adapter.getItemMin(i), this._adapter.getItemMax(i), this.groupSize, this.itemMinusMap.get(i));
+          for (let j = i + 1; j < itemCount; j++) {
+            // 找到下一个没有超出限制的item
+            const item = this._adapter.getItem(j);
+            const itemSize = direction === 'horizontal' ? item.offsetWidth : item.offsetHeight;
+            const itemFlag = judgeConstraint(itemSize, this._adapter.getItemMin(j), this._adapter.getItemMax(j), this.groupSize, this.itemMinusMap.get(j));
+            if (!itemFlag) {
+              let childPercent = this.itemPercentMap.get(i),
+                itemPercent = this.itemPercentMap.get(j);
+              let childNewPercent = childNewSize / this.groupSize * 100;
+              let itemNewPercent = childPercent + itemPercent - childNewPercent;
+              this.itemPercentMap.set(i, childNewPercent);
+              this.itemPercentMap.set(j, itemNewPercent);
+              if (direction === 'horizontal') {
+                child.style.width = `calc(${childNewPercent}% - ${this.itemMinusMap.get(i)}px)`;
+                item.style.width = `calc(${itemNewPercent}% - ${this.itemMinusMap.get(j)}px)`;
+              } else {
+                child.style.height = `calc(${childNewPercent}% - ${this.itemMinusMap.get(i)}px)`;
+                item.style.height = `calc(${itemNewPercent}% - ${this.itemMinusMap.get(j)}px)`;
+              }
+              break;
+            } else {
+              if (j === itemCount - 1) {
+                continueFlag = false;
+                console.warn('[Semi ResizableGroup]: no enough space to adjust min/max size');
+              }
+            }
+          }
+        }
+        if (!continueFlag) {
+          break;
+        }
+      }
+    }, 200);
   }
   get groupRef() {
     return this._adapter.getGroupRef();
   }
+  get groupSize() {
+    const {
+      direction
+    } = this.getProps();
+    let groupSize = direction === 'horizontal' ? this.groupRef.offsetWidth : this.groupRef.offsetHeight;
+    return groupSize;
+  }
   init() {
     this.direction = this.getProp('direction');
     this.itemMinusMap = new Map();
-    this.calculateSpace();
+    this.itemPercentMap = new Map();
+    this.initSpace();
   }
   get window() {
     var _a;

package/lib/es/resizable/resizable.css

@@ -11,6 +11,72 @@
   user-select: none;
   z-index: 2000;
 }
+.semi-resizable-resizableHandler-top {
+  width: 100%;
+  height: 10px;
+  top: 0;
+  left: 0;
+  cursor: row-resize;
+  top: -5px;
+}
+.semi-resizable-resizableHandler-right {
+  width: 10px;
+  height: 100%;
+  top: 0;
+  left: 0;
+  cursor: col-resize;
+  left: auto;
+  right: -5px;
+}
+.semi-resizable-resizableHandler-bottom {
+  width: 100%;
+  height: 10px;
+  top: 0;
+  left: 0;
+  cursor: row-resize;
+  top: auto;
+  bottom: -5px;
+}
+.semi-resizable-resizableHandler-left {
+  width: 10px;
+  height: 100%;
+  top: 0;
+  left: 0;
+  cursor: col-resize;
+  left: -5px;
+}
+.semi-resizable-resizableHandler-topRight {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: -10px;
+  top: -10px;
+  cursor: ne-resize;
+}
+.semi-resizable-resizableHandler-bottomRight {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: -10px;
+  bottom: -10px;
+  cursor: se-resize;
+}
+.semi-resizable-resizableHandler-bottomLeft {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  left: -10px;
+  bottom: -10px;
+  cursor: sw-resize;
+}
+.semi-resizable-resizableHandler-topLeft {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  left: -10px;
+  top: -10px;
+  cursor: nw-resize;
+}
 .semi-resizable-group {
   display: flex;
   position: relative;
@@ -31,4 +97,24 @@
   justify-content: center;
   background-color: var(--semi-color-fill-0);
   opacity: 1;
+}
+.semi-resizable-handler-vertical {
+  width: 100%;
+  height: 10px;
+  flex-shrink: 0;
+  cursor: row-resize;
+}
+.semi-resizable-handler-horizontal {
+  height: 100%;
+  width: 10px;
+  flex-shrink: 0;
+  cursor: col-resize;
+}
+.semi-resizable-background {
+  height: 100%;
+  width: 100%;
+  inset: 0;
+  z-index: 2010;
+  opacity: 0;
+  position: fixed;
 }

package/lib/es/resizable/resizable.scss

@@ -1,5 +1,4 @@
-@import './variables.scss';
-
+@import "./variables.scss";
 $module: #{$prefix}-resizable;
 
 .#{$module} {
@@ -13,8 +12,83 @@ $module: #{$prefix}-resizable;
         position: absolute;
         user-select: none;
         z-index: $z-resizable_handler;
+
+        // 基础样式
+        @mixin row-resize-base {
+            width: 100%;
+            height: $height-row-handler;
+            top: 0;
+            left: 0;
+            cursor: row-resize;
+        }
+
+        @mixin col-resize-base {
+            width: $width-col-handler;
+            height: 100%;
+            top: 0;
+            left: 0;
+            cursor: col-resize;
+        }
+
+        @mixin edge-resize-base {
+            width: $width-edge-handler;
+            height: $height-edge-handler;
+            position: absolute;
+        }
+
+        // 方向样式
+        &-top {
+            @include row-resize-base;
+            top: calc(-1 * $height-row-handler / 2);
+        }
+
+        &-right {
+            @include col-resize-base;
+            left: auto;
+            right: calc(-1 * $width-col-handler / 2);
+        }
+
+        &-bottom {
+            @include row-resize-base;
+            top: auto;
+            bottom: calc(-1 * $height-row-handler / 2);
+        }
+
+        &-left {
+            @include col-resize-base;
+            left: calc(-1 * $width-col-handler / 2);
+        }
+
+        // 边角样式
+        &-topRight {
+            @include edge-resize-base;
+            right: calc(-1 * $width-edge-handler / 2);
+            top: calc(-1 * $height-edge-handler / 2);
+            cursor: ne-resize;
+        }
+
+        &-bottomRight {
+            @include edge-resize-base;
+            right: calc(-1 * $width-edge-handler / 2);
+            bottom: calc(-1 * $height-edge-handler / 2);
+            cursor: se-resize;
+        }
+
+        &-bottomLeft {
+            @include edge-resize-base;
+            left: calc(-1 * $width-edge-handler / 2);
+            bottom: calc(-1 * $height-edge-handler / 2);
+            cursor: sw-resize;
+        }
+
+        &-topLeft {
+            @include edge-resize-base;
+            left: calc(-1 * $width-edge-handler / 2);
+            top: calc(-1 * $height-edge-handler / 2);
+            cursor: nw-resize;
+        }
     }
-    
+
     &-group {
         display: flex;
         position: relative;
@@ -37,5 +111,28 @@ $module: #{$prefix}-resizable;
         justify-content: center;
         background-color: var(--semi-color-fill-0);
         opacity: 1;
+
+        &-vertical {
+            width: 100%;
+            height: $height-vertical-handler;
+            flex-shrink: 0;
+            cursor: row-resize;
+        }
+
+        &-horizontal {
+            height: 100%;
+            width: $width-horizontal-handler;
+            flex-shrink: 0;
+            cursor: col-resize;
+        }
+    }
+
+    &-background {
+        height: 100%;
+        width: 100%;
+        inset: 0;
+        z-index: $z-resizable_background;
+        opacity: 0;
+        position: fixed;
     }
 }

package/lib/es/resizable/single/index.d.ts

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../../base/foundation';
-import { Size, NumberSize, Direction } from "../singleConstants";
+import { Size, NumberSize, Direction } from "../types";
 export interface ResizableHandlerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     registerEvent: () => void;
     unregisterEvent: () => void;

package/lib/es/resizable/single/index.js

@@ -1,5 +1,5 @@
 import BaseFoundation from '../../base/foundation';
-import { DEFAULT_SIZE } from "../singleConstants";
+import { DEFAULT_SIZE } from "../types";
 import { getStringSize, getNumberSize, has, calculateNewMax, findNextSnap, snap, clamp } from "../utils";
 export class ResizableHandlerFoundation extends BaseFoundation {
   constructor(adapter) {

package/lib/es/resizable/types.d.ts

@@ -0,0 +1,41 @@
+export declare const directions: readonly ["top", "right", "bottom", "left", "topRight", "bottomRight", "bottomLeft", "topLeft"];
+export type Direction = 'top' | 'right' | 'bottom' | 'left' | 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLeft';
+export interface HandleClassName {
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+    topRight?: string;
+    bottomRight?: string;
+    bottomLeft?: string;
+    topLeft?: string;
+}
+export type HandlerCallback = (e: MouseEvent, direction: Direction) => void;
+export interface Enable {
+    top?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+    left?: boolean;
+    topRight?: boolean;
+    bottomRight?: boolean;
+    bottomLeft?: boolean;
+    topLeft?: boolean;
+}
+export interface Size {
+    width?: string | number;
+    height?: string | number;
+}
+export interface NumberSize {
+    width: number;
+    height: number;
+}
+export interface NewSize {
+    newHeight: number | string;
+    newWidth: number | string;
+}
+export declare const DEFAULT_SIZE: {
+    width: string;
+    height: string;
+};
+export type ResizeCallback = (size: Size, event: MouseEvent, direction: Direction) => void;
+export type ResizeStartCallback = (e: MouseEvent, dir: Direction) => void | boolean;

package/lib/es/resizable/types.js

@@ -0,0 +1,6 @@
+// single
+export const directions = ['top', 'right', 'bottom', 'left', 'topRight', 'bottomRight', 'bottomLeft', 'topLeft'];
+export const DEFAULT_SIZE = {
+  width: 'auto',
+  height: 'auto'
+};

package/lib/es/resizable/utils.js

@@ -86,10 +86,10 @@ export const judgeConstraint = function (newSize, min, max, parentSize) {
   max = max !== null && max !== void 0 ? max : "100%";
   const minSize = getPixelSize(min, parentSize);
   const maxSize = getPixelSize(max, parentSize);
-  if (newSize <= minSize + offset) {
+  if (newSize < minSize + offset) {
     return true;
   }
-  if (newSize >= maxSize - offset) {
+  if (newSize > maxSize) {
     return true;
   }
   return false;
@@ -99,11 +99,11 @@ export const adjustNewSize = (newSize, min, max, parentSize, offset) => {
   max = max !== null && max !== void 0 ? max : "100%";
   const minSize = getPixelSize(min, parentSize);
   const maxSize = getPixelSize(max, parentSize);
-  if (newSize <= minSize + offset) {
+  if (newSize < minSize + offset) {
     return minSize + offset;
   }
-  if (newSize >= maxSize - offset) {
-    return maxSize - offset;
+  if (newSize > maxSize) {
+    return maxSize;
   }
   return newSize;
 };

package/lib/es/resizable/variables.scss

@@ -1 +1,9 @@
 $z-resizable_handler: 2000 !default; // 伸缩框组件中handler的z-index
+$z-resizable_background: 2010; // 伸缩框组件中背景的z-index
+
+$height-row-handler: 10px; // 单个伸缩框中上下handler的高度
+$width-col-handler: 10px;  // 单个伸缩框中左右handler的宽度
+$width-edge-handler: 20px; // 单个伸缩框中边角handler的宽度
+$height-edge-handler: 20px; // 单个伸缩框中边角handler的高度
+$width-horizontal-handler: 10px; // 组合伸缩框中水平方向handler的宽度
+$height-vertical-handler: 10px;  // 组合伸缩框中垂直方向handler的高度

package/lib/es/table/table.css

@@ -140,7 +140,8 @@
   cursor: pointer;
 }
 .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-row-head-clickSort:hover {
-  background: var(--semi-color-fill-0);
+  background-image: linear-gradient(0deg, var(--semi-color-fill-0), var(--semi-color-fill-0));
+  background-color: var(--semi-color-bg-0);
 }
 .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-row-head-clickSort:hover.semi-table-cell-fixed-left::before, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-row-head-clickSort:hover.semi-table-cell-fixed-right::before {
   background-color: transparent;

package/lib/es/table/table.scss

@@ -145,7 +145,8 @@ $module: #{$prefix}-table;
                 &.#{$module}-row-head-clickSort {
                     cursor: pointer;
                     &:hover {
-                        background: $color-table_th-clickSort-bg-hover;
+                        background-image: linear-gradient(0deg, $color-table_th-clickSort-bg-hover, $color-table_th-clickSort-bg-hover);
+                        background-color: $color-table_cell-bg-hover;
                         
                         &.#{$module}-cell-fixed {
                             &-left,

package/lib/es/transfer/transfer.css

@@ -44,6 +44,7 @@
   margin-bottom: 8px;
   margin-left: 12px;
   color: var(--semi-color-text-2);
+  flex-shrink: 0;
 }
 .semi-transfer-header-all {
   font-weight: 600;

package/lib/es/transfer/transfer.scss

@@ -53,6 +53,7 @@ $module: #{$prefix}-transfer;
         margin-bottom: $spacing-transfer_header-marginBottom;
         margin-left: $spacing-transfer_header-marginLeft;
         color: $color-transfer_header-text;
+        flex-shrink: 0;
 
         &-all {
             font-weight: $font-transfer_header_all-fontWeight;

package/lib/es/tree/treeUtil.d.ts

@@ -83,6 +83,6 @@ export declare function getValueOrKey(data: any, keyMaps?: KeyMapProps): any;
 export declare function normalizeValue(value: any, withObject: boolean, keyMaps?: KeyMapProps): any;
 export declare function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities): string[];
 export declare function calcDisabledKeys(keyEntities: KeyEntities, keyMaps?: KeyMapProps): Set<string>;
-export declare function calcDropRelativePosition(event: any, treeNode: any): 0 | 1 | -1;
+export declare function calcDropRelativePosition(event: any, treeNode: any): 1 | -1 | 0;
 export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
 export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;

package/lib/es/treeSelect/treeSelect.css

@@ -136,12 +136,14 @@
 }
 .semi-tree-select-selection-TriggerSearchItem-placeholder {
   opacity: 0.6;
-  z-index: -1;
 }
 .semi-tree-select-selection-TriggerSearchItem-disabled {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
 }
+.semi-tree-select-selection .semi-tree-select-triggerSingleSearch-upper {
+  z-index: 1;
+}
 .semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper {
   width: 100%;
 }

package/lib/es/treeSelect/treeSelect.scss

@@ -165,7 +165,6 @@ $module: #{$prefix}-tree-select;
             
             &-placeholder {
                 opacity: .6;
-                z-index: -1;
             }
 
             &-disabled {
@@ -174,6 +173,10 @@ $module: #{$prefix}-tree-select;
             }
         }
 
+        .#{$module}-triggerSingleSearch-upper {
+            z-index: 1;
+        }
+
         .#{$module}-triggerSingleSearch-wrapper{
             width: 100%;
 

package/markdownRender/foundation.ts

@@ -16,7 +16,8 @@ export interface MarkdownRenderBaseProps{
     components: MDXProps['components'];
     format: "md"|"mdx";
     remarkPlugins?: PluggableList;
-    rehypePlugins?: PluggableList
+    rehypePlugins?: PluggableList;
+    remarkGfm?: boolean
 }
 
 
@@ -26,16 +27,21 @@ export interface MarkdownRenderBaseState{
 
 class MarkdownRenderFoundation extends BaseFoundation<MarkdownRenderAdapter> {
 
-    private getOptions = ()=>{
+    private getOptions = () => {
+        const enableRemarkGfm = this._adapter.getProp("remarkGfm");
+        const remarkPlugins = [...(this.getProp("remarkPlugins") ?? [])];
+        if (enableRemarkGfm) {
+            remarkPlugins.unshift(remarkGfm);
+        }
         return {
             evaluateOptions: {
-                remarkPlugins: [remarkGfm, ...(this.getProp("remarkPlugins") ?? [])],
+                remarkPlugins: remarkPlugins,
                 rehypePlugins: this.getProp("rehypePlugins") ?? [],
                 format: this.getProp("format")
             },
             compileOptions: {
                 format: this.getProp("format"),
-                remarkPlugins: [remarkGfm, ...(this.getProp("remarkPlugins") ?? [])],
+                remarkPlugins: remarkPlugins,
                 rehypePlugins: this.getProp("rehypePlugins") ?? [],
             },
             runOptions: {
@@ -47,11 +53,11 @@ class MarkdownRenderFoundation extends BaseFoundation<MarkdownRenderAdapter> {
         };
     }
 
-    compile = async (mdxRaw: string)=>{
+    compile = async (mdxRaw: string) => {
         return await compile(mdxRaw, this.getOptions().compileOptions);
     }
 
-    evaluate = async (mdxRaw: string)=>{
+    evaluate = async (mdxRaw: string) => {
         return (await evaluate(mdxRaw, {
             ...this.getOptions().runOptions,
             ...this.getOptions().evaluateOptions,
@@ -59,7 +65,7 @@ class MarkdownRenderFoundation extends BaseFoundation<MarkdownRenderAdapter> {
         })).default;
     }
 
-    evaluateSync = (mdxRaw: string)=>{
+    evaluateSync = (mdxRaw: string) => {
         return ( evaluateSync(mdxRaw, {
             ...this.getOptions().runOptions,
             ...this.getOptions().evaluateOptions,