@douyinfe/semi-foundation 2.56.4-alpha.4 → 2.57.0-beta.0

package/form/foundation.ts

@@ -613,6 +613,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
             getValue: (field?: string) => this.getValue(field, { needClone: true }),
             getValues: () => this.getValue(undefined, { needClone: true }),
             getFormState: () => this.getFormState(true),
+            getFormProps: (props?: Array<string>) => this.getFormProps(props),
             getInitValue: (field: string) => this.getInitValue(field),
             getInitValues: () => this.getInitValues(),
             getTouched: (field?: string) => this.getTouched(field),

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

@@ -76,6 +76,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
         getValue: (field?: string) => any;
         getValues: () => any;
         getFormState: () => FormState<any>;
+        getFormProps: (props?: Array<string>) => ComponentProps;
         getInitValue: (field: string) => any;
         getInitValues: () => any;
         getTouched: (field?: string) => boolean | Record<string, any>;

package/lib/cjs/form/foundation.js

@@ -599,6 +599,7 @@ class FormFoundation extends _foundation.default {
         needClone: true
       }),
       getFormState: () => this.getFormState(true),
+      getFormProps: props => this.getFormProps(props),
       getInitValue: field => this.getInitValue(field),
       getInitValues: () => this.getInitValues(),
       getTouched: field => this.getTouched(field),

package/lib/cjs/modal/modalFoundation.d.ts

