@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/treeSelect/foundation.ts

@@ -1,4 +1,4 @@
-import { isNumber, isFunction, get, isUndefined, isString, cloneDeep, isEmpty, difference } from 'lodash';
+import { isNumber, isFunction, get, isUndefined, isString, isEmpty, difference } from 'lodash';
 import { strings } from '../treeSelect/constants';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import {
@@ -47,7 +47,9 @@ export interface BasicTriggerRenderProps {
     inputValue: string;
     placeholder: string;
     value: BasicTreeNodeData[];
-    onClear: (e: any) => void
+    onClear: (e: any) => void;
+    onSearch: (inputValue: string) => void;
+    onRemove: (key: string) => void
 }
 
 export type BasicOnChangeWithObject = (node: BasicTreeNodeData[] | BasicTreeNodeData, e: any) => void;
@@ -95,7 +97,9 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps,
 | 'disableStrictly'
 | 'aria-label'
 | 'checkRelation'
+| 'preventScroll'
 > {
+    borderless?: boolean;
     motion?: Motion;
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;
@@ -127,8 +131,9 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps,
     loadedKeys?: string[];
     showRestTagsPopover?: boolean;
     restTagsPopoverProps?: any;
+    clickTriggerToHide?: boolean;
     loadData?: (data: BasicTreeNodeData) => Promise<void>;
-    onSelect?: (selectedKeys: string, selected: boolean, selectedNode: BasicTreeNodeData) => void;
+    onSelect?: (selectedKey: string, selected: boolean, selectedNode: BasicTreeNodeData) => void;
     searchRender?: (inputProps: any) => any;
     renderSelectedItem?: BasicRenderSelectedItem;
     getPopupContainer?: () => HTMLElement;
@@ -145,6 +150,7 @@ export interface BasicTreeSelectInnerData extends Pick<BasicTreeInnerData,
 'keyEntities'
 | 'treeData'
 | 'flattenNodes'
+| 'cachedFlattenNodes'
 | 'selectedKeys'
 | 'checkedKeys'
 | 'halfCheckedKeys'
@@ -163,7 +169,7 @@ export interface BasicTreeSelectInnerData extends Pick<BasicTreeInnerData,
 > {
     inputTriggerFocus: boolean;
     isOpen: boolean;
-    isInput: boolean;
+    // isInput: boolean;
     rePosKey: number;
     dropdownMinWidth: null | number;
     isHovering: boolean;
@@ -176,13 +182,14 @@ export interface TreeSelectAdapter<P = Record<string, any>, S = Record<string, a
     unregisterClickOutsideHandler: () => void;
     rePositionDropdown: () => void;
     updateState: (states: Partial<BasicTreeSelectInnerData>) => void;
-    notifySelect: (selectedKeys: string, selected: boolean, selectedNode: BasicTreeNodeData) => void;
+    notifySelect: (selectedKey: string, selected: boolean, selectedNode: BasicTreeNodeData) => void;
     notifySearch: (input: string, filteredExpandedKeys: string[]) => void;
     cacheFlattenNodes: (bool: boolean) => void;
     openMenu: () => void;
     closeMenu: (cb?: () => void) => void;
     getTriggerWidth: () => boolean | number;
     setOptionWrapperWidth: (width: null | number) => void;
+    notifyClear: (e: any) => void;
     notifyChange: BasicOnChangeWithBasic;
     notifyChangeWithObject: BasicOnChangeWithObject;
     notifyExpand: (expandedKeys: Set<string>, expandedOtherProps: BasicExpandedOtherProps) => void;
@@ -191,10 +198,10 @@ export interface TreeSelectAdapter<P = Record<string, any>, S = Record<string, a
     toggleHovering: (bool: boolean) => void;
     notifyLoad: (newLoadedKeys: Set<string>, data: BasicTreeNodeData) => void;
     updateInputFocus: (bool: boolean) => void;
-    updateLoadKeys: (data: BasicTreeNodeData, resolve: (value?: any) => void) => void
+    updateLoadKeys: (data: BasicTreeNodeData, resolve: (value?: any) => void) => void;
+    updateIsFocus: (bool: boolean) => void
 }
 
-// eslint-disable-next-line max-len
 export default class TreeSelectFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TreeSelectAdapter<P, S>, P, S> {
 
     constructor(adapter: TreeSelectAdapter<P, S>) {
@@ -210,6 +217,9 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         if (isOpen) {
             this.open();
         }
+        if (triggerSearchAutoFocus) {
+            this.handleTriggerFocus(null);
+        }
     }
 
     destroy() {
@@ -262,12 +272,38 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         return Boolean(inputValue) && showFilteredOnly;
     }
 
-    getCopyFromState(items: string | string[]) {
-        const res = {};
-        normalizedArr(items).forEach(key => {
-            res[key] = cloneDeep(this.getState(key));
+    findDataForValue(findValue: string) {
+        const { value, defaultValue, keyMaps } = this.getProps();
+        const realValueName = get(keyMaps, 'value', 'value');
+        const realKeyName = get(keyMaps, 'key', 'key');
+        let valueArr = [];
+        if (value) {
+            valueArr = Array.isArray(value) ? value : [value];
+        } else if (defaultValue) {
+            valueArr = Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+        }
+        return valueArr.find(item => {
+            return item[realValueName] === findValue || item[realKeyName] === findValue;
         });
-        return res as BasicTreeInnerData;
+    }
+
+    constructDataForValue(value: string) {
+        const { treeNodeLabelProp, keyMaps } = this.getProps();
+        const keyName = get(keyMaps, 'key', 'key');
+        const labelName = get(keyMaps, 'label', treeNodeLabelProp);
+        return {
+            [keyName]: value,
+            [labelName]: value
+        };    
+    }
+
+    getDataForKeyNotInKeyEntities(value: string) {
+        const { onChangeWithObject } = this.getProps();
+        if (onChangeWithObject) {
+            return this.findDataForValue(value);
+        } else {
+            return this.constructDataForValue(value);
+        }
     }
 
     getTreeNodeProps(key: string) {
@@ -304,9 +340,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         const isSearching = Boolean(inputValue);
         const treeNodeProps: BasicTreeNodeProps = {
             eventKey: key,
-            expanded: isSearching && !this._isExpandControlled()
-                ? filteredExpandedKeys.has(key)
-                : expandedKeys.has(key),
+            expanded: isSearching ? filteredExpandedKeys.has(key) : expandedKeys.has(key),
             selected: selectedKeys.includes(key),
             checked: realChecked,
             halfChecked: realHalfChecked,
@@ -333,10 +367,8 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
             return {};
         }
         loadData(data).then(() => {
-            const {
-                loadedKeys: prevLoadedKeys,
-                loadingKeys: prevLoadingKeys
-            } = this.getCopyFromState(['loadedKeys', 'loadingKeys']);
+            const prevLoadedKeys = new Set(this.getState('loadedKeys')) as Set<string>;
+            const prevLoadingKeys = new Set(this.getState('loadingKeys')) as Set<string>;
             const newLoadedKeys: Set<string> = prevLoadedKeys.add(key);
             const newLoadingKeys: Set<string> = new Set([...prevLoadingKeys]);
             newLoadingKeys.delete(key);
@@ -363,29 +395,30 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
 
     _notifyMultipleChange(key: string[], e: any) {
         const { keyEntities } = this.getStates();
-        const { leafOnly, checkRelation } = this.getProps();
+        const { leafOnly, checkRelation, keyMaps } = this.getProps();
         let keyList = [];
         if (checkRelation === 'related') {
-            keyList = normalizeKeyList(key, keyEntities, leafOnly);
+            keyList = normalizeKeyList(key, keyEntities, leafOnly, true);
         } else if (checkRelation === 'unRelated') {
             keyList = key as string[];
         }
-        const nodes = keyList.map(i => keyEntities[i].data);
+        const nodes = keyList.map(key => (keyEntities[key] && keyEntities[key].key === key) ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key));
         if (this.getProp('onChangeWithObject')) {
             this._adapter.notifyChangeWithObject(nodes, e);
         } else {
-            const value = getValueOrKey(nodes);
+            const value = getValueOrKey(nodes, keyMaps);
             this._adapter.notifyChange(value, nodes, e);
         }
     }
 
     _notifyChange(key: any, e: any) {
         const { keyEntities } = this.getStates();
+        const { keyMaps } = this.getProps();
         if (this._isMultiple() && Array.isArray(key)) {
             this._notifyMultipleChange(key, e);
         } else {
             const nodes = isUndefined(key) ? key : keyEntities[key].data;
-            const value = isUndefined(key) ? key : getValueOrKey(nodes);
+            const value = isUndefined(key) ? key : getValueOrKey(nodes, keyMaps);
             if (this.getProp('onChangeWithObject')) {
                 this._adapter.notifyChangeWithObject(nodes, e);
             } else {
@@ -394,12 +427,30 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         }
     }
 
+    _registerClickOutsideHandler = (e) => {
+        this._adapter.registerClickOutsideHandler(e => {
+            this.handlerTriggerBlur(e);
+            this.close(e);
+        });
+    }
+
+    clearInputValue = () => {
+        const { inputValue } = this.getStates();
+        inputValue && this._adapter.updateInputValue('');
+    }
+
     // Scenes that may trigger focus:
     //  1、click selection
     _notifyFocus(e: any) {
         this._adapter.notifyFocus(e);
     }
 
+    handleTriggerFocus(e: any) {
+        this._adapter.updateIsFocus(true);
+        this._notifyFocus(e);
+        this._registerClickOutsideHandler(e);
+    }
+
     // Scenes that may trigger blur
     //  1、clickOutSide
     //  2、click option / press enter, and then select complete（when multiple is false
@@ -408,6 +459,12 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         this._adapter.notifyBlur(e);
     }
 
+    handlerTriggerBlur(e) {
+        this._adapter.updateIsFocus(false);
+        this._notifyBlur(e);
+        this._adapter.unregisterClickOutsideHandler();
+    }
+
     toggleHoverState(bool: boolean) {
         this._adapter.toggleHovering(bool);
     }
@@ -415,15 +472,10 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     open() {
         this._adapter.openMenu();
         this._setDropdownWidth();
-        this._adapter.registerClickOutsideHandler(e => {
-            this.close(e);
-        });
     }
 
     close(e: any) {
         this._adapter.closeMenu();
-        this._adapter.unregisterClickOutsideHandler();
-        this._notifyBlur(e);
         if (this.getProp('motionExpand')) {
             this._adapter.updateState({ motionKeys: new Set([]) });
         }
@@ -431,18 +483,22 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
 
     handleClick(e: any) {
         const isDisabled = this._isDisabled();
-        const { isOpen, inputValue } = this.getStates();
-        const { searchPosition } = this.getProps();
+        const { isOpen, inputValue, isFocus } = this.getStates();
+        const { searchPosition, clickTriggerToHide } = this.getProps();
         if (isDisabled) {
             return;
-        } else if (!isOpen) {
-            this.open();
-            this._notifyFocus(e);
-        } else if (isOpen) {
-            if (searchPosition === 'trigger' && inputValue) {
-                return;
+        } else {
+            if (!isFocus) {
+                this.handleTriggerFocus(e);
+            }
+            if (isOpen) {
+                if (searchPosition === 'trigger' && inputValue) {
+                    return;
+                }
+                clickTriggerToHide && this.close(e);
+            } else {
+                this.open();
             }
-            this.close(e);
         }
     }
 
@@ -483,6 +539,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
                 }
             }
         }
+        this._adapter.notifyClear(e);
     }
 
     /**
@@ -496,10 +553,11 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     }
 
     removeTag(eventKey: BasicTreeNodeData['key']) {
-        const { disableStrictly, checkRelation } = this.getProps();
+        const { disableStrictly, checkRelation, keyMaps } = this.getProps();
         const { keyEntities, disabledKeys, realCheckedKeys } = this.getStates();
-        const item = keyEntities[eventKey].data;
-        if (item.disabled || (disableStrictly && disabledKeys.has(eventKey))) {
+        const item = (keyEntities[eventKey] && keyEntities[eventKey].key === eventKey) ? keyEntities[eventKey].data : this.getDataForKeyNotInKeyEntities(eventKey);
+        const disabledName = get(keyMaps, 'disabled', 'disabled');
+        if (item[disabledName] || (disableStrictly && disabledKeys.has(eventKey))) {
             return;
         }
         if (checkRelation === 'unRelated') {
@@ -527,15 +585,16 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
 
     clearInput() {
         const { flattenNodes, expandedKeys, selectedKeys, keyEntities, treeData } = this.getStates();
+        const { keyMaps } = this.getProps();
         const newExpandedKeys: Set<string> = new Set(expandedKeys);
         const isExpandControlled = this._isExpandControlled();
         const expandedOptsKeys = findAncestorKeys(selectedKeys, keyEntities);
         expandedOptsKeys.forEach(item => newExpandedKeys.add(item));
-        const newFlattenNodes = flattenTreeData(treeData, newExpandedKeys);
+        const newFlattenNodes = flattenTreeData(treeData, newExpandedKeys, keyMaps);
 
         this._adapter.updateState({
-            expandedKeys: isExpandControlled ? expandedKeys : newExpandedKeys,
-            flattenNodes: isExpandControlled ? flattenNodes : newFlattenNodes,
+            expandedKeys: newExpandedKeys,
+            flattenNodes: newFlattenNodes,
             inputValue: '',
             motionKeys: new Set([]),
             filteredKeys: new Set([]),
@@ -548,7 +607,8 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         // Input is used as controlled component
         this._adapter.updateInputValue(sugInput);
         const { flattenNodes, expandedKeys, selectedKeys, keyEntities, treeData } = this.getStates();
-        const { showFilteredOnly, filterTreeNode, treeNodeFilterProp } = this.getProps();
+        const { showFilteredOnly, filterTreeNode, treeNodeFilterProp, keyMaps } = this.getProps();
+        const realFilterProp = treeNodeFilterProp !== 'label' ? treeNodeFilterProp : get(keyMaps, 'label', 'label');
         const newExpandedKeys: Set<string> = new Set(expandedKeys);
         let filteredOptsKeys: string[] = [];
         let expandedOptsKeys = [];
@@ -557,24 +617,24 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         if (!sugInput) {
             expandedOptsKeys = findAncestorKeys(selectedKeys, keyEntities);
             expandedOptsKeys.forEach(item => newExpandedKeys.add(item));
-            newFlattenNodes = flattenTreeData(treeData, newExpandedKeys);
+            newFlattenNodes = flattenTreeData(treeData, newExpandedKeys, keyMaps);
         } else {
             filteredOptsKeys = Object.values(keyEntities)
                 .filter((item: BasicKeyEntity) => {
                     const { data } = item;
-                    return filter(sugInput, data, filterTreeNode, treeNodeFilterProp);
+                    return filter(sugInput, data, filterTreeNode, realFilterProp);
                 })
                 .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), showFilteredOnly && filteredShownKeys);
+            newFlattenNodes = flattenTreeData(treeData, new Set(expandedOptsKeys), keyMaps, showFilteredOnly && filteredShownKeys);
         }
         const newFilteredExpandedKeys = new Set(expandedOptsKeys);
         this._adapter.notifySearch(sugInput, Array.from(newFilteredExpandedKeys));
         this._adapter.updateState({
-            expandedKeys: this._isExpandControlled() ? expandedKeys : newExpandedKeys,
-            flattenNodes: this._isExpandControlled() ? flattenNodes : newFlattenNodes,
+            expandedKeys: newExpandedKeys,
+            flattenNodes: newFlattenNodes,
             motionKeys: new Set([]),
             filteredKeys: new Set(filteredOptsKeys),
             filteredExpandedKeys: newFilteredExpandedKeys,
@@ -595,7 +655,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     }
 
     handleSingleSelect(e: any, treeNode: BasicTreeNodeProps) {
-        let { selectedKeys } = this.getCopyFromState('selectedKeys');
+        let selectedKeys = [...this.getState('selectedKeys')];
         const { clickToHide } = this.getProps();
         const { selected, eventKey, data } = treeNode;
         this._adapter.notifySelect(eventKey, true, data);
@@ -609,15 +669,14 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         }
         if (clickToHide && (this._isSelectToClose() || !data.children)) {
             this.close(e);
+            this.handlerTriggerBlur(e);
         }
     }
 
     calcCheckedKeys(eventKey: BasicTreeNodeProps['eventKey'], targetStatus: boolean) {
         const { keyEntities } = this.getStates();
-        const {
-            checkedKeys,
-            halfCheckedKeys
-        } = this.getCopyFromState(['checkedKeys', 'halfCheckedKeys']);
+        const checkedKeys = new Set(this.getState('checkedKeys')) as Set<string>;
+        const halfCheckedKeys = new Set(this.getState('halfCheckedKeys')) as Set<string>;
         if (targetStatus) {
             return calcCheckedKeysForChecked(eventKey, keyEntities, checkedKeys, halfCheckedKeys);
         } else {
@@ -667,7 +726,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
 
     calcNonDisabledCheckedKeys(eventKey: string, targetStatus: boolean) {
         const { keyEntities, disabledKeys } = this.getStates();
-        const { checkedKeys } = this.getCopyFromState(['checkedKeys']);
+        const checkedKeys = new Set(this.getState('checkedKeys'));
         const descendantKeys = normalizeKeyList(findDescendantKeys([eventKey], keyEntities, false), keyEntities, true);
         const hasDisabled = descendantKeys.some(key => disabledKeys.has(key));
         if (!hasDisabled) {
@@ -676,7 +735,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         const nonDisabled = descendantKeys.filter(key => !disabledKeys.has(key));
         const newCheckedKeys = targetStatus ?
             [...nonDisabled, ...checkedKeys] :
-            difference(normalizeKeyList([...checkedKeys], keyEntities, true), nonDisabled);
+            difference(normalizeKeyList([...checkedKeys], keyEntities, true, true), nonDisabled);
         return calcCheckedKeys(newCheckedKeys, keyEntities);
     }
 
@@ -695,10 +754,10 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         return !allChecked;
     }
     handleNodeExpandInSearch(e: any, treeNode: BasicTreeNodeProps) {
-        const { treeData, filteredShownKeys, keyEntities } = this.getStates();
+        const { treeData, filteredShownKeys, keyEntities, keyMaps } = this.getStates();
         const showFilteredOnly = this._showFilteredOnly();
         // clone otherwise will be modified unexpectedly
-        const { filteredExpandedKeys } = this.getCopyFromState('filteredExpandedKeys');
+        const filteredExpandedKeys = new Set(this.getState('filteredExpandedKeys')) as Set<string>;
         let motionType = 'show';
         const { eventKey, expanded, data } = treeNode;
 
@@ -715,7 +774,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
 
         if (!this._isExpandControlled()) {
             // debugger;
-            const flattenNodes = flattenTreeData(treeData, filteredExpandedKeys, showFilteredOnly && filteredShownKeys);
+            const flattenNodes = flattenTreeData(treeData, filteredExpandedKeys, keyMaps, showFilteredOnly && filteredShownKeys);
             const motionKeys = this._isAnimated() ? getMotionKeys(eventKey, filteredExpandedKeys, keyEntities) : [];
             const newState = {
                 filteredExpandedKeys,
@@ -735,7 +794,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
 
     handleNodeExpand(e: any, treeNode: BasicTreeNodeProps) {
         // debugger;
-        const { loadData } = this.getProps();
+        const { loadData, keyMaps } = this.getProps();
         const { inputValue, keyEntities } = this.getStates();
         const isSearching = Boolean(inputValue);
         if (!loadData && (!treeNode.children || !treeNode.children.length)) {
@@ -743,14 +802,14 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         }
 
         const isExpandControlled = this._isExpandControlled();
-        if (isSearching && !isExpandControlled) {
+        if (isSearching) {
             this.handleNodeExpandInSearch(e, treeNode);
             return;
         }
 
         const { treeData } = this.getStates();
         // clone otherwise will be modified unexpectedly
-        const { expandedKeys } = this.getCopyFromState('expandedKeys');
+        const expandedKeys = new Set(this.getState('expandedKeys')) as Set<string>;
         let motionType = 'show';
         const { eventKey, expanded, data } = treeNode;
         if (!expanded) {
@@ -763,7 +822,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
 
         if (!isExpandControlled) {
             // debugger;
-            const flattenNodes = flattenTreeData(treeData, expandedKeys);
+            const flattenNodes = flattenTreeData(treeData, expandedKeys, keyMaps);
             const motionKeys = this._isAnimated() ? getMotionKeys(eventKey, expandedKeys, keyEntities) : [];
             const newState = {
                 expandedKeys,
@@ -784,15 +843,18 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
      * The selected items that need to be displayed in the search box when obtaining a single selection
      */
     getRenderTextInSingle() {
-        const { renderSelectedItem: propRenderSelectedItem, treeNodeLabelProp } = this.getProps();
+        const { renderSelectedItem: propRenderSelectedItem, treeNodeLabelProp, keyMaps } = this.getProps();
         const { selectedKeys, keyEntities } = this.getStates();
+        const realLabelName = get(keyMaps, 'label', treeNodeLabelProp);
         const renderSelectedItem = isFunction(propRenderSelectedItem) ?
             propRenderSelectedItem :
-            (item: BasicTreeNodeData) => get(item, treeNodeLabelProp, null);
-        const item = selectedKeys.length && keyEntities[selectedKeys[0]] ?
-            keyEntities[selectedKeys[0]].data :
-            undefined;
-        const renderText = item && treeNodeLabelProp in item ? renderSelectedItem(item) : null;
+            (item: BasicTreeNodeData) => get(item, realLabelName, null);
+        let item;
+        if (selectedKeys.length) {
+            const key = selectedKeys[0];
+            item = (keyEntities[key] && keyEntities[key].key === key) ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key);
+        }
+        const renderText = item ? renderSelectedItem(item) : null;
         return renderText;
     }
 

package/treeSelect/treeSelect.scss

@@ -16,16 +16,41 @@ $module: #{$prefix}-tree-select;
     position: relative;
     cursor: pointer;
 
+
     &:hover {
         background-color: $color-treeSelect_default-bg-hover;
         border: $width-treeSelect_hover-border solid $color-treeSelect_default-border-hover;
     }
 
+    &:focus {
+        border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
+        background-color: $color-treeSelect_default-bg-focus;
+        outline: 0;
+    }
+
+    &:active{
+        background-color: $color-treeSelect_default-bg-active;
+    }
+
+
     &-focus {
+        background-color: $color-treeSelect_default-bg-focus;
         border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
         outline: 0;
+
+        &:hover {
+            background-color: $color-treeSelect_default-bg-focus;
+            border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
+            outline: 0;
+        }
+
+
+        &:active{
+            background-color: $color-treeSelect_default-bg-active;
+        }
     }
 
+
     &-warning {
         background-color: $color-treeSelect_warning-bg-default;
         border-color: $color-treeSelect_warning-border-default;
@@ -108,11 +133,15 @@ $module: #{$prefix}-tree-select;
         padding-right: 0;
         cursor: pointer;
         color: $color-treeSelect_selection-text-default;
+        position: relative;
 
-        &-placeholder {
+        &-content {
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
+        }
+        
+        &-placeholder {
             color: $color-treeSelect_input_placeholder-text-default;
         }
 
@@ -129,6 +158,10 @@ $module: #{$prefix}-tree-select;
 
         &-TriggerSearchItem {
             position: absolute;
+            max-width: calc(100% - $spacing-treeSelect_selection-paddingLeft);
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
             
             &-placeholder {
                 opacity: .6;
@@ -171,23 +204,20 @@ $module: #{$prefix}-tree-select;
         .#{$prefix}-tagInput {
             border: hidden;
             background: transparent;
+            min-height: $height-treeSelect_selection_tagInput_wrapper_default;
+
+            &-small {
+                min-height: $height-treeSelect_selection_tagInput_wrapper_small;
+            }
+
+            &-large {
+                min-height: $height-treeSelect_selection_tagInput_wrapper_large;
+            }
 
             .#{$prefix}-tagInput-wrapper {
                 padding-left: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
                 padding-right: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
 
-                &-default {
-                    min-height: $height-treeSelect_selection_tagInput_wrapper_default;
-                }
-    
-                &-small {
-                    min-height: $height-treeSelect_selection_tagInput_wrapper_small;
-                }
-
-                &-large {
-                    min-height: $height-treeSelect_selection_tagInput_wrapper_large;
-                }
-
                 .#{$prefix}-input-wrapper {
                     // height: $height-treeSelect_selection_tagInput_input_default;
 
@@ -205,13 +235,6 @@ $module: #{$prefix}-tree-select;
                         margin-bottom: $spacing-treeSelect_tag-marginY;
                     }
                 }
-    
-                // .#{$prefix}-input-wrapper-small {
-                //     height: $height-treeSelect_selection_tagInput_input_small;
-                // }
-                // .#{$prefix}-input-wrapper-large {
-                //     height: $height-treeSelect_selection_tagInput_input_large;
-                // }
             }
         }
     }
@@ -357,4 +380,37 @@ $module: #{$prefix}-tree-select;
     }
 }
 
+.#{$module}-borderless{
+
+    &:not(:focus-within):not(:hover){
+        background-color:transparent;
+        border-color: transparent;
+        .#{$module}-arrow {
+            opacity: 0;
+        }
+    }
+
+    &:focus-within:not(:active){
+        background-color:transparent;
+    }
+
+    // split style into not and normal to avoid style override
+    &.#{$module}-error:not(:focus-within){
+        border-color: $color-treeSelect_danger-border-focus;
+    }
+
+    &.#{$module}-warning:not(:focus-within){
+        border-color: $color-treeSelect_warning-border-focus;
+    }
+
+    &.#{$module}-error:focus-within{
+        border-color: $color-treeSelect_danger-border-focus;
+    }
+
+    &.#{$module}-warning:focus-within{
+        border-color: $color-treeSelect_warning-border-focus;
+    }
+
+}
+
 @import './rtl.scss';

