@douyinfe/semi-foundation 2.56.4-alpha.5 → 2.57.0

package/banner/banner.scss

@@ -20,7 +20,6 @@ $module: #{$prefix}-banner;
         .#{$module}-content {
             display: flex;
             flex: 1;
-            align-items: top;
         }
     }
 

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/input/foundation.ts

@@ -40,10 +40,6 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
         super({ ...InputFoundation.inputDefaultAdapter, ...adapter });
     }
 
-    init() {
-        this._setInitValue();
-    }
-
     destroy() {
         if (this._timer) {
             clearTimeout(this._timer);
@@ -53,16 +49,6 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
 
     setDisable() {}
 
-    _setInitValue() {
-        const { defaultValue, value } = this.getProps();
-        let v = defaultValue;
-        if (this._isControlledComponent()) {
-            v = value;
-        }
-        this._adapter.setValue(v);
-    // this.checkAllowClear(v);
-    }
-
     setValue(value: any) {
         this._adapter.setValue(value);
     }

package/input/textareaFoundation.ts

@@ -48,24 +48,8 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
         });
     }
 
-    init() {
-        this.setInitValue();
-    }
-
     destroy() { }
 
-    setInitValue() {
-        const {
-            defaultValue,
-            value
-        } = this.getProps();
-        let v = defaultValue;
-        if (this._isControlledComponent()) {
-            v = value;
-        }
-        this._adapter.setValue(v);
-    }
-
     handleValueChange(v: string) {
         this._adapter.setValue(v);
     }

package/lib/cjs/banner/banner.css

@@ -14,7 +14,6 @@
 .semi-banner .semi-banner-content-wrapper .semi-banner-content {
   display: flex;
   flex: 1;
-  align-items: top;
 }
 .semi-banner-in-container {
   border-radius: var(--semi-border-radius-small);

package/lib/cjs/banner/banner.scss

@@ -20,7 +20,6 @@ $module: #{$prefix}-banner;
         .#{$module}-content {
             display: flex;
             flex: 1;
-            align-items: top;
         }
     }
 

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/input/foundation.d.ts

@@ -25,10 +25,8 @@ declare class InputFoundation extends BaseFoundation<InputAdapter> {
     };
     _timer: number | null;
     constructor(adapter: InputAdapter);
-    init(): void;
     destroy(): void;
     setDisable(): void;
