chore: fix merge conflict

.github/workflows/test.yml

@@ -14,10 +14,10 @@ jobs:
   jest:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: '16'
       - name: Run install
         run: npm i -g lerna && npm run bootstrap
       - name: Run Jest test
@@ -31,10 +31,10 @@ jobs:
   cypress:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: '16'
       - name: Run install
         run: |
           npm i -g lerna
@@ -57,10 +57,10 @@ jobs:
     runs-on: ubuntu-latest
     needs: [jest, cypress]
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: '16'
       - name: Download Jest coverage
         uses: actions/download-artifact@v3
         with:

content/basic/divider/index.md

@@ -1,7 +1,7 @@
 ---
 localeCode: zh-CN
 order: 11
-category: 基础类 
+category: 基础 
 title:  Divider 分割线 
 icon: doc-divider 
 brief: 分割线是一个呈线状的轻量化组件，用于有逻辑的组织元素内容和页面结构或区域。

packages/semi-foundation/autoComplete/foundation.ts

@@ -14,7 +14,7 @@ interface KeyboardAdapter<P = Record<string, any>, S = Record<string, any>> exte
 export interface DataItem {
     [x: string]: any;
     value?: string | number;
-    label?: any; // reactNode
+    label?: any // reactNode
 }
 
 export interface StateOptionItem extends DataItem {
@@ -38,7 +38,8 @@ export interface AutoCompleteAdapter<P = Record<string, any>, S = Record<string,
     notifyClear: () => void;
     notifyFocus: (event?: any) => void;
     notifyBlur: (event?: any) => void;
-    rePositionDropdown: () => void
+    rePositionDropdown: () => void;
+    persistEvent: (event: any) => void
 }
 
 class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AutoCompleteAdapter<P, S>, P, S> {
@@ -416,8 +417,9 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
     }
 
     handleBlur(e: any) {
+        // only need persist on react adapter
         // https://reactjs.org/docs/legacy-event-pooling.html
-        e.persist();
+        this._persistEvent(e);
         // In order to handle the problem of losing onClick binding when clicking on the padding area, the onBlur event is triggered first to cause the react view to be updated
         // internal-issues:1231
         setTimeout(() => {

packages/semi-foundation/base/foundation.ts

@@ -20,7 +20,8 @@ export interface DefaultAdapter<P = Record<string, any>, S = Record<string, any>
     getCache(c: string): any;
     getCaches(): any;
     setCache(key: any, value: any): void;
-    stopPropagation(e: any): void
+    stopPropagation(e: any): void;
+    persistEvent: (event: any) => void
 }
 
 class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record<string, any>, S = Record<string, any>> {
@@ -61,6 +62,7 @@ class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record<string,
             setCache: noop,
             getCaches: noop,
             stopPropagation: noop,
+            persistEvent: noop,
         };
     }
 
@@ -141,5 +143,10 @@ class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record<string,
     log(text: string, ...rest: any) {
         log(text, ...rest);
     }
+
+    _persistEvent(e: any) {
+        // only work for react adapter for now
+        this._adapter.persistEvent(e);
+    }
 }
 export default BaseFoundation;

packages/semi-foundation/checkbox/checkboxFoundation.ts

@@ -10,22 +10,24 @@ export interface BasicCheckboxEvent {
     target: BasicTargetObject;
     stopPropagation: () => void;
     preventDefault: () => void;
-    nativeEvent: {
-        stopImmediatePropagation: () => void
-    }
+    [x: string]: any
+    // nativeEvent: {
+    //     stopImmediatePropagation: () => void;
+    // }
 }
 export interface CheckboxAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getIsInGroup: () => boolean;
     getGroupValue: () => any[];
-    notifyGroupChange: (event: BasicCheckboxEvent) => void;
+    notifyGroupChange: (e: any) => void;
     getGroupDisabled: () => boolean;
     setNativeControlChecked: (checked: boolean) => void;
     getState: noopFunction;
-    notifyChange: (event: BasicCheckboxEvent) => void;
+    notifyChange: (e: any) => void;
     setAddonId: () => void;
     setExtraId: () => void;
     setFocusVisible: (focusVisible: boolean) => void;
-    focusCheckboxEntity: () => void
+    focusCheckboxEntity: () => void;
+    generateEvent: (checked: boolean, e: any) => any // 1.modify checked value 2.add nativeEvent on react adapter
 }
 
 class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CheckboxAdapter<P, S>, P, S> {
@@ -46,32 +48,8 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
         }
     }
 
-    getEvent(checked: boolean, e: any) {
-        const props = this.getProps();
-        const cbValue = {
-            target: {
-                ...props,
-                checked,
-            },
-            stopPropagation: () => {
-                e.stopPropagation();
-            },
-            preventDefault: () => {
-                e.preventDefault();
-            },
-            nativeEvent: {
-                stopImmediatePropagation: () => {
-                    if (e.nativeEvent && typeof e.nativeEvent.stopImmediatePropagation === 'function') {
-                        e.nativeEvent.stopImmediatePropagation();
-                    }
-                }
-            },
-        };
-        return cbValue;
-    }
-
     notifyChange(checked: boolean, e: any) {
-        const cbValue = this.getEvent(checked, e);
+        const cbValue = this._adapter.generateEvent(checked, e);
         this._adapter.notifyChange(cbValue);
     }
 
@@ -114,7 +92,7 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
         const groupValue = this._adapter.getGroupValue();
         const checked = groupValue.includes(value);
         const newChecked = !checked;
