@douyinfe/semi-foundation 2.75.0-beta.1 → 2.75.0

package/cascader/cascader.scss

@@ -246,6 +246,9 @@ $module: #{$prefix}-cascader;
 
         &-text {
             margin: 0 $spacing-cascader_text-marginX;
+            font-weight: $font-weight-bold;
+            @include font-size-regular;
+            color: $color-cascader_prefix_suffix_text-default;
         }
 
         &-icon {

package/cascader/variables.scss

@@ -43,6 +43,8 @@ $color-cascader_danger-border-focus: var(--semi-color-danger); // 级联选择
 $color-cascader_danger-bg-active: var(--semi-color-danger-light-active); // 级联选择触发器危险背景颜色 - 按下
 $color-cascader_danger-border-active: var(--semi-color-danger-light-active); // 级联选择触发器危险描边颜色 - 按下
 
+$color-cascader_prefix_suffix_text-default: var(--semi-color-text-2); // 级联选择前后缀文字颜色
+
 $spacing-cascader_selection-paddingLeft: 12px; // 级联选择触发器左侧内边距
 $spacing-cascader_selection-paddingRight: 12px; // 级联选择触发器右侧内边距
 $spacing-cascader_selection_multiple-paddingLeft: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距

package/form/interface.ts

@@ -67,7 +67,7 @@ export type FieldPathValue<T, P extends FieldPath<T>> =
 export type ScrollToErrorOptions<K> = {
     field?: K;
     index?: number;
-    scrollConfig?: ScrollIntoViewOptions
+    scrollOpts?: ScrollIntoViewOptions
 }
 
 // use object replace Record<string, any>, fix issue 933

package/lib/cjs/cascader/cascader.css

@@ -199,6 +199,11 @@
 }
 .semi-cascader-prefix-text, .semi-cascader-suffix-text {
   margin: 0 12px;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: var(--semi-color-text-2);
 }
 .semi-cascader-prefix-icon, .semi-cascader-suffix-icon {
   color: var(--semi-color-text-2);

package/lib/cjs/cascader/cascader.scss

@@ -246,6 +246,9 @@ $module: #{$prefix}-cascader;
 
         &-text {
             margin: 0 $spacing-cascader_text-marginX;
+            font-weight: $font-weight-bold;
+            @include font-size-regular;
+            color: $color-cascader_prefix_suffix_text-default;
         }
 
         &-icon {

package/lib/cjs/cascader/variables.scss

@@ -43,6 +43,8 @@ $color-cascader_danger-border-focus: var(--semi-color-danger); // 级联选择
 $color-cascader_danger-bg-active: var(--semi-color-danger-light-active); // 级联选择触发器危险背景颜色 - 按下
 $color-cascader_danger-border-active: var(--semi-color-danger-light-active); // 级联选择触发器危险描边颜色 - 按下
 
+$color-cascader_prefix_suffix_text-default: var(--semi-color-text-2); // 级联选择前后缀文字颜色
+
 $spacing-cascader_selection-paddingLeft: 12px; // 级联选择触发器左侧内边距
 $spacing-cascader_selection-paddingRight: 12px; // 级联选择触发器右侧内边距
 $spacing-cascader_selection_multiple-paddingLeft: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距

package/lib/cjs/form/interface.d.ts

@@ -40,7 +40,7 @@ export type FieldPathValue<T, P extends FieldPath<T>> = P extends `${infer K}.${
 export type ScrollToErrorOptions<K> = {
     field?: K;
     index?: number;
-    scrollConfig?: ScrollIntoViewOptions;
+    scrollOpts?: ScrollIntoViewOptions;
 };
 export interface BaseFormApi<T extends object = any> {
     /** get value of field */

package/lib/cjs/resizable/group/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from '../../base/foundation';
-import { ResizeStartCallback, ResizeCallback } from "../types";
+import { ResizeStartCallback, ResizeCallback, ResizeEventType } from "../types";
 export interface ResizeHandlerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     registerEvents: () => void;
     unregisterEvents: () => void;
@@ -29,8 +29,8 @@ export interface ResizeGroupAdapter<P = Record<string, any>, S = Record<string,
     getItemChange: (index: number) => ResizeCallback;
     getItemEnd: (index: number) => ResizeCallback;
     getItemDefaultSize: (index: number) => string | number;
-    registerEvents: () => void;
-    unregisterEvents: () => void;
+    registerEvents: (type: ResizeEventType) => void;
+    unregisterEvents: (type: ResizeEventType) => void;
 }
 export declare class ResizeGroupFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ResizeGroupAdapter<P, S>, P, S> {
     constructor(adapter: ResizeGroupAdapter<P, S>);
@@ -40,13 +40,16 @@ export declare class ResizeGroupFoundation<P = Record<string, any>, S = Record<s
     itemMinusMap: Map<number, number>;
     totalMinus: number;
     itemPercentMap: Map<number, number>;
+    type?: ResizeEventType;
     init(): void;
     get window(): Window | null;
     registerEvents: () => void;
     unregisterEvents: () => void;
-    onResizeStart: (handlerIndex: number, e: MouseEvent) => void;
-    onResizing: (e: MouseEvent) => void;
-    onResizeEnd: (e: MouseEvent) => void;
+    onResizeStart: (handlerIndex: number, e: MouseEvent | Touch, type: ResizeEventType) => void;
+    onMouseMove: (e: MouseEvent) => void;
+    onTouchMove: (e: TouchEvent) => void;
+    onResizing: (e: MouseEvent | TouchEvent) => void;
+    onResizeEnd: (e: MouseEvent | TouchEvent) => void;
     initSpace: () => void;
     ensureConstraint: import("lodash").DebouncedFunc<() => void>;
     destroy(): void;

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

@@ -32,12 +32,13 @@ class ResizeGroupFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
     this.registerEvents = () => {
-      this._adapter.registerEvents();
+      this._adapter.registerEvents(this.type);
     };
     this.unregisterEvents = () => {
-      this._adapter.unregisterEvents();
+      this._adapter.unregisterEvents(this.type);
     };
-    this.onResizeStart = (handlerIndex, e) => {
+    this.onResizeStart = (handlerIndex, e, type) => {
+      this.type = type;
       let {
         clientX,
         clientY
@@ -79,6 +80,14 @@ class ResizeGroupFoundation extends _foundation.default {
         nextStart(e, nextDir);
       }
     };
+    this.onMouseMove = e => {
+      this.onResizing(e);
+    };
+    this.onTouchMove = e => {
+      // prevent page move in mobile
+      e.preventDefault();
+      this.onResizing(e);
+    };
     this.onResizing = e => {
       const state = this.getStates();
       if (!state.isResizing) {
@@ -99,7 +108,7 @@ class ResizeGroupFoundation extends _foundation.default {
       let {
         clientX,
         clientY
-      } = e;
+      } = this.type === 'mouse' ? e : e.targetTouches[0];
       const props = this.getProps();
       const {
         direction

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

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../../base/foundation';
-import { Size, NumberSize, Direction } from "../types";
+import { Size, NumberSize, Direction, ResizeEventType } from "../types";
 export interface ResizableHandlerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     registerEvent: () => void;
     unregisterEvent: () => void;
@@ -8,17 +8,19 @@ export declare class ResizableHandlerFoundation<P = Record<string, any>, S = Rec
     constructor(adapter: ResizableHandlerAdapter<P, S>);
     init(): void;
     onMouseDown: (e: MouseEvent) => void;
+    onTouchStart: (e: TouchEvent) => void;
     destroy(): void;
 }
 export interface ResizableAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getResizable: () => HTMLDivElement | null;
-    registerEvent: () => void;
-    unregisterEvent: () => void;
+    registerEvent: (type: ResizeEventType) => void;
+    unregisterEvent: (type: ResizeEventType) => void;
 }
 export declare class ResizableFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ResizableAdapter<P, S>, P, S> {
     constructor(adapter: ResizableAdapter<P, S>);
     init(): void;
     flexDirection?: 'row' | 'column';
+    type?: ResizeEventType;
     lockAspectRatio: number;
     resizable: HTMLElement | null;
     parentLeft: number;
@@ -63,8 +65,10 @@ export declare class ResizableFoundation<P = Record<string, any>, S = Record<str
         newHeight: number;
     };
     setBoundary(): void;
-    onResizeStart: (e: MouseEvent, direction: Direction) => void;
+    onResizeStart: (e: MouseEvent, direction: Direction, type: ResizeEventType) => void;
     onMouseMove: (event: MouseEvent) => void;
-    onMouseUp: (event: MouseEvent) => void;
+    onTouchMove: (event: TouchEvent) => void;
+    changePosition: (event: Touch | MouseEvent) => void;
+    onMouseUp: (event: MouseEvent | TouchEvent) => void;
     destroy(): void;
 }

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

@@ -12,7 +12,11 @@ class ResizableHandlerFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
     this.onMouseDown = e => {
-      this.getProp('onResizeStart')(e, this.getProp('direction'));
+      this.getProp('onResizeStart')(e, this.getProp('direction'), 'mouse');
+    };
+    this.onTouchStart = e => {
+      const touch = e.targetTouches[0];
+      this.getProp('onResizeStart')(touch, this.getProp('direction'), 'touch');
     };
   }
   init() {
@@ -36,7 +40,8 @@ class ResizableFoundation extends _foundation.default {
     this.boundaryBottom = 0;
     this.targetLeft = 0;
     this.targetTop = 0;
-    this.onResizeStart = (e, direction) => {
+    this.onResizeStart = (e, direction, type) => {
+      this.type = type;
       this.resizable = this._adapter.getResizable();
       if (!this.resizable || !this.window) {
         return;
@@ -112,6 +117,14 @@ class ResizableFoundation extends _foundation.default {
       this.setState(state);
     };
     this.onMouseMove = event => {
+      this.changePosition(event);
+    };
+    this.onTouchMove = event => {
+      event.preventDefault();
+      const touch = event.targetTouches[0];
+      this.changePosition(touch);
+    };
+    this.changePosition = event => {
       var _a, _b;
       const states = this.getStates();
       const props = this.getProps();
@@ -410,10 +423,10 @@ class ResizableFoundation extends _foundation.default {
     return size;
   }
   registerEvents() {
-    this._adapter.registerEvent();
+    this._adapter.registerEvent(this.type);
   }
   unregisterEvents() {
-    this._adapter.unregisterEvent();
+    this._adapter.unregisterEvent(this.type);
   }
   getCssPropertySize(newSize, property) {
     var _a;

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

@@ -10,7 +10,8 @@ export interface HandleClassName {
     bottomLeft?: string;
     topLeft?: string;
 }
-export type HandlerCallback = (e: MouseEvent, direction: Direction) => void;
+export type ResizeEventType = 'mouse' | 'touch';
+export type HandlerCallback = (e: MouseEvent, direction: Direction, type?: ResizeEventType) => void;
 export interface Enable {
     top?: boolean;
     right?: boolean;
@@ -37,5 +38,5 @@ 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;
+export type ResizeCallback = (size: Size, event: MouseEvent | TouchEvent, direction: Direction) => void;
+export type ResizeStartCallback = (e: MouseEvent | Touch, dir: Direction) => void | boolean;

package/lib/cjs/select/select.css

@@ -306,6 +306,11 @@
 }
 .semi-select-prefix-text, .semi-select-suffix-text {
   margin: 0px 12px;
+  color: var(--semi-color-text-2);
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 600;
 }
 .semi-select-prefix-icon, .semi-select-suffix-icon {
   color: var(--semi-color-text-2);

package/lib/cjs/select/select.scss

@@ -309,6 +309,9 @@ $overflowList: #{$prefix}-overflow-list;
 
         &-text {
             margin: $spacing-select_prefix_suffix_text-marginY $spacing-select_prefix_suffix_text-marginX;
+            color: $color-select_prefix_suffix_text-default;
+            @include font-size-regular;
+            font-weight: $font-weight-bold;
         }
 
         &-icon {

package/lib/cjs/select/variables.scss

@@ -59,6 +59,8 @@ $color-select_inset_label-text: var(--semi-color-text-2); // 分组选择器菜
 $color-select_create_tips-text: var(--semi-color-text-2); // 分组选择器菜单项提示文本颜色
 $color-select_group-text: var(--semi-color-text-2); // 分组选择器菜单项分组标题文本颜色
 
+$color-select_prefix_suffix_text-default: var(--semi-color-text-2); // 选择器输入框前后缀文本颜色
+
 // Width/Height
 $width-select_icon_right: ($width-icon-medium + $spacing-tight * 2); // 选择器右侧图标大小
 $height-select_large: $height-control-large; // 选择器输入框高度 - 大尺寸

package/lib/cjs/treeSelect/treeSelect.css

@@ -264,6 +264,11 @@
   align-items: center;
 }
 .semi-tree-select-prefix-text, .semi-tree-select-suffix-text {
+  color: var(--semi-color-text-2);
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   margin: 0px 12px;
 }
 .semi-tree-select-prefix-icon, .semi-tree-select-suffix-icon {

package/lib/cjs/treeSelect/treeSelect.scss

@@ -337,6 +337,9 @@ $module: #{$prefix}-tree-select;
         @include all-center;
 
         &-text {
+            color: $color-treeSelect_prefix_suffix_text-default;
+            font-weight: $font-weight-bold;
+            @include font-size-regular;
             margin: $spacing-treeSelect_prefix_text-marginY $spacing-treeSelect_prefix_text-marginX;
         }
 

package/lib/cjs/treeSelect/variables.scss

@@ -85,6 +85,7 @@ $color-treeSelect_inputTrigger-border-default: none; // 带搜索的树选择器
 $color-treeSelect_inputTrigger-bg-default: transparent; // 带搜索的树选择器触发器背景颜色
 $color-treeSelect_insertLabel-text-default: var(--semi-color-text-2); // 带搜索的树前缀标签文本颜色
 $font-treeSelect_insertLabel-fontWeight: 600; // 带搜索的树前缀标签文本字重
+$color-treeSelect_prefix_suffix_text-default: var(--semi-color-text-2); // 带搜索的树选择器前后缀文本颜色
 
 $width-treeSelect_arrow: 32px; // 树选择器展开箭头宽度
 $width-treeSelect_option:  230px; // 树选择器菜单项宽度

package/lib/es/cascader/cascader.css

@@ -199,6 +199,11 @@
 }
 .semi-cascader-prefix-text, .semi-cascader-suffix-text {
   margin: 0 12px;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: var(--semi-color-text-2);
 }
 .semi-cascader-prefix-icon, .semi-cascader-suffix-icon {
   color: var(--semi-color-text-2);

package/lib/es/cascader/cascader.scss

@@ -246,6 +246,9 @@ $module: #{$prefix}-cascader;
 
         &-text {
             margin: 0 $spacing-cascader_text-marginX;
+            font-weight: $font-weight-bold;
+            @include font-size-regular;
+            color: $color-cascader_prefix_suffix_text-default;
         }
 
         &-icon {

package/lib/es/cascader/variables.scss

@@ -43,6 +43,8 @@ $color-cascader_danger-border-focus: var(--semi-color-danger); // 级联选择
 $color-cascader_danger-bg-active: var(--semi-color-danger-light-active); // 级联选择触发器危险背景颜色 - 按下
 $color-cascader_danger-border-active: var(--semi-color-danger-light-active); // 级联选择触发器危险描边颜色 - 按下
 
+$color-cascader_prefix_suffix_text-default: var(--semi-color-text-2); // 级联选择前后缀文字颜色
+
 $spacing-cascader_selection-paddingLeft: 12px; // 级联选择触发器左侧内边距
 $spacing-cascader_selection-paddingRight: 12px; // 级联选择触发器右侧内边距
 $spacing-cascader_selection_multiple-paddingLeft: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距

package/lib/es/form/interface.d.ts

@@ -40,7 +40,7 @@ export type FieldPathValue<T, P extends FieldPath<T>> = P extends `${infer K}.${
 export type ScrollToErrorOptions<K> = {
     field?: K;
     index?: number;
-    scrollConfig?: ScrollIntoViewOptions;
+    scrollOpts?: ScrollIntoViewOptions;
 };
 export interface BaseFormApi<T extends object = any> {
     /** get value of field */

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

@@ -1,6 +1,6 @@
 /// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from '../../base/foundation';
-import { ResizeStartCallback, ResizeCallback } from "../types";
+import { ResizeStartCallback, ResizeCallback, ResizeEventType } from "../types";
 export interface ResizeHandlerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     registerEvents: () => void;
     unregisterEvents: () => void;
@@ -29,8 +29,8 @@ export interface ResizeGroupAdapter<P = Record<string, any>, S = Record<string,
     getItemChange: (index: number) => ResizeCallback;
     getItemEnd: (index: number) => ResizeCallback;
     getItemDefaultSize: (index: number) => string | number;
-    registerEvents: () => void;
-    unregisterEvents: () => void;
+    registerEvents: (type: ResizeEventType) => void;
+    unregisterEvents: (type: ResizeEventType) => void;
 }
 export declare class ResizeGroupFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ResizeGroupAdapter<P, S>, P, S> {
     constructor(adapter: ResizeGroupAdapter<P, S>);
@@ -40,13 +40,16 @@ export declare class ResizeGroupFoundation<P = Record<string, any>, S = Record<s
     itemMinusMap: Map<number, number>;
     totalMinus: number;
     itemPercentMap: Map<number, number>;
+    type?: ResizeEventType;
     init(): void;
     get window(): Window | null;
     registerEvents: () => void;
     unregisterEvents: () => void;
-    onResizeStart: (handlerIndex: number, e: MouseEvent) => void;
-    onResizing: (e: MouseEvent) => void;
-    onResizeEnd: (e: MouseEvent) => void;
+    onResizeStart: (handlerIndex: number, e: MouseEvent | Touch, type: ResizeEventType) => void;
+    onMouseMove: (e: MouseEvent) => void;
+    onTouchMove: (e: TouchEvent) => void;
+    onResizing: (e: MouseEvent | TouchEvent) => void;
+    onResizeEnd: (e: MouseEvent | TouchEvent) => void;
     initSpace: () => void;
     ensureConstraint: import("lodash").DebouncedFunc<() => void>;
     destroy(): void;

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

@@ -24,12 +24,13 @@ export class ResizeGroupFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
     this.registerEvents = () => {
-      this._adapter.registerEvents();
+      this._adapter.registerEvents(this.type);
     };
     this.unregisterEvents = () => {
-      this._adapter.unregisterEvents();
+      this._adapter.unregisterEvents(this.type);
     };
-    this.onResizeStart = (handlerIndex, e) => {
+    this.onResizeStart = (handlerIndex, e, type) => {
+      this.type = type;
       let {
         clientX,
         clientY
@@ -71,6 +72,14 @@ export class ResizeGroupFoundation extends BaseFoundation {
         nextStart(e, nextDir);
       }
     };
+    this.onMouseMove = e => {
+      this.onResizing(e);
+    };
+    this.onTouchMove = e => {
+      // prevent page move in mobile
+      e.preventDefault();
+      this.onResizing(e);
+    };
     this.onResizing = e => {
       const state = this.getStates();
       if (!state.isResizing) {
@@ -91,7 +100,7 @@ export class ResizeGroupFoundation extends BaseFoundation {
       let {
         clientX,
         clientY
-      } = e;
+      } = this.type === 'mouse' ? e : e.targetTouches[0];
       const props = this.getProps();
       const {
         direction

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

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../../base/foundation';
-import { Size, NumberSize, Direction } from "../types";
+import { Size, NumberSize, Direction, ResizeEventType } from "../types";
 export interface ResizableHandlerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     registerEvent: () => void;
     unregisterEvent: () => void;
@@ -8,17 +8,19 @@ export declare class ResizableHandlerFoundation<P = Record<string, any>, S = Rec
     constructor(adapter: ResizableHandlerAdapter<P, S>);
     init(): void;
     onMouseDown: (e: MouseEvent) => void;
+    onTouchStart: (e: TouchEvent) => void;
     destroy(): void;
 }
 export interface ResizableAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getResizable: () => HTMLDivElement | null;
-    registerEvent: () => void;
-    unregisterEvent: () => void;
+    registerEvent: (type: ResizeEventType) => void;
+    unregisterEvent: (type: ResizeEventType) => void;
 }
 export declare class ResizableFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ResizableAdapter<P, S>, P, S> {
     constructor(adapter: ResizableAdapter<P, S>);
     init(): void;
     flexDirection?: 'row' | 'column';
+    type?: ResizeEventType;
     lockAspectRatio: number;
     resizable: HTMLElement | null;
     parentLeft: number;
@@ -63,8 +65,10 @@ export declare class ResizableFoundation<P = Record<string, any>, S = Record<str
         newHeight: number;
     };
     setBoundary(): void;
-    onResizeStart: (e: MouseEvent, direction: Direction) => void;
+    onResizeStart: (e: MouseEvent, direction: Direction, type: ResizeEventType) => void;
     onMouseMove: (event: MouseEvent) => void;
-    onMouseUp: (event: MouseEvent) => void;
+    onTouchMove: (event: TouchEvent) => void;
+    changePosition: (event: Touch | MouseEvent) => void;
+    onMouseUp: (event: MouseEvent | TouchEvent) => void;
     destroy(): void;
 }

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

@@ -5,7 +5,11 @@ export class ResizableHandlerFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
     this.onMouseDown = e => {
-      this.getProp('onResizeStart')(e, this.getProp('direction'));
+      this.getProp('onResizeStart')(e, this.getProp('direction'), 'mouse');
+    };
+    this.onTouchStart = e => {
+      const touch = e.targetTouches[0];
+      this.getProp('onResizeStart')(touch, this.getProp('direction'), 'touch');
     };
   }
   init() {
@@ -28,7 +32,8 @@ export class ResizableFoundation extends BaseFoundation {
     this.boundaryBottom = 0;
     this.targetLeft = 0;
     this.targetTop = 0;
-    this.onResizeStart = (e, direction) => {
+    this.onResizeStart = (e, direction, type) => {
+      this.type = type;
       this.resizable = this._adapter.getResizable();
       if (!this.resizable || !this.window) {
         return;
@@ -104,6 +109,14 @@ export class ResizableFoundation extends BaseFoundation {
       this.setState(state);
     };
     this.onMouseMove = event => {
+      this.changePosition(event);
+    };
+    this.onTouchMove = event => {
+      event.preventDefault();
+      const touch = event.targetTouches[0];
+      this.changePosition(touch);
+    };
+    this.changePosition = event => {
       var _a, _b;
       const states = this.getStates();
       const props = this.getProps();
@@ -402,10 +415,10 @@ export class ResizableFoundation extends BaseFoundation {
     return size;
   }
   registerEvents() {
-    this._adapter.registerEvent();
+    this._adapter.registerEvent(this.type);
   }
   unregisterEvents() {
-    this._adapter.unregisterEvent();
+    this._adapter.unregisterEvent(this.type);
   }
   getCssPropertySize(newSize, property) {
     var _a;

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

@@ -10,7 +10,8 @@ export interface HandleClassName {
     bottomLeft?: string;
     topLeft?: string;
 }
-export type HandlerCallback = (e: MouseEvent, direction: Direction) => void;
+export type ResizeEventType = 'mouse' | 'touch';
+export type HandlerCallback = (e: MouseEvent, direction: Direction, type?: ResizeEventType) => void;
 export interface Enable {
     top?: boolean;
     right?: boolean;
@@ -37,5 +38,5 @@ 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;
+export type ResizeCallback = (size: Size, event: MouseEvent | TouchEvent, direction: Direction) => void;
+export type ResizeStartCallback = (e: MouseEvent | Touch, dir: Direction) => void | boolean;

package/lib/es/select/select.css

@@ -306,6 +306,11 @@
 }
 .semi-select-prefix-text, .semi-select-suffix-text {
   margin: 0px 12px;
+  color: var(--semi-color-text-2);
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 600;
 }
 .semi-select-prefix-icon, .semi-select-suffix-icon {
   color: var(--semi-color-text-2);

package/lib/es/select/select.scss

@@ -309,6 +309,9 @@ $overflowList: #{$prefix}-overflow-list;
 
         &-text {
             margin: $spacing-select_prefix_suffix_text-marginY $spacing-select_prefix_suffix_text-marginX;
+            color: $color-select_prefix_suffix_text-default;
+            @include font-size-regular;
+            font-weight: $font-weight-bold;
         }
 
         &-icon {

package/lib/es/select/variables.scss

@@ -59,6 +59,8 @@ $color-select_inset_label-text: var(--semi-color-text-2); // 分组选择器菜
 $color-select_create_tips-text: var(--semi-color-text-2); // 分组选择器菜单项提示文本颜色
 $color-select_group-text: var(--semi-color-text-2); // 分组选择器菜单项分组标题文本颜色
 
+$color-select_prefix_suffix_text-default: var(--semi-color-text-2); // 选择器输入框前后缀文本颜色
+
 // Width/Height
 $width-select_icon_right: ($width-icon-medium + $spacing-tight * 2); // 选择器右侧图标大小
 $height-select_large: $height-control-large; // 选择器输入框高度 - 大尺寸

package/lib/es/treeSelect/treeSelect.css

@@ -264,6 +264,11 @@
   align-items: center;
 }
 .semi-tree-select-prefix-text, .semi-tree-select-suffix-text {
+  color: var(--semi-color-text-2);
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   margin: 0px 12px;
 }
 .semi-tree-select-prefix-icon, .semi-tree-select-suffix-icon {

package/lib/es/treeSelect/treeSelect.scss

@@ -337,6 +337,9 @@ $module: #{$prefix}-tree-select;
         @include all-center;
 
         &-text {
+            color: $color-treeSelect_prefix_suffix_text-default;
+            font-weight: $font-weight-bold;
+            @include font-size-regular;
             margin: $spacing-treeSelect_prefix_text-marginY $spacing-treeSelect_prefix_text-marginX;
         }
 

package/lib/es/treeSelect/variables.scss

@@ -85,6 +85,7 @@ $color-treeSelect_inputTrigger-border-default: none; // 带搜索的树选择器
 $color-treeSelect_inputTrigger-bg-default: transparent; // 带搜索的树选择器触发器背景颜色
 $color-treeSelect_insertLabel-text-default: var(--semi-color-text-2); // 带搜索的树前缀标签文本颜色
 $font-treeSelect_insertLabel-fontWeight: 600; // 带搜索的树前缀标签文本字重
+$color-treeSelect_prefix_suffix_text-default: var(--semi-color-text-2); // 带搜索的树选择器前后缀文本颜色
 
 $width-treeSelect_arrow: 32px; // 树选择器展开箭头宽度
 $width-treeSelect_option:  230px; // 树选择器菜单项宽度

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.75.0-beta.1",
+    "version": "2.75.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.75.0-beta.1",
-        "@douyinfe/semi-json-viewer-core": "2.75.0-beta.1",
+        "@douyinfe/semi-animation": "2.75.0",
+        "@douyinfe/semi-json-viewer-core": "2.75.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -29,7 +29,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "d5e8cf26d373a91282b2a492f1ff41eaddc5cae0",
+    "gitHead": "cd269c0f1d3a0af5a564109f22e3dc51dfd7691a",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/resizable/group/index.ts

@@ -1,6 +1,6 @@
 import { getItemDirection, getPixelSize } from "../utils";
 import BaseFoundation, { DefaultAdapter } from '../../base/foundation';
-import { ResizeStartCallback, ResizeCallback } from "../types";
+import { ResizeStartCallback, ResizeCallback, ResizeEventType } from "../types";
 import { adjustNewSize, judgeConstraint, getOffset } from "../utils";
 import { debounce } from "lodash";
 export interface ResizeHandlerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
@@ -49,8 +49,8 @@ export interface ResizeGroupAdapter<P = Record<string, any>, S = Record<string,
     getItemChange: (index: number) => ResizeCallback;
     getItemEnd: (index: number) => ResizeCallback;
     getItemDefaultSize: (index: number) => string | number;
-    registerEvents: () => void;
-    unregisterEvents: () => void
+    registerEvents: (type: ResizeEventType) => void;
+    unregisterEvents: (type: ResizeEventType) => void
 }
 
 export class ResizeGroupFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ResizeGroupAdapter<P, S>, P, S> {
@@ -72,6 +72,7 @@ export class ResizeGroupFoundation<P = Record<string, any>, S = Record<string, a
     itemMinusMap: Map<number, number>; // 这个是为了给handler留出空间，方便维护每一个item的size为cal(percent% - minus)
     totalMinus: number;
     itemPercentMap: Map<number, number>; // 内部维护一个百分比数组，消除浮点计算误差
+    type?: ResizeEventType;
 
 
     init(): void {
@@ -86,14 +87,15 @@ export class ResizeGroupFoundation<P = Record<string, any>, S = Record<string, a
 
     
     registerEvents = () => {
-        this._adapter.registerEvents();
+        this._adapter.registerEvents(this.type);
     }
 
     unregisterEvents = () => {
-        this._adapter.unregisterEvents();
+        this._adapter.unregisterEvents(this.type);
     }
 
-    onResizeStart = (handlerIndex: number, e: MouseEvent) => { // handler ref
+    onResizeStart = (handlerIndex: number, e: MouseEvent | Touch, type: ResizeEventType) => { // handler ref
+        this.type = type;
         let { clientX, clientY } = e;
         let lastItem = this._adapter.getItem(handlerIndex), nextItem = this._adapter.getItem(handlerIndex + 1);
         let lastOffset: number, nextOffset: number;
@@ -135,15 +137,25 @@ export class ResizeGroupFoundation<P = Record<string, any>, S = Record<string, a
         }
     }
 
+    onMouseMove = (e: MouseEvent) => {
+        this.onResizing(e);
+    }
 
-    onResizing = (e: MouseEvent) => {
+    onTouchMove = (e: TouchEvent) => {
+        // prevent page move in mobile
+        e.preventDefault();
+        this.onResizing(e);
+    }
+
+
+    onResizing = (e: MouseEvent | TouchEvent) => {
         const state = this.getStates();
         if (!state.isResizing) {
             return;
         }
         const { curHandler, originalPosition } = state;
         let { x: initX, y: initY, lastItemSize, nextItemSize, lastOffset, nextOffset } = originalPosition;
-        let { clientX, clientY } = e;
+        let { clientX, clientY } = this.type === 'mouse' ? e : (e as any).targetTouches[0];
 
         const props = this.getProps();
         const { direction } = props;
@@ -193,7 +205,7 @@ export class ResizeGroupFoundation<P = Record<string, any>, S = Record<string, a
         }
     }
 
-    onResizeEnd = (e: MouseEvent) => {
+    onResizeEnd = (e: MouseEvent | TouchEvent) => {
         const { curHandler } = this.getStates();
         let lastItem = this._adapter.getItem(curHandler), nextItem = this._adapter.getItem(curHandler + 1);
         let lastFunc = this._adapter.getItemEnd(curHandler),

package/resizable/single/index.ts

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../../base/foundation';
-import { DEFAULT_SIZE, Size, NumberSize, Direction, NewSize } from "../types";
+import { DEFAULT_SIZE, Size, NumberSize, Direction, NewSize, ResizeEventType } from "../types";
 import { getStringSize, getNumberSize, has, calculateNewMax, findNextSnap, snap, clamp } from "../utils";
 export interface ResizableHandlerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     registerEvent: () => void;
@@ -16,9 +16,14 @@ export class ResizableHandlerFoundation<P = Record<string, any>, S = Record<stri
     }
 
     onMouseDown = (e: MouseEvent) => {
-        this.getProp('onResizeStart')(e, this.getProp('direction'));
+        this.getProp('onResizeStart')(e, this.getProp('direction'), 'mouse');
     };
 
+    onTouchStart = (e: TouchEvent) => {
+        const touch = e.targetTouches[0];
+        this.getProp('onResizeStart')(touch, this.getProp('direction'), 'touch');
+    }
+
     destroy(): void {
         this._adapter.unregisterEvent();
     }
@@ -26,8 +31,8 @@ export class ResizableHandlerFoundation<P = Record<string, any>, S = Record<stri
 
 export interface ResizableAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getResizable: () => HTMLDivElement | null;
-    registerEvent: () => void;
-    unregisterEvent: () => void
+    registerEvent: (type: ResizeEventType) => void;
+    unregisterEvent: (type: ResizeEventType) => void
 }
 
 export class ResizableFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ResizableAdapter<P, S>, P, S> {
@@ -53,6 +58,7 @@ export class ResizableFoundation<P = Record<string, any>, S = Record<string, any
     }
 
     flexDirection?: 'row' | 'column';
+    type?: ResizeEventType;
 
     lockAspectRatio = 1;
     resizable: HTMLElement | null = null;
@@ -202,11 +208,11 @@ export class ResizableFoundation<P = Record<string, any>, S = Record<string, any
     }
 
     registerEvents() {
-        this._adapter.registerEvent();
+        this._adapter.registerEvent(this.type);
     }
 
     unregisterEvents() {
-        this._adapter.unregisterEvent();
+        this._adapter.unregisterEvent(this.type);
     }
 
     getCssPropertySize(newSize: number | string, property: 'width' | 'height'): number | string {
@@ -380,7 +386,8 @@ export class ResizableFoundation<P = Record<string, any>, S = Record<string, any
     }
 
 
-    onResizeStart = (e: MouseEvent, direction: Direction) => {
+    onResizeStart = (e: MouseEvent, direction: Direction, type: ResizeEventType) => {
+        this.type = type;
         this.resizable = this._adapter.getResizable();
         if (!this.resizable || !this.window) {
             return;
@@ -456,6 +463,16 @@ export class ResizableFoundation<P = Record<string, any>, S = Record<string, any
 
 
     onMouseMove = (event: MouseEvent) => {
+        this.changePosition(event);
+    }
+
+    onTouchMove = (event: TouchEvent) => {
+        event.preventDefault();
+        const touch = event.targetTouches[0];
+        this.changePosition(touch);
+    }
+
+    changePosition = (event: Touch | MouseEvent) => {
         const states = this.getStates();
         const props = this.getProps();
 
@@ -583,7 +600,7 @@ export class ResizableFoundation<P = Record<string, any>, S = Record<string, any
     }
 
 
-    onMouseUp = (event: MouseEvent) => {
+    onMouseUp = (event: MouseEvent | TouchEvent) => {
         const { isResizing, direction, original } = this.getStates();
 
         if (!isResizing || !this.resizable) {

package/resizable/types.ts

@@ -14,9 +14,12 @@ export interface HandleClassName {
     topLeft?: string
 }
 
+export type ResizeEventType = 'mouse' | 'touch'; 
+
 export type HandlerCallback = (
     e: MouseEvent,
-    direction: Direction
+    direction: Direction,
+    type?: ResizeEventType,
 ) => void;
 
 export interface Enable {
@@ -51,12 +54,12 @@ export const DEFAULT_SIZE = {
 
 export type ResizeCallback = (
     size: Size,
-    event: MouseEvent,
+    event: MouseEvent | TouchEvent,
     direction: Direction,
 ) => void;
 
 export type ResizeStartCallback = (
-    e: MouseEvent,
+    e: MouseEvent | Touch,
     dir: Direction,
 ) => void | boolean;
 

package/select/select.scss

@@ -309,6 +309,9 @@ $overflowList: #{$prefix}-overflow-list;
 
         &-text {
             margin: $spacing-select_prefix_suffix_text-marginY $spacing-select_prefix_suffix_text-marginX;
+            color: $color-select_prefix_suffix_text-default;
+            @include font-size-regular;
+            font-weight: $font-weight-bold;
         }
 
         &-icon {

package/select/variables.scss

@@ -59,6 +59,8 @@ $color-select_inset_label-text: var(--semi-color-text-2); // 分组选择器菜
 $color-select_create_tips-text: var(--semi-color-text-2); // 分组选择器菜单项提示文本颜色
 $color-select_group-text: var(--semi-color-text-2); // 分组选择器菜单项分组标题文本颜色
 
+$color-select_prefix_suffix_text-default: var(--semi-color-text-2); // 选择器输入框前后缀文本颜色
+
 // Width/Height
 $width-select_icon_right: ($width-icon-medium + $spacing-tight * 2); // 选择器右侧图标大小
 $height-select_large: $height-control-large; // 选择器输入框高度 - 大尺寸

package/treeSelect/treeSelect.scss

@@ -337,6 +337,9 @@ $module: #{$prefix}-tree-select;
         @include all-center;
 
         &-text {
+            color: $color-treeSelect_prefix_suffix_text-default;
+            font-weight: $font-weight-bold;
+            @include font-size-regular;
             margin: $spacing-treeSelect_prefix_text-marginY $spacing-treeSelect_prefix_text-marginX;
         }
 

package/treeSelect/variables.scss

@@ -85,6 +85,7 @@ $color-treeSelect_inputTrigger-border-default: none; // 带搜索的树选择器
 $color-treeSelect_inputTrigger-bg-default: transparent; // 带搜索的树选择器触发器背景颜色
 $color-treeSelect_insertLabel-text-default: var(--semi-color-text-2); // 带搜索的树前缀标签文本颜色
 $font-treeSelect_insertLabel-fontWeight: 600; // 带搜索的树前缀标签文本字重
+$color-treeSelect_prefix_suffix_text-default: var(--semi-color-text-2); // 带搜索的树选择器前后缀文本颜色
 
 $width-treeSelect_arrow: 32px; // 树选择器展开箭头宽度
 $width-treeSelect_option:  230px; // 树选择器菜单项宽度