-    _setInitValue(): void;
     setValue(value: any): void;
     handleChange(value: any, e: any): void;
     /**

package/lib/cjs/input/foundation.js

@@ -25,9 +25,6 @@ class InputFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, InputFoundation.inputDefaultAdapter), adapter));
   }
-  init() {
-    this._setInitValue();
-  }
   destroy() {
     if (this._timer) {
       clearTimeout(this._timer);
@@ -35,19 +32,6 @@ class InputFoundation extends _foundation.default {
     }
   }
   setDisable() {}
-  _setInitValue() {
-    const {
-      defaultValue,
-      value
-    } = this.getProps();
-    let v = defaultValue;
-    if (this._isControlledComponent()) {
-      v = value;
-    }
-    this._adapter.setValue(v);
-    // this.checkAllowClear(v);
-  }
-
   setValue(value) {
     this._adapter.setValue(value);
   }

package/lib/cjs/input/textareaFoundation.d.ts

@@ -28,9 +28,7 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
         notifyEnterPress: (...args: any[]) => void;
     };
     constructor(adapter: TextAreaAdapter);
-    init(): void;
     destroy(): void;
-    setInitValue(): void;
     handleValueChange(v: string): void;
     handleChange(value: string, e: any): void;
     /**

package/lib/cjs/input/textareaFoundation.js

@@ -50,21 +50,7 @@ class TextAreaFoundation extends _foundation.default {
       }
     };
   }
-  init() {
-    this.setInitValue();
-  }
   destroy() {}
-  setInitValue() {
-    const {
-      defaultValue,
-      value
-    } = this.getProps();
-    let v = defaultValue;
-    if (this._isControlledComponent()) {
-      v = value;
-    }
-    this._adapter.setValue(v);
-  }
   handleValueChange(v) {
     this._adapter.setValue(v);
   }

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/overflowList/constants.d.ts

@@ -2,7 +2,7 @@ declare const cssClasses: {
     PREFIX: string;
 };
 declare const strings: {
-    BOUNDARY_SET: ("start" | "end")[];
+    BOUNDARY_SET: ("end" | "start")[];
     POSITION_SET: string[];
     MODE_SET: string[];
     MODE_MAP: {

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/tooltip/foundation.d.ts

@@ -73,6 +73,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     _expandPos(position: string, concatPos: string): string;
     _reducePos(position?: string): string;
     clearDelayTimer(): void;
+    updateStateIfCursorOnTrigger: (trigger: HTMLElement) => void;
     _generateEvent(types: ArrayElement<typeof strings.TRIGGER_SET>): {
         triggerEventSet: {
             [x: string]: (event: any) => void;

package/lib/cjs/tooltip/foundation.js

@@ -34,6 +34,14 @@ class Tooltip extends _foundation.default {
     this.setDisplayNone = (displayNone, cb) => {
       this._adapter.setDisplayNone(displayNone, cb);
     };
+    this.updateStateIfCursorOnTrigger = trigger => {
+      var _a, _b;
+      if ((_a = trigger === null || trigger === void 0 ? void 0 : trigger.matches) === null || _a === void 0 ? void 0 : _a.call(trigger, ":hover")) {
+        const eventNames = this._adapter.getEventName();
+        const triggerEventSet = this.getState("triggerEventSet");
+        (_b = triggerEventSet[eventNames.mouseEnter]) === null || _b === void 0 ? void 0 : _b.call(triggerEventSet);
+      }
+    };
     this.onResize = () => {
       // this.log('resize');
       // rePosition when window resize

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

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

package/lib/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/banner/banner.css

@@ -14,7 +14,6 @@
 .semi-banner .semi-banner-content-wrapper .semi-banner-content {
   display: flex;
   flex: 1;
-  align-items: top;
 }
 .semi-banner-in-container {
   border-radius: var(--semi-border-radius-small);

package/lib/es/banner/banner.scss

@@ -20,7 +20,6 @@ $module: #{$prefix}-banner;
         .#{$module}-content {
             display: flex;
             flex: 1;
-            align-items: top;
         }
     }
 

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/input/foundation.d.ts

@@ -25,10 +25,8 @@ declare class InputFoundation extends BaseFoundation<InputAdapter> {
     };
     _timer: number | null;
     constructor(adapter: InputAdapter);
-    init(): void;
     destroy(): void;
     setDisable(): void;
-    _setInitValue(): void;
     setValue(value: any): void;
     handleChange(value: any, e: any): void;
     /**

package/lib/es/input/foundation.js

@@ -18,9 +18,6 @@ class InputFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, InputFoundation.inputDefaultAdapter), adapter));
   }
-  init() {
-    this._setInitValue();
-  }
   destroy() {
     if (this._timer) {
       clearTimeout(this._timer);
@@ -28,19 +25,6 @@ class InputFoundation extends BaseFoundation {
     }
   }
   setDisable() {}
-  _setInitValue() {
-    const {
-      defaultValue,
-      value
-    } = this.getProps();
-    let v = defaultValue;
-    if (this._isControlledComponent()) {
-      v = value;
-    }
-    this._adapter.setValue(v);
-    // this.checkAllowClear(v);
-  }
-
   setValue(value) {
     this._adapter.setValue(value);
   }

package/lib/es/input/textareaFoundation.d.ts

@@ -28,9 +28,7 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
         notifyEnterPress: (...args: any[]) => void;
     };
     constructor(adapter: TextAreaAdapter);
-    init(): void;
     destroy(): void;
-    setInitValue(): void;
     handleValueChange(v: string): void;
     handleChange(value: string, e: any): void;
     /**

package/lib/es/input/textareaFoundation.js

@@ -43,21 +43,7 @@ export default class TextAreaFoundation extends BaseFoundation {
       }
     };
   }
-  init() {
-    this.setInitValue();
-  }
   destroy() {}
-  setInitValue() {
-    const {
-      defaultValue,
-      value
-    } = this.getProps();
-    let v = defaultValue;
-    if (this._isControlledComponent()) {
-      v = value;
-    }
-    this._adapter.setValue(v);
-  }
   handleValueChange(v) {
     this._adapter.setValue(v);
   }

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/overflowList/constants.d.ts

@@ -2,7 +2,7 @@ declare const cssClasses: {
     PREFIX: string;
 };
 declare const strings: {
-    BOUNDARY_SET: ("start" | "end")[];
+    BOUNDARY_SET: ("end" | "start")[];
     POSITION_SET: string[];
     MODE_SET: string[];
     MODE_MAP: {

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;