@@ -18,6 +18,7 @@ export interface ModalProps {
     cancelText?: string;
     centered?: boolean;
     className?: string;
+    modalContentClass?: string;
     closable?: boolean;
     confirmLoading?: boolean;
     cancelLoading?: boolean;

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

@@ -71,7 +71,11 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     handleClick(e: any): void;
     open(acInput?: string, originalOptions?: BasicOptionProps[]): void;
     toggle2SearchInput(isShow: boolean): void;
-    close(e?: any, closeCb?: () => void): void;
+    close(closeConfig?: {
+        event?: any;
+        closeCb?: () => void;
+        notToggleInput?: boolean;
+    }): void;
     onSelect(option: BasicOptionProps, optionIndex: number, event: MouseEvent | KeyboardEvent): void;
     _handleSingleSelect({ value, label, ...rest }: BasicOptionProps, event: any): void;
     _handleMultipleSelect({ value, label, ...rest }: BasicOptionProps, event: MouseEvent | KeyboardEvent): void;

package/lib/cjs/select/foundation.js

@@ -323,7 +323,9 @@ class SelectFoundation extends _foundation.default {
       this.open();
       this._notifyFocus(e);
     } else if (isOpen && clickToHide) {
-      this.close(e);
+      this.close({
+        event: e
+      });
     } else if (isOpen && !clickToHide) {
       this.focusInput();
     }
@@ -348,7 +350,9 @@ class SelectFoundation extends _foundation.default {
     this._adapter.notifyDropdownVisibleChange(true);
     this.bindKeyBoardEvent();
     this._adapter.registerClickOutsideHandler(e => {
-      this.close(e);
+      this.close({
+        event: e
+      });
       this._notifyBlur(e);
       this._adapter.updateFocusState(false);
     });
@@ -361,8 +365,13 @@ class SelectFoundation extends _foundation.default {
       this._adapter.toggleInputShow(isShow, () => undefined);
     }
   }
-  close(e, closeCb) {
+  close(closeConfig) {
     // to support A11y, closing the panel trigger does not necessarily lose focus
+    const {
+      event,
+      closeCb,
+      notToggleInput
+    } = closeConfig || {};
     this._adapter.closeMenu();
     this._adapter.notifyDropdownVisibleChange(false);
     this._adapter.setIsFocusInContainer(false);
@@ -371,12 +380,13 @@ class SelectFoundation extends _foundation.default {
     // this._adapter.updateFocusState(false);
     this._adapter.unregisterClickOutsideHandler();
     const isFilterable = this._isFilterable();
-    if (isFilterable) {
+    // notToggleInput will only be true when in controlled mode - handleSingeleSelect process
+    if (isFilterable && !notToggleInput) {
       this.toggle2SearchInput(false);
     }
     this._adapter.once('popoverClose', () => {
       if (isFilterable) {
-        this.clearInput(e);
+        this.clearInput(event);
       }
       if (closeCb) {
         closeCb();
@@ -419,17 +429,30 @@ class SelectFoundation extends _foundation.default {
     // If it is a controlled component, directly notify
     // Make sure that the operations of updating updateOptions are done after the animation ends
     // otherwise the content will be updated when the popup layer is not collapsed, and it looks like it will flash once when it is closed
+    const isFilterable = this._isFilterable();
     if (this._isControlledComponent()) {
-      this.close(event, () => {
-        this._notifyChange(selections);
+      this.close({
+        event: event,
+        notToggleInput: true,
+        closeCb: () => {
+          // trigger props.onChange -> update props.value -> updateSelection
+          this._notifyChange(selections);
+          // make sure toggleSearchInput update after updateSelection in controlled mode, otherwise text in inactive DOM will update quicker than selection, looks like flash text
+          if (isFilterable) {
+            this.toggle2SearchInput(false);
+          }
+        }
       });
     } else {
       this._adapter.updateSelection(selections);
       // notify user
       this._notifyChange(selections);
-      this.close(event, () => {
-        // Update the selected item in the drop-down box
-        this.updateOptionsActiveStatus(selections);
+      this.close({
+        event: event,
+        closeCb: () => {
+          // Update the selected item in the drop-down box
+          this.updateOptionsActiveStatus(selections);
+        }
       });
     }
   }
@@ -729,7 +752,9 @@ class SelectFoundation extends _foundation.default {
         this._handleEnterKeyDown(event);
         break;
       case _keyCode.default.ESC:
-        isOpen && this.close(event);
+        isOpen && this.close({
+          event: event
+        });
         filter && !multiple && this._focusTrigger();
         break;
       case _keyCode.default.TAB:
@@ -823,7 +848,9 @@ class SelectFoundation extends _foundation.default {
         }
       } else {
         // there are no focusable elements inside the container, tab to next element and trigger blur
-        this.close(event);
+        this.close({
+          event: event
+        });
         this._notifyBlur(event);
       }
     } else {
@@ -842,7 +869,9 @@ class SelectFoundation extends _foundation.default {
     } else if (activeElement === focusableElements[focusableElements.length - 1]) {
       // focus in the last element in container, focus back to trigger and close panel
       this._focusTrigger();
-      this.close(event);
+      this.close({
+        event
+      });
       (0, _a11y.handlePrevent)(event);
     }
   }
@@ -851,7 +880,9 @@ class SelectFoundation extends _foundation.default {
     const isFocusInContainer = this._adapter.getIsFocusInContainer();
     if (!isFocusInContainer) {
       // focus in trigger, close the panel, shift tab to previe element and trigger blur
-      this.close(event);
+      this.close({
+        event
+      });
       this._notifyBlur(event);
     } else if (activeElement === focusableElements[0]) {
       // focus in the first element in container, focus back to trigger
@@ -886,7 +917,9 @@ class SelectFoundation extends _foundation.default {
           this.onSelect(selectedOption, focusIndex, event);
         }
       } else {
-        this.close(event);
+        this.close({
+          event
+        });
       }
     }
   }

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

@@ -69,7 +69,7 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize'
     renderSelectedItem?: BasicRenderSelectedItem;
     getPopupContainer?: () => HTMLElement;
     onBlur?: (e: any) => void;
-    onSearch?: (sunInput: string, filteredExpandedKeys: string[]) => void;
+    onSearch?: (sunInput: string, filteredExpandedKeys: string[], filteredNodes: BasicTreeNodeData[]) => void;
     onChange?: BasicOnChange;
     onFocus?: (e: any) => void;
     onVisibleChange?: (isVisible: boolean) => void;
@@ -90,7 +90,7 @@ export interface TreeSelectAdapter<P = Record<string, any>, S = Record<string, a
     rePositionDropdown: () => void;
     updateState: (states: Partial<BasicTreeSelectInnerData>) => void;
     notifySelect: (selectedKey: string, selected: boolean, selectedNode: BasicTreeNodeData) => void;
-    notifySearch: (input: string, filteredExpandedKeys: string[]) => void;
+    notifySearch: (input: string, filteredExpandedKeys: string[], filteredNodes: BasicTreeNodeData[]) => void;
     cacheFlattenNodes: (bool: boolean) => void;
     openMenu: () => void;
     closeMenu: (cb?: () => void) => void;

package/lib/cjs/treeSelect/foundation.js

@@ -475,6 +475,7 @@ class TreeSelectFoundation extends _foundation.default {
     } = this.getProps();
     const realFilterProp = treeNodeFilterProp !== 'label' ? treeNodeFilterProp : (0, _get2.default)(keyMaps, 'label', 'label');
     const newExpandedKeys = new Set(expandedKeys);
+    let filteredNodes = [];
     let filteredOptsKeys = [];
     let expandedOptsKeys = [];
     let newFlattenNodes = [];
@@ -484,19 +485,21 @@ class TreeSelectFoundation extends _foundation.default {
       expandedOptsKeys.forEach(item => newExpandedKeys.add(item));
       newFlattenNodes = (0, _treeUtil.flattenTreeData)(treeData, newExpandedKeys, keyMaps);
     } else {
-      filteredOptsKeys = Object.values(keyEntities).filter(item => {
+      const filteredOpts = Object.values(keyEntities).filter(item => {
         const {
           data
         } = item;
         return (0, _treeUtil.filter)(sugInput, data, filterTreeNode, realFilterProp);
-      }).map(item => item.key);
+      });
+      filteredNodes = filteredOpts.map(item => item.data);
+      filteredOptsKeys = filteredOpts.map(item => item.key);
       expandedOptsKeys = (0, _treeUtil.findAncestorKeys)(filteredOptsKeys, keyEntities, false);
       const shownChildKeys = (0, _treeUtil.findDescendantKeys)(filteredOptsKeys, keyEntities, true);
       filteredShownKeys = new Set([...shownChildKeys, ...expandedOptsKeys]);
       newFlattenNodes = (0, _treeUtil.flattenTreeData)(treeData, new Set(expandedOptsKeys), keyMaps, showFilteredOnly && filteredShownKeys);
     }
     const newFilteredExpandedKeys = new Set(expandedOptsKeys);
-    this._adapter.notifySearch(sugInput, Array.from(newFilteredExpandedKeys));
+    this._adapter.notifySearch(sugInput, Array.from(newFilteredExpandedKeys), filteredNodes);
     this._adapter.updateState({
       expandedKeys: newExpandedKeys,
       flattenNodes: newFlattenNodes,

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

@@ -76,6 +76,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
         getValue: (field?: string) => any;
         getValues: () => any;
         getFormState: () => FormState<any>;
+        getFormProps: (props?: Array<string>) => ComponentProps;
         getInitValue: (field: string) => any;
         getInitValues: () => any;
         getTouched: (field?: string) => boolean | Record<string, any>;

package/lib/es/form/foundation.js

@@ -590,6 +590,7 @@ export default class FormFoundation extends BaseFoundation {
         needClone: true
       }),
       getFormState: () => this.getFormState(true),
+      getFormProps: props => this.getFormProps(props),
       getInitValue: field => this.getInitValue(field),
       getInitValues: () => this.getInitValues(),
       getTouched: field => this.getTouched(field),

package/lib/es/modal/modalFoundation.d.ts

@@ -18,6 +18,7 @@ export interface ModalProps {
     cancelText?: string;
     centered?: boolean;
     className?: string;
+    modalContentClass?: string;
     closable?: boolean;
     confirmLoading?: boolean;
     cancelLoading?: boolean;

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

@@ -71,7 +71,11 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     handleClick(e: any): void;
     open(acInput?: string, originalOptions?: BasicOptionProps[]): void;
     toggle2SearchInput(isShow: boolean): void;
-    close(e?: any, closeCb?: () => void): void;
+    close(closeConfig?: {
+        event?: any;
+        closeCb?: () => void;
+        notToggleInput?: boolean;
+    }): void;
     onSelect(option: BasicOptionProps, optionIndex: number, event: MouseEvent | KeyboardEvent): void;
     _handleSingleSelect({ value, label, ...rest }: BasicOptionProps, event: any): void;
     _handleMultipleSelect({ value, label, ...rest }: BasicOptionProps, event: MouseEvent | KeyboardEvent): void;

package/lib/es/select/foundation.js

@@ -314,7 +314,9 @@ export default class SelectFoundation extends BaseFoundation {
       this.open();
       this._notifyFocus(e);
     } else if (isOpen && clickToHide) {
-      this.close(e);
+      this.close({
+        event: e
+      });
     } else if (isOpen && !clickToHide) {
       this.focusInput();
     }
@@ -339,7 +341,9 @@ export default class SelectFoundation extends BaseFoundation {
     this._adapter.notifyDropdownVisibleChange(true);
     this.bindKeyBoardEvent();
     this._adapter.registerClickOutsideHandler(e => {
-      this.close(e);
+      this.close({
+        event: e
+      });
       this._notifyBlur(e);
       this._adapter.updateFocusState(false);
     });
@@ -352,8 +356,13 @@ export default class SelectFoundation extends BaseFoundation {
       this._adapter.toggleInputShow(isShow, () => undefined);
     }
   }
-  close(e, closeCb) {
+  close(closeConfig) {
     // to support A11y, closing the panel trigger does not necessarily lose focus
+    const {
+      event,
+      closeCb,
+      notToggleInput
+    } = closeConfig || {};
     this._adapter.closeMenu();
     this._adapter.notifyDropdownVisibleChange(false);
     this._adapter.setIsFocusInContainer(false);
@@ -362,12 +371,13 @@ export default class SelectFoundation extends BaseFoundation {
     // this._adapter.updateFocusState(false);
     this._adapter.unregisterClickOutsideHandler();
     const isFilterable = this._isFilterable();
-    if (isFilterable) {
+    // notToggleInput will only be true when in controlled mode - handleSingeleSelect process
+    if (isFilterable && !notToggleInput) {
       this.toggle2SearchInput(false);
     }
     this._adapter.once('popoverClose', () => {
       if (isFilterable) {
-        this.clearInput(e);
+        this.clearInput(event);
       }
       if (closeCb) {
         closeCb();
@@ -410,17 +420,30 @@ export default class SelectFoundation extends BaseFoundation {
     // If it is a controlled component, directly notify
     // Make sure that the operations of updating updateOptions are done after the animation ends
     // otherwise the content will be updated when the popup layer is not collapsed, and it looks like it will flash once when it is closed
+    const isFilterable = this._isFilterable();
     if (this._isControlledComponent()) {
-      this.close(event, () => {
-        this._notifyChange(selections);
+      this.close({
+        event: event,
+        notToggleInput: true,
+        closeCb: () => {
+          // trigger props.onChange -> update props.value -> updateSelection
+          this._notifyChange(selections);
+          // make sure toggleSearchInput update after updateSelection in controlled mode, otherwise text in inactive DOM will update quicker than selection, looks like flash text
+          if (isFilterable) {
+            this.toggle2SearchInput(false);
+          }
+        }
       });
     } else {
       this._adapter.updateSelection(selections);
       // notify user
       this._notifyChange(selections);
-      this.close(event, () => {
-        // Update the selected item in the drop-down box
-        this.updateOptionsActiveStatus(selections);
+      this.close({
+        event: event,
+        closeCb: () => {
+          // Update the selected item in the drop-down box
+          this.updateOptionsActiveStatus(selections);
+        }
       });
     }
   }
@@ -720,7 +743,9 @@ export default class SelectFoundation extends BaseFoundation {
         this._handleEnterKeyDown(event);
         break;
       case KeyCode.ESC:
-        isOpen && this.close(event);
+        isOpen && this.close({
+          event: event
+        });
         filter && !multiple && this._focusTrigger();
         break;
       case KeyCode.TAB:
@@ -814,7 +839,9 @@ export default class SelectFoundation extends BaseFoundation {
         }
       } else {
         // there are no focusable elements inside the container, tab to next element and trigger blur
-        this.close(event);
+        this.close({
+          event: event
+        });
         this._notifyBlur(event);
       }
     } else {
@@ -833,7 +860,9 @@ export default class SelectFoundation extends BaseFoundation {
     } else if (activeElement === focusableElements[focusableElements.length - 1]) {
       // focus in the last element in container, focus back to trigger and close panel
       this._focusTrigger();
-      this.close(event);
+      this.close({
+        event
+      });
       handlePrevent(event);
     }
   }
@@ -842,7 +871,9 @@ export default class SelectFoundation extends BaseFoundation {
     const isFocusInContainer = this._adapter.getIsFocusInContainer();
     if (!isFocusInContainer) {
       // focus in trigger, close the panel, shift tab to previe element and trigger blur
-      this.close(event);
+      this.close({
+        event
+      });
       this._notifyBlur(event);
     } else if (activeElement === focusableElements[0]) {
       // focus in the first element in container, focus back to trigger
@@ -877,7 +908,9 @@ export default class SelectFoundation extends BaseFoundation {
           this.onSelect(selectedOption, focusIndex, event);
         }
       } else {
-        this.close(event);
+        this.close({
+          event
+        });
       }
     }
   }

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

@@ -69,7 +69,7 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize'
     renderSelectedItem?: BasicRenderSelectedItem;
     getPopupContainer?: () => HTMLElement;
     onBlur?: (e: any) => void;
-    onSearch?: (sunInput: string, filteredExpandedKeys: string[]) => void;
+    onSearch?: (sunInput: string, filteredExpandedKeys: string[], filteredNodes: BasicTreeNodeData[]) => void;
     onChange?: BasicOnChange;
     onFocus?: (e: any) => void;
     onVisibleChange?: (isVisible: boolean) => void;
@@ -90,7 +90,7 @@ export interface TreeSelectAdapter<P = Record<string, any>, S = Record<string, a
     rePositionDropdown: () => void;
     updateState: (states: Partial<BasicTreeSelectInnerData>) => void;
     notifySelect: (selectedKey: string, selected: boolean, selectedNode: BasicTreeNodeData) => void;
-    notifySearch: (input: string, filteredExpandedKeys: string[]) => void;
+    notifySearch: (input: string, filteredExpandedKeys: string[], filteredNodes: BasicTreeNodeData[]) => void;
     cacheFlattenNodes: (bool: boolean) => void;
     openMenu: () => void;
     closeMenu: (cb?: () => void) => void;

package/lib/es/treeSelect/foundation.js

@@ -468,6 +468,7 @@ export default class TreeSelectFoundation extends BaseFoundation {
     } = this.getProps();
     const realFilterProp = treeNodeFilterProp !== 'label' ? treeNodeFilterProp : _get(keyMaps, 'label', 'label');
     const newExpandedKeys = new Set(expandedKeys);
+    let filteredNodes = [];
     let filteredOptsKeys = [];
     let expandedOptsKeys = [];
     let newFlattenNodes = [];
@@ -477,19 +478,21 @@ export default class TreeSelectFoundation extends BaseFoundation {
       expandedOptsKeys.forEach(item => newExpandedKeys.add(item));
       newFlattenNodes = flattenTreeData(treeData, newExpandedKeys, keyMaps);
     } else {
-      filteredOptsKeys = Object.values(keyEntities).filter(item => {
+      const filteredOpts = Object.values(keyEntities).filter(item => {
         const {
           data
         } = item;
         return filter(sugInput, data, filterTreeNode, realFilterProp);
-      }).map(item => item.key);
+      });
+      filteredNodes = filteredOpts.map(item => item.data);
+      filteredOptsKeys = filteredOpts.map(item => item.key);
       expandedOptsKeys = findAncestorKeys(filteredOptsKeys, keyEntities, false);
       const shownChildKeys = findDescendantKeys(filteredOptsKeys, keyEntities, true);
       filteredShownKeys = new Set([...shownChildKeys, ...expandedOptsKeys]);
       newFlattenNodes = flattenTreeData(treeData, new Set(expandedOptsKeys), keyMaps, showFilteredOnly && filteredShownKeys);
     }
     const newFilteredExpandedKeys = new Set(expandedOptsKeys);
-    this._adapter.notifySearch(sugInput, Array.from(newFilteredExpandedKeys));
+    this._adapter.notifySearch(sugInput, Array.from(newFilteredExpandedKeys), filteredNodes);
     this._adapter.updateState({
       expandedKeys: newExpandedKeys,
       flattenNodes: newFlattenNodes,

package/modal/modalFoundation.ts

@@ -22,6 +22,7 @@ export interface ModalProps {
     cancelText?: string;
     centered?: boolean;
     className?: string;
+    modalContentClass?: string;
     closable?: boolean;
     confirmLoading?: boolean;
     cancelLoading?: boolean;

package/package.json

@@ -1,14 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.56.4-alpha.4",
+    "version": "2.57.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.56.4-alpha.4",
-        "@mdx-js/mdx": "^3.0.1",
+        "@douyinfe/semi-animation": "2.57.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",
@@ -16,7 +15,6 @@
         "fast-copy": "^3.0.1 ",
         "lodash": "^4.17.21",
         "memoize-one": "^5.2.1",
-        "remark-gfm": "^4.0.0",
         "scroll-into-view-if-needed": "^2.2.24"
     },
     "keywords": [],
@@ -26,12 +24,11 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "f73f819fa77d637dd93549b9205dfd690afff69e",
+    "gitHead": "416d798f9c062670475631c9ffce2172e7abfd60",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@types/lodash": "^4.14.176",
-        "@types/mdx": "^2.0.13",
         "babel-plugin-lodash": "^3.3.4",
         "del": "^6.0.0",
         "gulp": "^4.0.2",

package/select/foundation.ts

@@ -346,7 +346,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
             this.open();
             this._notifyFocus(e);
         } else if (isOpen && clickToHide) {
-            this.close(e);
+            this.close({ event: e });
         } else if (isOpen && !clickToHide) {
             this.focusInput();
         }
@@ -374,7 +374,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         this.bindKeyBoardEvent();
 
         this._adapter.registerClickOutsideHandler((e: MouseEvent) => {
-            this.close(e);
+            this.close({ event: e });
             this._notifyBlur(e);
             this._adapter.updateFocusState(false);
         });
@@ -389,9 +389,9 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         }
     }
 
-    close(e?: any, closeCb?: () => void) {
+    close(closeConfig?: { event?: any; closeCb?: () => void; notToggleInput?: boolean }) {
         // to support A11y, closing the panel trigger does not necessarily lose focus
-
+        const { event, closeCb, notToggleInput } = closeConfig || {};
         this._adapter.closeMenu();
         this._adapter.notifyDropdownVisibleChange(false);
         this._adapter.setIsFocusInContainer(false);
@@ -401,13 +401,14 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         this._adapter.unregisterClickOutsideHandler();
 
         const isFilterable = this._isFilterable();
-        if (isFilterable) {
+        // notToggleInput will only be true when in controlled mode - handleSingeleSelect process
+        if (isFilterable && !notToggleInput) {
             this.toggle2SearchInput(false);
         }
 
         this._adapter.once('popoverClose', () => {
             if (isFilterable) {
-                this.clearInput(e);
+                this.clearInput(event);
             }
             if (closeCb) {
                 closeCb();
@@ -443,18 +444,32 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         // If it is a controlled component, directly notify
         // Make sure that the operations of updating updateOptions are done after the animation ends
         // otherwise the content will be updated when the popup layer is not collapsed, and it looks like it will flash once when it is closed
+        const isFilterable = this._isFilterable();
+
         if (this._isControlledComponent()) {
-            this.close(event, () => {
-                this._notifyChange(selections);
+            this.close({ 
+                event: event,
+                notToggleInput: true,
+                closeCb: () => {
+                    // trigger props.onChange -> update props.value -> updateSelection
+                    this._notifyChange(selections);
+                    // make sure toggleSearchInput update after updateSelection in controlled mode, otherwise text in inactive DOM will update quicker than selection, looks like flash text
+                    if (isFilterable) {
+                        this.toggle2SearchInput(false);
+                    }
+                }
             });
         } else {
             this._adapter.updateSelection(selections);
             // notify user
             this._notifyChange(selections);
 
-            this.close(event, () => {
-                // Update the selected item in the drop-down box
-                this.updateOptionsActiveStatus(selections);
+            this.close({
+                event: event,
+                closeCb: () => {
+                    // Update the selected item in the drop-down box
+                    this.updateOptionsActiveStatus(selections);
+                },
             });
         }
     }
@@ -730,7 +745,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
                 this._handleEnterKeyDown(event);
                 break;
             case KeyCode.ESC:
-                isOpen && this.close(event);
+                isOpen && this.close({ event: event });
                 filter && !multiple && this._focusTrigger();
                 break;
             case KeyCode.TAB:
@@ -822,7 +837,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
                 }
             } else {
                 // there are no focusable elements inside the container, tab to next element and trigger blur
-                this.close(event);
+                this.close({ event: event });
                 this._notifyBlur(event);
             }
         } else {
@@ -842,7 +857,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         } else if (activeElement === focusableElements[focusableElements.length - 1]) {
             // focus in the last element in container, focus back to trigger and close panel
             this._focusTrigger(); 
-            this.close(event);
+            this.close({ event });
             handlePrevent(event);
         }
     }
@@ -853,7 +868,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
 
         if (!isFocusInContainer) {
             // focus in trigger, close the panel, shift tab to previe element and trigger blur
-            this.close(event);
+            this.close({ event });
             this._notifyBlur(event);
         } else if (activeElement === focusableElements[0]) {
             // focus in the first element in container, focus back to trigger
@@ -883,7 +898,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
                     this.onSelect(selectedOption, focusIndex, event);
                 }
             } else {
-                this.close(event);
+                this.close({ event });
             }
         }
     }

package/treeSelect/foundation.ts

@@ -139,7 +139,7 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps,
     getPopupContainer?: () => HTMLElement;
     // triggerRender?: (props: BasicTriggerRenderProps) => any;
     onBlur?: (e: any) => void;
-    onSearch?: (sunInput: string, filteredExpandedKeys: string[]) => void;
+    onSearch?: (sunInput: string, filteredExpandedKeys: string[], filteredNodes: BasicTreeNodeData[]) => void;
     onChange?: BasicOnChange;
     onFocus?: (e: any) => void;
     onVisibleChange?: (isVisible: boolean) => void;
@@ -183,7 +183,7 @@ export interface TreeSelectAdapter<P = Record<string, any>, S = Record<string, a
     rePositionDropdown: () => void;
     updateState: (states: Partial<BasicTreeSelectInnerData>) => void;
     notifySelect: (selectedKey: string, selected: boolean, selectedNode: BasicTreeNodeData) => void;
-    notifySearch: (input: string, filteredExpandedKeys: string[]) => void;
+    notifySearch: (input: string, filteredExpandedKeys: string[], filteredNodes: BasicTreeNodeData[]) => void;
     cacheFlattenNodes: (bool: boolean) => void;
     openMenu: () => void;
     closeMenu: (cb?: () => void) => void;
@@ -613,6 +613,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         const { showFilteredOnly, filterTreeNode, treeNodeFilterProp, keyMaps } = this.getProps();
         const realFilterProp = treeNodeFilterProp !== 'label' ? treeNodeFilterProp : get(keyMaps, 'label', 'label');
         const newExpandedKeys: Set<string> = new Set(expandedKeys);
+        let filteredNodes: BasicTreeNodeData[] = [];
         let filteredOptsKeys: string[] = [];
         let expandedOptsKeys = [];
         let newFlattenNodes = [];
@@ -622,19 +623,20 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
             expandedOptsKeys.forEach(item => newExpandedKeys.add(item));
             newFlattenNodes = flattenTreeData(treeData, newExpandedKeys, keyMaps);
         } else {
-            filteredOptsKeys = Object.values(keyEntities)
+            const filteredOpts = Object.values(keyEntities)
                 .filter((item: BasicKeyEntity) => {
                     const { data } = item;
                     return filter(sugInput, data, filterTreeNode, realFilterProp);
-                })
-                .map((item: BasicKeyEntity) => item.key);
+                });
+            filteredNodes = filteredOpts.map((item: BasicKeyEntity) => item.data);
+            filteredOptsKeys = filteredOpts.map((item: BasicKeyEntity) => item.key);
             expandedOptsKeys = findAncestorKeys(filteredOptsKeys, keyEntities, false);
             const shownChildKeys = findDescendantKeys(filteredOptsKeys, keyEntities, true);
             filteredShownKeys = new Set([...shownChildKeys, ...expandedOptsKeys]);
             newFlattenNodes = flattenTreeData(treeData, new Set(expandedOptsKeys), keyMaps, showFilteredOnly && filteredShownKeys);
         }
         const newFilteredExpandedKeys = new Set(expandedOptsKeys);
-        this._adapter.notifySearch(sugInput, Array.from(newFilteredExpandedKeys));
+        this._adapter.notifySearch(sugInput, Array.from(newFilteredExpandedKeys), filteredNodes);
         this._adapter.updateState({
             expandedKeys: newExpandedKeys,
             flattenNodes: newFlattenNodes,

package/lib/cjs/markdownRender/constants.d.ts

@@ -1,5 +0,0 @@
-declare const cssClasses: {
-    PREFIX: string;
-};
-declare const strings: {};
-export { cssClasses, strings };

package/lib/cjs/markdownRender/constants.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.strings = exports.cssClasses = void 0;
-var _constants = require("../base/constants");
-const cssClasses = {
-  PREFIX: `${_constants.BASE_CLASS_PREFIX}-markdownRender`
-};
-exports.cssClasses = cssClasses;
-const strings = {};
-exports.strings = strings;

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

@@ -1,20 +0,0 @@
-import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { MDXProps } from 'mdx/types';
-export interface MarkdownRenderAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    getRuntime: () => any;
-}
-export interface MarkdownRenderBaseProps {
-    raw: string;
-    components: MDXProps['components'];
-    format: "md" | "mdx";
-}
-export interface MarkdownRenderBaseState {
-    MDXContentComponent: any;
-}
-declare class MarkdownRenderFoundation extends BaseFoundation<MarkdownRenderAdapter> {
-    private getOptions;
-    compile: (mdxRaw: string) => Promise<import("vfile").VFile>;
-    evaluate: (mdxRaw: string) => Promise<import("mdx/types").MDXContent>;
-    evaluateSync: (mdxRaw: string) => import("mdx/types").MDXContent;
-}
-export default MarkdownRenderFoundation;

package/lib/cjs/markdownRender/foundation.js

@@ -1,65 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _foundation = _interopRequireDefault(require("../base/foundation"));
-var _mdx = require("@mdx-js/mdx");
-var _remarkGfm = _interopRequireDefault(require("remark-gfm"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-class MarkdownRenderFoundation extends _foundation.default {
-  constructor() {
-    super(...arguments);
-    this.getOptions = () => {
-      return {
-        evaluateOptions: {
-          remarkPlugins: [_remarkGfm.default],
-          format: this.getProp("format")
-        },
-        compileOptions: {
-          format: this.getProp("format")
-        },
-        runOptions: {}
-      };
-    };
-    this.compile = mdxRaw => __awaiter(this, void 0, void 0, function* () {
-      return yield (0, _mdx.compile)(mdxRaw, this.getOptions().compileOptions);
-    });
-    this.evaluate = mdxRaw => __awaiter(this, void 0, void 0, function* () {
-      return (yield (0, _mdx.evaluate)(mdxRaw, Object.assign(Object.assign(Object.assign({}, this.getOptions().runOptions), this.getOptions().evaluateOptions), this._adapter.getRuntime()))).default;
-    });
-    this.evaluateSync = mdxRaw => {
-      return (0, _mdx.evaluateSync)(mdxRaw, Object.assign(Object.assign(Object.assign({}, this.getOptions().runOptions), this.getOptions().evaluateOptions), this._adapter.getRuntime())).default;
-    };
-  }
-}
-var _default = MarkdownRenderFoundation;
-exports.default = _default;

package/lib/cjs/markdownRender/markdownRender.css

@@ -1,26 +0,0 @@
-/* shadow */
-/* sizing */
-/* spacing */
-.semi-markdownRender ul, .semi-markdownRender li {
-  color: var(--semi-color-text-0);
-}
-.semi-markdownRender-component-image {
-  margin: 16px 16px 16px 16px;
-  max-width: 50%;
-  max-height: 500px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.semi-markdownRender-component-image-alt {
-  margin-top: 8px;
-  text-align: center;
-  color: var(--semi-color-tertiary);
-}
-.semi-markdownRender .semi-markdownRender-component-header {
-  margin-top: 16px;
-  margin-bottom: 16px;
-}
-.semi-markdownRender-component-p strong {
-  font-weight: 600;
-}

package/lib/cjs/markdownRender/markdownRender.scss

@@ -1,38 +0,0 @@
-@import "./variables.scss";
-
-$module: #{$prefix}-markdownRender;
-
-.#{$module} {
-
-    ul, li {
-        color: $color-markdownRender_component_list
-    }
-
-    &-component-image {
-        margin: $spacing-markdownRender_component_image-marginTop $spacing-markdownRender_component_image-marginRight $spacing-markdownRender_component_image-marginBottom $spacing-markdownRender_component_image-marginLeft;
-        max-width: $width-markdownRender_component_image-maxWidth;
-        max-height: $width-markdownRender_component_image-maxHeight;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-
-        &-alt {
-            margin-top: $spacing-markdownRender_component_image_alt-marginTop;
-            text-align: center;
-            color: $color-markdownRender_component_image_alt;
-        }
-    }
-
-    & &-component-header {
-        margin-top: $spacing-markdownRender_component_header-marginTop;
-        margin-bottom: $spacing-markdownRender_component_header-marginBottom;
-    }
-
-    &-component-p {
-        strong {
-            font-weight: $font-weight-bold;
-        }
-    }
-
-
-}

package/lib/cjs/markdownRender/variables.scss

@@ -1,15 +0,0 @@
-$spacing-markdownRender_component_image-marginLeft: 16px;
-$spacing-markdownRender_component_image-marginRight: 16px;
-$spacing-markdownRender_component_image-marginTop: 16px;
-$spacing-markdownRender_component_image-marginBottom: 16px;
-$width-markdownRender_component_image-maxWidth: 50%;
-$width-markdownRender_component_image-maxHeight: 500px;
-$spacing-markdownRender_component_image_alt-marginTop: 8px;
-
-
-$spacing-markdownRender_component_header-marginTop: 16px;
-$spacing-markdownRender_component_header-marginBottom: 16px;
-
-
-$color-markdownRender_component_list: var(--semi-color-text-0);
-$color-markdownRender_component_image_alt: var(--semi-color-tertiary);

package/lib/es/markdownRender/constants.d.ts

@@ -1,5 +0,0 @@
-declare const cssClasses: {
-    PREFIX: string;
-};
-declare const strings: {};
-export { cssClasses, strings };

package/lib/es/markdownRender/constants.js

@@ -1,6 +0,0 @@
-import { BASE_CLASS_PREFIX } from '../base/constants';
-const cssClasses = {
-  PREFIX: `${BASE_CLASS_PREFIX}-markdownRender`
-};
-const strings = {};
-export { cssClasses, strings };

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

@@ -1,20 +0,0 @@
-import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { MDXProps } from 'mdx/types';
-export interface MarkdownRenderAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    getRuntime: () => any;
-}
-export interface MarkdownRenderBaseProps {
-    raw: string;
-    components: MDXProps['components'];
-    format: "md" | "mdx";
-}
-export interface MarkdownRenderBaseState {
-    MDXContentComponent: any;
-}
-declare class MarkdownRenderFoundation extends BaseFoundation<MarkdownRenderAdapter> {
-    private getOptions;
-    compile: (mdxRaw: string) => Promise<import("vfile").VFile>;
-    evaluate: (mdxRaw: string) => Promise<import("mdx/types").MDXContent>;
-    evaluateSync: (mdxRaw: string) => import("mdx/types").MDXContent;
-}
-export default MarkdownRenderFoundation;

package/lib/es/markdownRender/foundation.js

@@ -1,57 +0,0 @@
-var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-import BaseFoundation from '../base/foundation';
-import { evaluate, compile, evaluateSync } from '@mdx-js/mdx';
-import remarkGfm from 'remark-gfm';
-class MarkdownRenderFoundation extends BaseFoundation {
-  constructor() {
-    super(...arguments);
-    this.getOptions = () => {
-      return {
-        evaluateOptions: {
-          remarkPlugins: [remarkGfm],
-          format: this.getProp("format")
-        },
-        compileOptions: {
-          format: this.getProp("format")
-        },
-        runOptions: {}
-      };
-    };
-    this.compile = mdxRaw => __awaiter(this, void 0, void 0, function* () {
-      return yield compile(mdxRaw, this.getOptions().compileOptions);
-    });
-    this.evaluate = mdxRaw => __awaiter(this, void 0, void 0, function* () {
-      return (yield evaluate(mdxRaw, Object.assign(Object.assign(Object.assign({}, this.getOptions().runOptions), this.getOptions().evaluateOptions), this._adapter.getRuntime()))).default;
-    });
-    this.evaluateSync = mdxRaw => {
-      return evaluateSync(mdxRaw, Object.assign(Object.assign(Object.assign({}, this.getOptions().runOptions), this.getOptions().evaluateOptions), this._adapter.getRuntime())).default;
-    };
-  }
-}
-export default MarkdownRenderFoundation;

package/lib/es/markdownRender/markdownRender.css

@@ -1,26 +0,0 @@
-/* shadow */
-/* sizing */
-/* spacing */
-.semi-markdownRender ul, .semi-markdownRender li {
-  color: var(--semi-color-text-0);
-}
-.semi-markdownRender-component-image {
-  margin: 16px 16px 16px 16px;
-  max-width: 50%;
-  max-height: 500px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.semi-markdownRender-component-image-alt {
-  margin-top: 8px;
-  text-align: center;
-  color: var(--semi-color-tertiary);
-}
-.semi-markdownRender .semi-markdownRender-component-header {
-  margin-top: 16px;
-  margin-bottom: 16px;
-}
-.semi-markdownRender-component-p strong {
-  font-weight: 600;
-}

package/lib/es/markdownRender/markdownRender.scss

@@ -1,38 +0,0 @@
-@import "./variables.scss";
-
-$module: #{$prefix}-markdownRender;
-
-.#{$module} {
-
-    ul, li {
-        color: $color-markdownRender_component_list
-    }
-
-    &-component-image {
-        margin: $spacing-markdownRender_component_image-marginTop $spacing-markdownRender_component_image-marginRight $spacing-markdownRender_component_image-marginBottom $spacing-markdownRender_component_image-marginLeft;
-        max-width: $width-markdownRender_component_image-maxWidth;
-        max-height: $width-markdownRender_component_image-maxHeight;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-
-        &-alt {
-            margin-top: $spacing-markdownRender_component_image_alt-marginTop;
-            text-align: center;
-            color: $color-markdownRender_component_image_alt;
-        }
-    }
-
-    & &-component-header {
-        margin-top: $spacing-markdownRender_component_header-marginTop;
-        margin-bottom: $spacing-markdownRender_component_header-marginBottom;
-    }
-
-    &-component-p {
-        strong {
-            font-weight: $font-weight-bold;
-        }
-    }
-
-
-}

package/lib/es/markdownRender/variables.scss

@@ -1,15 +0,0 @@
-$spacing-markdownRender_component_image-marginLeft: 16px;
-$spacing-markdownRender_component_image-marginRight: 16px;
-$spacing-markdownRender_component_image-marginTop: 16px;
-$spacing-markdownRender_component_image-marginBottom: 16px;
-$width-markdownRender_component_image-maxWidth: 50%;
-$width-markdownRender_component_image-maxHeight: 500px;
-$spacing-markdownRender_component_image_alt-marginTop: 8px;
-
-
-$spacing-markdownRender_component_header-marginTop: 16px;
-$spacing-markdownRender_component_header-marginBottom: 16px;
-
-
-$color-markdownRender_component_list: var(--semi-color-text-0);
-$color-markdownRender_component_image_alt: var(--semi-color-tertiary);

package/markdownRender/constants.ts

@@ -1,11 +0,0 @@
-import { BASE_CLASS_PREFIX } from '../base/constants';
-
-const cssClasses = {
-    PREFIX: `${BASE_CLASS_PREFIX}-markdownRender`,
-};
-
-const strings = {
-
-};
-
-export { cssClasses, strings };

package/markdownRender/foundation.ts

@@ -1,69 +0,0 @@
-import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { CompileOptions, evaluate, compile, EvaluateOptions, evaluateSync, RunOptions } from '@mdx-js/mdx';
-import { MDXProps } from 'mdx/types';
-import remarkGfm from 'remark-gfm';
-export interface MarkdownRenderAdapter <P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    getRuntime: () => any
-
-}
-
-
-
-
-export interface MarkdownRenderBaseProps{
-    raw: string;
-    components: MDXProps['components'];
-    format: "md"|"mdx"
-}
-
-
-export interface MarkdownRenderBaseState{
-    MDXContentComponent: any
-}
-
-class MarkdownRenderFoundation extends BaseFoundation<MarkdownRenderAdapter> {
-
-    private getOptions = ()=>{
-        return {
-            evaluateOptions: {
-                remarkPlugins: [remarkGfm],
-                format: this.getProp("format")
-            },
-            compileOptions: {
-                format: this.getProp("format")
-            },
-            runOptions: {
-            }
-        } as {
-            evaluateOptions: EvaluateOptions;
-            compileOptions: CompileOptions;
-            runOptions: RunOptions
-        };
-    }
-
-    compile = async (mdxRaw: string)=>{
-        return await compile(mdxRaw, this.getOptions().compileOptions);
-    }
-
-    evaluate = async (mdxRaw: string)=>{
-        return (await evaluate(mdxRaw, {
-            ...this.getOptions().runOptions,
-            ...this.getOptions().evaluateOptions,
-            ...this._adapter.getRuntime()
-        })).default;
-    }
-
-    evaluateSync = (mdxRaw: string)=>{
-        return ( evaluateSync(mdxRaw, {
-            ...this.getOptions().runOptions,
-            ...this.getOptions().evaluateOptions,
-            ...this._adapter.getRuntime()
-        })).default;
-    }
-
-
-
-}
-
-export default MarkdownRenderFoundation;
-

package/markdownRender/markdownRender.scss

@@ -1,38 +0,0 @@
-@import "./variables.scss";
-
-$module: #{$prefix}-markdownRender;
-
-.#{$module} {
-
-    ul, li {
-        color: $color-markdownRender_component_list
-    }
-
-    &-component-image {
-        margin: $spacing-markdownRender_component_image-marginTop $spacing-markdownRender_component_image-marginRight $spacing-markdownRender_component_image-marginBottom $spacing-markdownRender_component_image-marginLeft;
-        max-width: $width-markdownRender_component_image-maxWidth;
-        max-height: $width-markdownRender_component_image-maxHeight;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-
-        &-alt {
-            margin-top: $spacing-markdownRender_component_image_alt-marginTop;
-            text-align: center;
-            color: $color-markdownRender_component_image_alt;
-        }
-    }
-
-    & &-component-header {
-        margin-top: $spacing-markdownRender_component_header-marginTop;
-        margin-bottom: $spacing-markdownRender_component_header-marginBottom;
-    }
-
-    &-component-p {
-        strong {
-            font-weight: $font-weight-bold;
-        }
-    }
-
-
-}

package/markdownRender/variables.scss

@@ -1,15 +0,0 @@
-$spacing-markdownRender_component_image-marginLeft: 16px;
-$spacing-markdownRender_component_image-marginRight: 16px;
-$spacing-markdownRender_component_image-marginTop: 16px;
-$spacing-markdownRender_component_image-marginBottom: 16px;
-$width-markdownRender_component_image-maxWidth: 50%;
-$width-markdownRender_component_image-maxHeight: 500px;
-$spacing-markdownRender_component_image_alt-marginTop: 8px;
-
-
-$spacing-markdownRender_component_header-marginTop: 16px;
-$spacing-markdownRender_component_header-marginBottom: 16px;
-
-
-$color-markdownRender_component_list: var(--semi-color-text-0);
-$color-markdownRender_component_image_alt: var(--semi-color-tertiary);