package/treeSelect/variables.scss

@@ -1,12 +1,14 @@
 $color-treeSelect_default-bg-default: var(--semi-color-fill-0); // 树选择器选择框背景颜色 - 默认
+$color-treeSelect_default-bg-hover: var(--semi-color-fill-1); // 树选择器选择框背景颜色 - 悬停
+$color-treeSelect_default-bg-active: var(--semi-color-fill-2); // 树选择器选择框背景颜色 - 按下
+$color-treeSelect_default-bg-focus: var(--semi-color-fill-0); // 树选择器选择框背景颜色 - 选中
 $color-treeSelect_default-border-default: transparent; // 树选择器选择框描边颜色 - 默认
 $color-treeSelect_selection-text-default: var(--semi-color-text-0); // 树选择器选择框回填内容文本颜色 - 默认
 $color-treeSelect_default-icon-default: var(--semi-color-text-2); // 树选择器选择框图标颜色 - 默认
 $color-treeSelect_default-icon-hover: var(--semi-color-primary-hover); // 树选择器选择框清空按钮颜色 - 悬停
 $color-treeSelect_default-icon-active: var(--semi-color-primary-active); // 树选择器选择框清空按钮颜色 - 按下
-$color-treeSelect_default-bg-hover: var(--semi-color-fill-1); // 树选择器选择框背景颜色 - 悬停
 
-$color-treeSelect_default-border-hover: inherit; // 树选择器选择框描边颜色 - 悬浮
+$color-treeSelect_default-border-hover: transparent; // 树选择器选择框描边颜色 - 悬浮
 $color-treeSelect_default-border-focus: var(--semi-color-focus-border);// 树选择器选择框描边颜色 - 选中
 
 $color-treeSelect_search-border-default: var(--semi-color-fill-0); // 树选择器菜单搜索框描边颜色 - 默认

package/typography/constants.ts

@@ -5,6 +5,7 @@ const cssClasses = {
 };
 
 const strings = {
+    WEIGHT: ['light', 'regular', 'medium', 'semibold', 'bold', "default"],
     TYPE: ['primary', 'secondary', 'danger', 'warning', 'success', 'tertiary', 'quaternary'],
     SIZE: ['normal', 'small'],
     SPACING: ['normal', 'extended'],