-        const event = this.getEvent(newChecked, e);
+        const event = this._adapter.generateEvent(newChecked, e);
         this._adapter.notifyChange(event);
         this._adapter.notifyGroupChange(event);
     }
@@ -160,7 +138,7 @@ export interface BaseCheckboxProps {
     defaultChecked?: boolean;
     disabled?: boolean;
     indeterminate?: boolean;
-    onChange?: (e: BasicCheckboxEvent) => any;
+    onChange?: (e: any) => any;
     value?: any;
     style?: Record<string, any>;
     className?: string;

packages/semi-foundation/form/utils.ts

@@ -47,6 +47,7 @@ export function isValid(errors: any): boolean {
         errors.$$typeof.toString() === 'Symbol(react.element)'
     ) {
         // when error message is reactNode
+        // only work with React Adapter
         valid = false;
     }
     return valid;

packages/semi-foundation/image/previewImageFoundation.ts

@@ -5,13 +5,14 @@ import { throttle, isUndefined } from "lodash";
 export interface PreviewImageAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getOriginImageSize: () => { originImageWidth: number; originImageHeight: number }; 
     setOriginImageSize: (size: { originImageWidth: number; originImageHeight: number }) => void;
-    getContainerRef: () => any;
-    getImageRef: () => any;
+    getContainer: () => HTMLDivElement;
+    getImage: () => HTMLImageElement;
     getMouseMove: () => boolean;
     setStartMouseMove: (move: boolean) => void;
     getMouseOffset: () => { x: number; y: number };
     setStartMouseOffset: (offset: { x: number; y: number }) => void;
-    setLoading: (loading: boolean) => void
+    setLoading: (loading: boolean) => void;
+    setImageCursor: (canDrag: boolean) => void
 }
 
 export interface DragDirection {
@@ -29,6 +30,17 @@ export interface ImageOffset {
     y: number
 }
 
+const DefaultDOMRect = {
+    bottom: 0,
+    height: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    width: 0,
+    x: 0,
+    y: 0,
+    toJSON: () => ({})
+};
 export default class PreviewImageFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewImageAdapter<P, S>, P, S> {
     constructor(adapter: PreviewImageAdapter<P, S>) {
         super({ ...adapter });
@@ -37,13 +49,19 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     _isImageVertical = (): boolean => this.getProp("rotation") % 180 !== 0;
 
     _getImageBounds = (): DOMRect => {
-        const imageRef = this._adapter.getImageRef();
-        return imageRef?.getBoundingClientRect();
+        const imageDOM = this._adapter.getImage();
+        if (imageDOM) {
+            return imageDOM.getBoundingClientRect();
+        }
+        return DefaultDOMRect;
     };
 
     _getContainerBounds = (): DOMRect => {
-        const containerRef = this._adapter.getContainerRef();
-        return containerRef?.current?.getBoundingClientRect();
+        const containerDOM = this._adapter.getContainer();
+        if (containerDOM) {
+            return containerDOM.getBoundingClientRect();
+        }
+        return DefaultDOMRect;
     }
 
     _getOffset = (e: any): ImageOffset => {
@@ -98,8 +116,8 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
         const imgWidth = horizontal ? originImageWidth : originImageHeight;
         const imgHeight = horizontal ? originImageHeight : originImageWidth;
         const { onZoom } = this.getProps();
-        const containerRef = this._adapter.getContainerRef();
-        if (containerRef && containerRef.current) {
+        const containerDOM = this._adapter.getContainer();
+        if (containerDOM) {
             const { width: containerWidth, height: containerHeight } = this._getContainerBounds();
             const reservedWidth = containerWidth - 80;
             const reservedHeight = containerHeight - 80;
@@ -121,12 +139,14 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
         }
     };
 
-    handleWheel = (e: React.WheelEvent<HTMLImageElement>) => {
+    // e: WheelEvent<HTMLImageElement>
+    handleWheel = (e: any) => {
         this.onWheel(e);
         handlePrevent(e);
     }
 
-    onWheel = throttle((e: React.WheelEvent<HTMLImageElement>): void => {
+    // e: WheelEvent<HTMLImageElement>
+    onWheel = throttle((e: any): void => {
         const { onZoom, zoomStep, maxZoom, minZoom } = this.getProps();
         const { currZoom } = this.getStates();
         let _zoom:number;
@@ -163,7 +183,7 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     };
 
     handleZoomChange = (newZoom: number, e: any): void => {
-        const imageRef = this._adapter.getImageRef();
+        const imageDOM = this._adapter.getImage();
         const { originImageWidth, originImageHeight } = this._adapter.getOriginImageSize();
         const { canDragVertical, canDragHorizontal } = this.calcCanDragDirection();
         const canDrag = canDragVertical || canDragHorizontal;
@@ -201,7 +221,9 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
             top: newTop,
             currZoom: newZoom,
         } as any);
-        imageRef && (imageRef.style.cursor = canDrag ? "grab" : "default");
+        if (imageDOM) {
+            this._adapter.setImageCursor(canDrag);
+        }
     };
 
     calcExtremeBounds = (): ExtremeBounds => {

packages/semi-foundation/image/previewInnerFoundation.ts

@@ -57,7 +57,7 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
     }
 
     handleMouseMoveEvent = (e: any, event: string) => {
-        const isTarget = isTargetEmit(e.nativeEvent, STOP_CLOSE_TARGET);
+        const isTarget = isTargetEmit(e, STOP_CLOSE_TARGET);
         if (isTarget && event === "over") {
             this._adapter.setStopTiming(true);
         } else if (isTarget && event === "out") {
@@ -74,7 +74,7 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
 
     handleMouseUp = (e: any) => {
         const { maskClosable } = this.getProps();
-        let couldClose = !isTargetEmit(e.nativeEvent, NOT_CLOSE_TARGETS);
+        let couldClose = !isTargetEmit(e, NOT_CLOSE_TARGETS);
         const { clientX, clientY } = e;
         const { x, y } = this._adapter.getStartMouseDown();
         // 对鼠标移动做容错处理，当 x 和 y 方向在 mouseUp 的时候移动距离都小于等于 5px 时候就可以关闭预览

packages/semi-foundation/input/textareaFoundation.ts

@@ -7,7 +7,6 @@ import {
 } from 'lodash';
 import calculateNodeHeight from './util/calculateNodeHeight';
 import getSizingData from './util/getSizingData';
-import isEnterPress from '../utils/isEnterPress';
 
 export interface TextAreaDefaultAdapter {
     notifyChange: noopFunction;
@@ -24,7 +23,7 @@ export interface TextAreaDefaultAdapter {
 export interface TextAreaAdapter extends Partial<DefaultAdapter>, Partial<TextAreaDefaultAdapter> {
     setMinLength(length: number): void;
     notifyPressEnter(e: any): void;
-    getRef(): any;
+    getRef(): HTMLInputElement;
     notifyHeightUpdate(e: any): void
 }
 
@@ -175,7 +174,7 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
     resizeTextarea = (cb?: any) => {
         const { height } = this.getStates();
         const { rows } = this.getProps();
-        const node = this._adapter.getRef().current;
+        const node = this._adapter.getRef();
         const nodeSizingData = getSizingData(node);
 
         if (!nodeSizingData) {
@@ -199,11 +198,13 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
         cb && cb();
     };
 
-    handleMouseEnter(e) {
+    // e: MouseEvent
+    handleMouseEnter(e: any) {
         this._adapter.toggleHovering(true);
     }
 
-    handleMouseLeave(e) {
+    // e: MouseEvent
+    handleMouseLeave(e: any) {
         this._adapter.toggleHovering(false);
     }
 

packages/semi-foundation/inputNumber/foundation.ts

@@ -300,7 +300,7 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
         }
         this._adapter.setClickUpOrDown(true);
         if (event) {
-            event.persist();
+            this._persistEvent(event);
             event.stopPropagation();
             // Prevent native blurring events
             this._preventDefault(event);
@@ -321,7 +321,7 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
         }
         this._adapter.setClickUpOrDown(true);
         if (event) {
-            event.persist();
+            this._persistEvent(event);
             event.stopPropagation();
             this._preventDefault(event);
         }

packages/semi-foundation/navigation/navigation.scss

@@ -699,4 +699,10 @@ $module: #{$prefix}-navigation;
     }
 }
 
+.#{$prefix}-dropdown-menu {
+    .#{$module}-item-sub {
+        padding: $spacing-navigation_item_sub-padding;
+    }
+}
+
 @import "./rtl.scss";

packages/semi-foundation/rating/foundation.ts

@@ -170,7 +170,8 @@ export default class RatingFoundation<P = Record<string, any>, S = Record<string
         }
     }
 
-    handleStarBlur = (event: React.FocusEvent) => {
+    // e: FocusEvent
+    handleStarBlur = (e: any) => {
         const { emptyStarFocusVisible } = this.getStates();
         if (emptyStarFocusVisible) {
             this._adapter.setEmptyStarFocusVisible(false);
@@ -205,7 +206,8 @@ export class RatingItemFoundation<P = Record<string, any>, S = Record<string, an
         }
     }
 
-    handleBlur = (event: React.FocusEvent, star: string) => {
+    // e: FocusEvent
+    handleBlur = (e: any, star: string) => {
         const { firstStarFocus, secondStarFocus } = this.getStates();
         if (star === 'first') {
             firstStarFocus && this._adapter.setFirstStarFocus(false);

packages/semi-foundation/slider/foundation.ts

@@ -82,8 +82,8 @@ export interface SliderAdapter extends DefaultAdapter<SliderProps, SliderState>{
     setDragging: (value: boolean[]) => void;
     updateCurrentValue: (value: SliderState['currentValue']) => void;
     setOverallVars: (key: string, value: any) => void;
-    getMinHandleEl: () => { current: HTMLElement };
-    getMaxHandleEl: () => { current: HTMLElement };
+    getMinHandleEl: () => HTMLSpanElement;
+    getMaxHandleEl: () => HTMLSpanElement;
     onHandleDown: (e: any) => any;
     onHandleMove: (mousePos: number, isMin: boolean, stateChangeCallback?: () => void, clickTrack?: boolean, outPutValue?: number | number[]) => boolean | void;
     setEventDefault: (e: any) => void;
@@ -520,8 +520,8 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
 
     // run when user touch left or right handle.
     onHandleTouchStart = (e: any, handler: 'min' | 'max') => {
-        const handleMinDom = this._adapter.getMinHandleEl().current;
-        const handleMaxDom = this._adapter.getMaxHandleEl().current;
+        const handleMinDom = this._adapter.getMinHandleEl();
+        const handleMaxDom = this._adapter.getMaxHandleEl();
         if (e.target === handleMinDom || e.target === handleMaxDom) {
             handlePrevent(e);
             const touch = touchEventPolyfill(e.touches[0], e);
@@ -531,8 +531,8 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
     };
 
     onHandleTouchMove = (e: any) => {
-        const handleMinDom = this._adapter.getMinHandleEl().current;
-        const handleMaxDom = this._adapter.getMaxHandleEl().current;
+        const handleMinDom = this._adapter.getMinHandleEl();
+        const handleMaxDom = this._adapter.getMaxHandleEl();
         if (e.target === handleMinDom || e.target === handleMaxDom) {
             const touch = touchEventPolyfill(e.touches[0], e);
             this.onHandleMove(touch);

packages/semi-foundation/table/foundation.ts

@@ -17,7 +17,8 @@ import {
     filter,
     isMap,
     slice,
-    isEqual
+    isEqual,
+    isUndefined
 } from 'lodash';
 import memoizeOne from 'memoize-one';
 
@@ -114,6 +115,46 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
     memoizedFlattenFnsColumns: (columns: BaseColumnProps<RecordType>[], childrenColumnName?: string) => BaseColumnProps<RecordType>[];
     memoizedPagination: (pagination: BasePagination) => BasePagination;
 
+    /**
+     * update columns in place, and use default values as initial values if the sorting and filtering columns have no values
+     */
+    static initColumnsFilteredValueAndSorterOrder(columns: BaseColumnProps<unknown>[]) {
+        columns.forEach(column => {
+            TableFoundation.initFilteredValue(column);
+            TableFoundation.initSorterOrder(column);
+        });
+        return columns;
+    }
+
+    /**
+     * init filteredValue of filtering column, use defaultFilteredValue or [] when it is undefined
+     */
+    static initFilteredValue(column: BaseColumnProps<unknown>) {
+        const { defaultFilteredValue, filteredValue, filters } = column;
+        const hasFilter = Array.isArray(filters) && filters.length;
+        if (hasFilter && isUndefined(filteredValue)) {
+            if (Array.isArray(defaultFilteredValue) && defaultFilteredValue.length) {
+                column.filteredValue = defaultFilteredValue;
+            } else {
+                column.filteredValue = [];
+            }
+        }
+    }
+
+    /**
+     * init sortOrder of sorting column, use defaultSortOrder or [] when it is undefined
+     */
+    static initSorterOrder(column: BaseColumnProps<unknown>) {
+        const { defaultSortOrder, sortOrder, sorter } = column;
+        if (sorter && isUndefined(sortOrder)) {
+            if (!isUndefined(defaultSortOrder)) {
+                column.sortOrder = defaultSortOrder;
+            } else {
+                column.sortOrder = false;
+            }
+        }
+    }
+
     constructor(adapter: TableAdapter<RecordType>) {
         super({ ...adapter });
 
@@ -521,16 +562,7 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
     handleMouseLeave(e: any) { }
 
     stopPropagation(e: any) {
-        if (e && typeof e === 'object') {
-            if (typeof e.stopPropagation === 'function') {
-                e.stopPropagation();
-            }
-            if (e.nativeEvent && typeof e.nativeEvent.stopPropagation === 'function') {
-                e.nativeEvent.stopPropagation();
-            } else if (typeof e.stopImmediatePropagation === 'function') {
-                e.stopImmediatePropagation();
-            }
-        }
+        this._adapter.stopPropagation(e);
     }
 
     /**

packages/semi-ui/_base/baseComponent.tsx

@@ -66,6 +66,9 @@ export default class BaseComponent<P extends BaseProps = {}, S = {}> extends Com
                 } catch (error) {
 
                 }
+            },
+            persistEvent: (e: React.KeyboardEvent | React.MouseEvent) => {
+                e && e.persist && typeof e.persist === 'function' ? e.persist() : null;
             }
         };
     }

packages/semi-ui/autoComplete/index.tsx

@@ -292,7 +292,7 @@ class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoComple
                 let { rePosKey } = this.state;
                 rePosKey = rePosKey + 1;
                 this.setState({ rePosKey });
-            },
+            }
         };
     }
 

packages/semi-ui/checkbox/checkbox.tsx

@@ -11,7 +11,13 @@ import { Context, CheckboxContextType } from './context';
 import { isUndefined, isBoolean, noop } from 'lodash';
 import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
 import { CheckboxType } from './checkboxGroup';
-export type CheckboxEvent = BasicCheckboxEvent;
+
+
+export interface CheckboxEvent extends BasicCheckboxEvent {
+    nativeEvent: {
+        stopImmediatePropagation: () => void
+    }
+}
 export type TargetObject = BasicTargetObject;
 
 export interface CheckboxProps extends BaseCheckboxProps {
@@ -96,6 +102,29 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
                 const { onChange } = this.props;
                 onChange && onChange(cbContent);
             },
+            generateEvent: (checked, e) => {
+                const { props } = this;
+                const cbValue = {
+                    target: {
+                        ...props,
+                        checked,
+                    },
+                    stopPropagation: () => {
+                        e.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        e.preventDefault();
+                    },
+                    nativeEvent: {
+                        stopImmediatePropagation: () => {
+                            if (e.nativeEvent && typeof e.nativeEvent.stopImmediatePropagation === 'function') {
+                                e.nativeEvent.stopImmediatePropagation();
+                            }
+                        }
+                    },
+                };
+                return cbValue;
+            },
             getIsInGroup: () => this.isInGroup(),
             getGroupValue: () => (this.context && this.context.checkboxGroup.value) || [],
             notifyGroupChange: cbContent => {

packages/semi-ui/checkbox/checkboxGroup.tsx

@@ -74,8 +74,8 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
             updateGroupValue: value => {
                 this.setState({ value });
             },
-            notifyChange: evt => {
-                this.props.onChange && this.props.onChange(evt);
+            notifyChange: value => {
+                this.props.onChange && this.props.onChange(value);
             },
         };
     }

packages/semi-ui/checkbox/context.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import { BasicCheckboxEvent } from '@douyinfe/semi-foundation/checkbox/checkboxFoundation';
+// import { BasicCheckboxEvent } from '@douyinfe/semi-foundation/checkbox/checkboxFoundation';
 type CheckboxContextType = {
     checkboxGroup?: {
-        onChange: (evt: BasicCheckboxEvent) => void;
+        // onChange: (evt: BasicCheckboxEvent) => void;
+        onChange: (evt: any) => void;
         value: any[];
         disabled: boolean;
         name: any;

packages/semi-ui/image/previewImage.tsx

@@ -47,10 +47,10 @@ export default class PreviewImage extends BaseComponent<PreviewImageProps, Previ
                 originImageWidth = size.originImageWidth;
                 originImageHeight = size.originImageHeight;
             },
-            getContainerRef: () => {
-                return this.containerRef;
+            getContainer: () => {
+                return this.containerRef.current;
             },
-            getImageRef: () => {
+            getImage: () => {
                 return this.imageRef;
             },
             getMouseMove: () => startMouseMove,
@@ -62,11 +62,14 @@ export default class PreviewImage extends BaseComponent<PreviewImageProps, Previ
                     loading,
                 });
             },
+            setImageCursor: (canDrag: boolean) => {
+                this.imageRef.style.cursor = canDrag ? "grab" : "default";
+            }
         };
     }
 
     containerRef: React.RefObject<HTMLDivElement>;
-    imageRef: React.RefObject<HTMLImageElement>;
+    imageRef: HTMLImageElement | null;
     foundation: PreviewImageFoundation;
 
     constructor(props) {
@@ -81,7 +84,7 @@ export default class PreviewImage extends BaseComponent<PreviewImageProps, Previ
             left: 0,
         };
         this.containerRef = React.createRef<HTMLDivElement>();
-        this.imageRef = React.createRef<HTMLImageElement>();
+        this.imageRef = null;
         this.foundation = new PreviewImageFoundation(this.adapter);
     }
 
@@ -161,7 +164,7 @@ export default class PreviewImage extends BaseComponent<PreviewImageProps, Previ
     // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners。
     
     registryImageRef = (ref): void => {
-        if (this.imageRef && this.imageRef.current) {
+        if (this.imageRef) {
             (this.imageRef as any).removeEventListener("wheel", this.handleWheel);
         }
         if (ref) {

packages/semi-ui/image/previewInner.tsx

@@ -241,7 +241,7 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
     }
 
     handleMouseUp = (e): void => {
-        this.foundation.handleMouseUp(e);
+        this.foundation.handleMouseUp(e.nativeEvent);
     }
 
     handleMouseMove = (e): void => {
@@ -333,8 +333,8 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
                     onMouseDown={this.handleMouseDown}
                     onMouseUp={this.handleMouseUp}
                     onMouseMove={this.handleMouseMove}
-                    onMouseOver={(e): void => this.handleMouseEvent(e, "over")}
-                    onMouseOut={(e): void => this.handleMouseEvent(e, "out")}
+                    onMouseOver={(e): void => this.handleMouseEvent(e.nativeEvent, "over")}
+                    onMouseOut={(e): void => this.handleMouseEvent(e.nativeEvent, "out")}
                 >
                     <Header className={cls(hideViewerCls)} onClose={this.handlePreviewClose} renderHeader={renderHeader}/>
                     <PreviewImage 

packages/semi-ui/input/textarea.tsx

@@ -98,7 +98,7 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
     };
 
     focusing: boolean;
-    libRef: React.RefObject<React.ReactNode>;
+    libRef: React.RefObject<HTMLInputElement>;
     _resizeLock: boolean;
     _resizeListener: any;
     foundation: TextAreaFoundation;
@@ -115,7 +115,7 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
         this.focusing = false;
         this.foundation = new TextAreaFoundation(this.adapter);
 
-        this.libRef = React.createRef();
+        this.libRef = React.createRef<HTMLInputElement>();
         this._resizeLock = false;
     }
 
@@ -127,7 +127,7 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
                     this.foundation.resizeTextarea();
                 }
             }),
-            getRef: () => this.libRef,
+            getRef: () => this.libRef.current,
             toggleFocusing: (focusing: boolean) => this.setState({ isFocus: focusing }),
             toggleHovering: (hovering: boolean) => this.setState({ isHover: hovering }),
             notifyChange: (val: string, e: React.MouseEvent<HTMLTextAreaElement>) => {

packages/semi-ui/inputNumber/index.tsx

@@ -222,7 +222,7 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
             },
             updateStates: (states, callback) => {
                 this.setState(states, callback);
-            }
+            },
         };
     }
 

packages/semi-ui/package.json

@@ -97,7 +97,6 @@
         "jsdom": "^15.2.1",
         "merge2": "^1.4.1",
         "null-loader": "^3.0.0",
-        "prop-types": "15.7.2",
         "react-dnd": "^9.5.1",
         "react-infinite-scroller": "^1.2.4",
         "react-storybook-addon-props-combinations": "^1.1.0",

packages/semi-ui/slider/index.tsx

@@ -74,8 +74,8 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
         verticalReverse: false
     };
     private sliderEl: React.RefObject<HTMLDivElement>;
-    private minHanleEl: React.RefObject<HTMLDivElement>;
-    private maxHanleEl: React.RefObject<HTMLDivElement>;
+    private minHanleEl: React.RefObject<HTMLSpanElement>;
+    private maxHanleEl: React.RefObject<HTMLSpanElement>;
     private dragging: boolean[];
     private eventListenerSet: Set<() => void>;
     foundation: SliderFoundation;
@@ -185,8 +185,8 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
             setOverallVars: (key: string, value: any) => {
                 this[key] = value;
             },
-            getMinHandleEl: () => this.minHanleEl,
-            getMaxHandleEl: () => this.maxHanleEl,
+            getMinHandleEl: () => this.minHanleEl.current,
+            getMaxHandleEl: () => this.maxHanleEl.current,
             onHandleDown: (e: React.MouseEvent) => {
                 this._addEventListener(document.body, 'mousemove', this.foundation.onHandleMove, false);
                 this._addEventListener(document.body, 'mouseup', this.foundation.onHandleUp, false);

packages/semi-ui/table/Table.tsx

@@ -201,11 +201,13 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
                 }
             },
             setSelectedRowKeys: selectedRowKeys => {
-                this.setState({ rowSelection: {
-                    ...this.state.rowSelection as Record<string, any>,
-                    selectedRowKeys: [...selectedRowKeys],
-                    selectedRowKeysSet: new Set(selectedRowKeys),
-                } });
+                this.setState({
+                    rowSelection: {
+                        ...this.state.rowSelection as Record<string, any>,
+                        selectedRowKeys: [...selectedRowKeys],
+                        selectedRowKeysSet: new Set(selectedRowKeys),
+                    }
+                });
             },
             setDisabledRowKeys: disabledRowKeys => {
                 this.setState({ disabledRowKeys, disabledRowKeysSet: new Set(disabledRowKeys) });
@@ -339,6 +341,19 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
                 if (bodyHasScrollBar !== this.state.bodyHasScrollBar) {
                     this.setState({ bodyHasScrollBar });
                 }
+            },
+            stopPropagation(e: TableSelectionCellEvent) {
+                // The event definition here is not very accurate for now, it belongs to a broad structure definition
+                if (e && typeof e === 'object') {
+                    if (typeof e.stopPropagation === 'function') {
+                        e.stopPropagation();
+                    }
+                    if (e.nativeEvent && typeof e.nativeEvent.stopPropagation === 'function') {
+                        e.nativeEvent.stopPropagation();
+                    } else if (typeof e.stopImmediatePropagation === 'function') {
+                        e.stopImmediatePropagation();
+                    }
+                }
             }
         };
     }
@@ -364,6 +379,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
         // columns cannot be deepClone, otherwise the comparison will be false
         const columns = this.getColumns(props.columns, props.children);
         const cachedflattenColumns = flattenColumns(columns);
+        const queries = TableFoundation.initColumnsFilteredValueAndSorterOrder(cloneDeep(cachedflattenColumns));
         this.state = {
             /**
              * Cached props
@@ -376,7 +392,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             /**
              * State calculated based on prop
              */
-            queries: cloneDeep(cachedflattenColumns), // flatten columns, update when sorting or filtering
+            queries, // flatten columns, update when sorting or filtering
             dataSource: [], // data after paging
             flattenData: [],
             expandedRowKeys: [...(props.expandedRowKeys || []), ...(props.defaultExpandedRowKeys || [])], // cached expandedRowKeys

packages/semi-ui/table/__test__/table.test.js

@@ -1753,7 +1753,7 @@ describe(`Table`, () => {
         expect(demo.find(`.${BASE_CLASS_PREFIX}-table-tbody .${BASE_CLASS_PREFIX}-table-row-section.on`).length).toBe(0);
     });
 
-    it('test defaultSortOrder', async () => {
+    it('test defaultSortOrder descend', async () => {
         const sortColumns = [
             {
                 title: 'Name',
@@ -1806,7 +1806,10 @@ describe(`Table`, () => {
         const firstCell = sortTable.find('.semi-table-tbody .semi-table-row .semi-table-row-cell').at(0);
         expect(firstCell.text()).toBe(name);
 
-        // test default ascend
+        sortTable.unmount();
+    });
+
+    it('test defaultSortOrder descend', async () => {
         const ascendOrderColumns = [
             {
                 title: 'Name',
@@ -1823,15 +1826,46 @@ describe(`Table`, () => {
                 dataIndex: 'address',
             }
         ];
-        sortTable.setProps({columns: ascendOrderColumns})
-        sortTable.update()
+        const sortData = [
+            {
+                key: '1',
+                name: 'long name',
+                age: 32,
+                address: 'New York No. 1 Lake Park',
+            },
+            {
+                key: '2',
+                name: 'longest name',
+                age: 42,
+                address: 'London No. 1 Lake Park',
+            },
+            {
+                key: '3',
+                name: 'longer name',
+                age: 32,
+                address: 'Sidney No. 1 Lake Park',
+            },
+            {
+                key: '4',
+                name: 'short',
+                age: 32,
+                address: 'London No. 2 Lake Park',
+            },
+        ];
+        const onChange = sinon.spy(() => {
+        });
+
+        const sortTable = mount(<Table columns={ascendOrderColumns} dataSource={sortData} onChange={onChange}/>);
+
         const ascendTargetData = sortData.reduce((a, b) => a.name.length < b.name.length ? a : b);
         const {name: ascendTargetName} = ascendTargetData;
         const ascendFirstCell = sortTable.find('.semi-table-tbody .semi-table-row .semi-table-row-cell').at(0);
         expect(ascendFirstCell.text()).toBe(ascendTargetName);
+        sortTable.unmount();
+    });
 
-        // test default false
-        const defaultOrderColumns = [
+    it('test defaultSortOrder false', async () => {
+        const sortColumns = [
             {
                 title: 'Name',
                 dataIndex: 'name',
@@ -1846,9 +1880,39 @@ describe(`Table`, () => {
                 title: 'Address',
                 dataIndex: 'address',
             }
-        ]
-        sortTable.setProps({columns: defaultOrderColumns})
-        sortTable.update()
+        ];
+        const sortData = [
+            {
+                key: '1',
+                name: 'long name',
+                age: 32,
+                address: 'New York No. 1 Lake Park',
+            },
+            {
+                key: '2',
+                name: 'longest name',
+                age: 42,
+                address: 'London No. 1 Lake Park',
+            },
+            {
+                key: '3',
+                name: 'longer name',
+                age: 32,
+                address: 'Sidney No. 1 Lake Park',
+            },
+            {
+                key: '4',
+                name: 'short',
+                age: 32,
+                address: 'London No. 2 Lake Park',
+            },
+        ];
+        const onChange = sinon.spy(() => {
+        });
+
+        const sortTable = mount(<Table columns={sortColumns} dataSource={sortData} onChange={onChange}/>);
+
+        // test default false
         const defaultTargetData = sortData[0]
         const {name: defaultTargetName} = defaultTargetData;
         const defaultFirstCell = sortTable.find('.semi-table-tbody .semi-table-row .semi-table-row-cell').at(0);
@@ -1895,6 +1959,7 @@ describe(`Table`, () => {
         const {name: newDescendTargetName} = newDescendTargetData;
         const newDataFirstCell = sortTable.find('.semi-table-tbody .semi-table-row .semi-table-row-cell').at(0);
         expect(newDataFirstCell.text()).toBe(newDescendTargetName);
+        sortTable.unmount();
     });
 
     it(`test expandRowByClick`, async () => {
@@ -1949,4 +2014,162 @@ describe(`Table`, () => {
         expandIcons.at(1).simulate('click');
         expect(expandedRowRender.calledTwice).toBeTruthy();
     });
+
+    it('test defaultFilteredValue is in onChange when click sorter', () => {
+        const columns = [
+            {
+                title: '标题',
+                dataIndex: 'name',
+                width: 400,
+                render: (text, record, index) => {
+                    return (
+                        <div>
+                            {text}
+                        </div>
+                    );
+                },
+                filters: [
+                    {
+                        text: 'Semi Design 设计稿',
+                        value: 'Semi Design 设计稿',
+                    },
+                    {
+                        text: 'Semi Pro 设计稿',
+                        value: 'Semi Pro 设计稿',
+                    },
+                ],
+                onFilter: (value, record) => record.name.includes(value),
+                defaultFilteredValue: ['Semi Pro 设计稿'],
+            },
+            {
+                title: '大小',
+                dataIndex: 'size',
+                sorter: (a, b) => a.size - b.size > 0 ? 1 : -1,
+                defaultSortOrder: 'ascend',
+                render: (text) => `${text} KB`
+            },
+            {
+                title: '所有者',
+                dataIndex: 'owner',
+                render: (text, record, index) => {
+                    return (
+                        <div>
+                            {text}
+                        </div>
+                    );
+                }
+    
+            }
+        ];
+
+        const getData = (total) => {
+            const data = [];
+            for (let i = 0; i < total; i++) {
+                const isSemiDesign = i % 2 === 0;
+                const randomNumber = (i * 1000) % 199;
+                data.push({
+                    key: '' + i,
+                    name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi Pro 设计稿${i}.fig`,
+                    owner: isSemiDesign ? '姜鹏志' : '郝宣',
+                    size: randomNumber,
+                    avatarBg: isSemiDesign ? 'grey' : 'red'
+                });
+            }
+            return data;
+        };
+
+        const data = getData(25);
+
+        const onChange = sinon.spy(() => {
+        });
+
+        const tableNode = mount(<Table columns={columns} dataSource={data} onChange={onChange}/>);
+        tableNode.find('.semi-table-column-sorter').simulate('click');
+        expect(onChange.calledOnce).toBe(true);
+        const arg = onChange.getCall(0).args[0];
+        expect(arg.filters.length).toBe(1);
+        expect(arg.filters[0].defaultFilteredValue).toEqual(['Semi Pro 设计稿']);
+        expect(arg.filters[0].filteredValue).toEqual(['Semi Pro 设计稿']);
+        tableNode.unmount();
+    });
+
+    it('test defaultSortOrder is in onChange when click filter', () => {
+        const defaultSortOrder = 'ascend';
+        const columns = [
+            {
+                title: '标题',
+                dataIndex: 'name',
+                width: 400,
+                render: (text, record, index) => {
+                    return (
+                        <div>
+                            {text}
+                        </div>
+                    );
+                },
+                filters: [
+                    {
+                        text: 'Semi Design 设计稿',
+                        value: 'Semi Design 设计稿',
+                    },
+                    {
+                        text: 'Semi Pro 设计稿',
+                        value: 'Semi Pro 设计稿',
+                    },
+                ],
+                onFilter: (value, record) => record.name.includes(value),
+                defaultFilteredValue: ['Semi Pro 设计稿'],
+            },
+            {
+                title: '大小',
+                dataIndex: 'size',
+                sorter: (a, b) => a.size - b.size > 0 ? 1 : -1,
+                defaultSortOrder: 'ascend',
+                render: (text) => `${text} KB`
+            },
+            {
+                title: '所有者',
+                dataIndex: 'owner',
+                render: (text, record, index) => {
+                    return (
+                        <div>
+                            {text}
+                        </div>
+                    );
+                }
+    
+            }
+        ];
+
+        const getData = (total) => {
+            const data = [];
+            for (let i = 0; i < total; i++) {
+                const isSemiDesign = i % 2 === 0;
+                const randomNumber = (i * 1000) % 199;
+                data.push({
+                    key: '' + i,
+                    name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi Pro 设计稿${i}.fig`,
+                    owner: isSemiDesign ? '姜鹏志' : '郝宣',
+                    size: randomNumber,
+                    avatarBg: isSemiDesign ? 'grey' : 'red'
+                });
+            }
+            return data;
+        };
+
+        const data = getData(25);
+
+        const onChange = sinon.spy(() => {
+        });
+
+        const tableNode = mount(<Table columns={columns} dataSource={data} onChange={onChange}/>);
+        tableNode.find('.semi-table-column-filter').simulate('click');
+        const filterNode = Array.from(document.querySelectorAll('.semi-checkbox-addon')).filter(node => node.textContent === 'Semi Design 设计稿');
+        filterNode[0].click();
+        expect(onChange.calledOnce).toBe(true);
+        const arg = onChange.getCall(0).args[0];
+        expect(arg.sorter.defaultSortOrder).toBe(defaultSortOrder);
+        expect(arg.sorter.sortOrder).toBe(defaultSortOrder);
+        tableNode.unmount();
+    });
 });

packages/semi-ui/table/_story/v2/Fixed1188/index.tsx

@@ -0,0 +1,98 @@
+import React, { useState, useEffect, useMemo } from 'react';
+
+// eslint-disable-next-line semi-design/no-import
+import { Table, Avatar } from '@douyinfe/semi-ui';
+// eslint-disable-next-line semi-design/no-import
+import { ColumnProps } from '@douyinfe/semi-ui/table';
+
+const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
+
+App.storyName = 'fixed github 1188';
+/**
+ * fix https://github.com/DouyinFE/semi-design/issues/1188
+ */
+function App() {
+    const [dataSource, setData] = useState([]);
+    const [filteredValue, setFilteredValue] = useState(['Semi Pro 设计稿']);
+
+    const columns: ColumnProps[] = [
+        {
+            title: '标题',
+            dataIndex: 'name',
+            width: 400,
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" shape="square" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>
+                        {text}
+                    </div>
+                );
+            },
+            filters: [
+                {
+                    text: 'Semi Design 设计稿',
+                    value: 'Semi Design 设计稿',
+                },
+                {
+                    text: 'Semi Pro 设计稿',
+                    value: 'Semi Pro 设计稿',
+                },
+            ],
+            onFilter: (value, record) => record.name.includes(value),
+            defaultFilteredValue: filteredValue,
+        },
+        {
+            title: '大小',
+            dataIndex: 'size',
+            sorter: (a, b) => a.size - b.size > 0 ? 1 : -1,
+            defaultSortOrder: 'ascend',
+            render: (text) => `${text} KB`
+        },
+        {
+            title: '所有者',
+            dataIndex: 'owner',
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>{typeof text === 'string' && text.slice(0, 1)}</Avatar>
+                        {text}
+                    </div>
+                );
+            }
+
+        }
+    ];
+
+    const getData = (total) => {
+        const data = [];
+        for (let i = 0; i < total; i++) {
+            const isSemiDesign = i % 2 === 0;
+            const randomNumber = (i * 1000) % 199;
+            data.push({
+                key: '' + i,
+                name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi Pro 设计稿${i}.fig`,
+                owner: isSemiDesign ? '姜鹏志' : '郝宣',
+                size: randomNumber,
+                avatarBg: isSemiDesign ? 'grey' : 'red'
+            });
+        }
+        return data;
+    };
+
+    const handleChange = (options) => {
+        console.log('onChange', options);
+    };
+
+    useEffect(() => {
+        const data = getData(46);
+        setData(data);
+    }, []);
+
+    return (
+        <div>
+            <Table columns={columns} dataSource={dataSource} onChange={handleChange} />
+        </div>
+    );
+}
+
+export default App;

packages/semi-ui/table/_story/v2/index.js

@@ -10,4 +10,5 @@ export { default as RadioRowSelection } from './radioRowSelection';
 export { default as FixedVirtualizedEmpty } from './FixedVirtualizedEmpty';
 export { default as FixedFilter } from './FixedFilter';
 export { default as FixedSorter } from './FixedSorter';
-export { default as stickyHeaderTable } from './stickyHeader';
+export { default as stickyHeaderTable } from './stickyHeader';
+export { default as Fixed1188 } from './Fixed1188';

packages/semi-ui/table/interface.ts

@@ -149,7 +149,9 @@ export interface FilterDropdownItem {
     checked?: boolean
 }
 export interface RenderOptions {
-    expandIcon?: React.ReactNode
+    expandIcon?: React.ReactNode;
+    selection?: React.ReactNode;
+    indentText?: React.ReactNode
 }
 export interface OnCellReturnObject extends React.TdHTMLAttributes<HTMLElement> {
     [x: string]: any;