@douyinfe/semi-foundation 2.25.1 → 2.26.0-beta.0

package/cascader/cascader.scss

@@ -161,22 +161,17 @@ $module: #{$prefix}-cascader;
         }
         
         .#{$prefix}-tagInput {
-            &-wrapper {
-                &-default {
-                    min-height: $height-cascader_selection_tagInput_wrapper_default;
-                }
-    
-                &-small {
-                    min-height: $height-cascader_selection_tagInput_wrapper_small;
-                }
-    
-                &-large {
-                    min-height: $height-cascader_selection_tagInput_wrapper_large;
-                }
+            min-height: $height-cascader_selection_tagInput_wrapper_default;
+
+            &-small {
+                min-height: $height-cascader_selection_tagInput_wrapper_small;
+            }
+
+            &-large {
+                min-height: $height-cascader_selection_tagInput_wrapper_large;
             }
 
             .#{$prefix}-input-wrapper {
-                // height: $height-cascader_selection_tagInput_input_default;
 
                 margin-left: $spacing-cascader_selection_input-marginLeft;
                 .#{$prefix}-input {
@@ -193,13 +188,6 @@ $module: #{$prefix}-cascader;
                     margin-bottom: $spacing-cascader_selection_tag-marginY;
                 }
             }
-
-            // .#{$prefix}-input-wrapper-small {
-            //     height: $height-cascader_selection_tagInput_input_small;
-            // }
-            // .#{$prefix}-input-wrapper-large {
-            //     height: $height-cascader_selection_tagInput_input_large;
-            // }
         }
 
         &-text {

package/grid/grid.scss

@@ -19,7 +19,7 @@ $module: #{$prefix};
     }
 }
 
-.#{$module}-col-0 {
+.#{$module}-col-0, .#{$module}-col-xs-0, .#{$module}-col-sm-0, .#{$module}-col-md-0, .#{$module}-col-lg-0, .#{$module}-col-xl-0, .#{$module}-col-xxl-0 {
     display: none;
 }
 

package/lib/cjs/cascader/cascader.css

@@ -136,13 +136,13 @@
   background: transparent;
   margin-left: -4px;
 }
-.semi-cascader-selection .semi-tagInput-wrapper-default {
+.semi-cascader-selection .semi-tagInput {
   min-height: 30px;
 }
-.semi-cascader-selection .semi-tagInput-wrapper-small {
+.semi-cascader-selection .semi-tagInput-small {
   min-height: 22px;
 }
-.semi-cascader-selection .semi-tagInput-wrapper-large {
+.semi-cascader-selection .semi-tagInput-large {
   min-height: 38px;
 }
 .semi-cascader-selection .semi-tagInput .semi-input-wrapper {

package/lib/cjs/cascader/cascader.scss

@@ -161,22 +161,17 @@ $module: #{$prefix}-cascader;
         }
         
         .#{$prefix}-tagInput {
-            &-wrapper {
-                &-default {
-                    min-height: $height-cascader_selection_tagInput_wrapper_default;
-                }
-    
-                &-small {
-                    min-height: $height-cascader_selection_tagInput_wrapper_small;
-                }
-    
-                &-large {
-                    min-height: $height-cascader_selection_tagInput_wrapper_large;
-                }
+            min-height: $height-cascader_selection_tagInput_wrapper_default;
+
+            &-small {
+                min-height: $height-cascader_selection_tagInput_wrapper_small;
+            }
+
+            &-large {
+                min-height: $height-cascader_selection_tagInput_wrapper_large;
             }
 
             .#{$prefix}-input-wrapper {
-                // height: $height-cascader_selection_tagInput_input_default;
 
                 margin-left: $spacing-cascader_selection_input-marginLeft;
                 .#{$prefix}-input {
@@ -193,13 +188,6 @@ $module: #{$prefix}-cascader;
                     margin-bottom: $spacing-cascader_selection_tag-marginY;
                 }
             }
-
-            // .#{$prefix}-input-wrapper-small {
-            //     height: $height-cascader_selection_tagInput_input_small;
-            // }
-            // .#{$prefix}-input-wrapper-large {
-            //     height: $height-cascader_selection_tagInput_input_large;
-            // }
         }
 
         &-text {

package/lib/cjs/grid/grid.css

@@ -26,7 +26,7 @@
   display: flex;
 }
 
-.semi-col-0 {
+.semi-col-0, .semi-col-xs-0, .semi-col-sm-0, .semi-col-md-0, .semi-col-lg-0, .semi-col-xl-0, .semi-col-xxl-0 {
   display: none;
 }
 

package/lib/cjs/grid/grid.scss

@@ -19,7 +19,7 @@ $module: #{$prefix};
     }
 }
 
-.#{$module}-col-0 {
+.#{$module}-col-0, .#{$module}-col-xs-0, .#{$module}-col-sm-0, .#{$module}-col-md-0, .#{$module}-col-lg-0, .#{$module}-col-xl-0, .#{$module}-col-xxl-0 {
     display: none;
 }
 

package/lib/cjs/table/foundation.js

@@ -125,9 +125,9 @@ class TableFoundation extends _foundation.default {
     const {
       defaultFilteredValue,
       filteredValue,
-      filters
+      onFilter
     } = column;
-    const hasFilter = Array.isArray(filters) && filters.length;
+    const hasFilter = (0, _isFunction2.default)(onFilter);
 
     if (hasFilter && (0, _isUndefined2.default)(filteredValue)) {
       if (Array.isArray(defaultFilteredValue) && defaultFilteredValue.length) {
@@ -244,7 +244,7 @@ class TableFoundation extends _foundation.default {
        * When initializing we should use `defaultFilteredValue`, after clicking we should use `filteredValue`
        */
       const currentFilteredValue = query.filteredValue ? query.filteredValue : query.defaultFilteredValue;
-      return (0, _isFunction2.default)(query.onFilter) && Array.isArray(query.filters) && query.filters.length && Array.isArray(currentFilteredValue) && currentFilteredValue.length;
+      return (0, _isFunction2.default)(query.onFilter) && Array.isArray(currentFilteredValue) && currentFilteredValue.length;
     }));
     const sortedDataSource = this.sortDataSource(filteredDataSource, queries.filter(query => query && (0, _isFunction2.default)(query.sorter)));
     return sortedDataSource;

package/lib/cjs/table/utils.js

@@ -581,11 +581,12 @@ function warnIfNoDataIndex(column) {
     const {
       filters,
       sorter,
-      dataIndex
+      dataIndex,
+      onFilter
     } = column;
     const logger = new _Logger.default('[@douyinfe/semi-ui Table]');
 
-    if ((Array.isArray(filters) || (0, _isFunction2.default)(sorter)) && (0, _isNullOrUndefined.default)(dataIndex)) {
+    if ((Array.isArray(filters) || (0, _isFunction2.default)(onFilter) || (0, _isFunction2.default)(sorter)) && (0, _isNullOrUndefined.default)(dataIndex)) {
       logger.warn("The column with sorter or filter must pass the 'dataIndex' prop");
     }
   }

package/lib/cjs/tagInput/tagInput.css

@@ -208,6 +208,15 @@
 .semi-tagInput-suffix-text {
   color: var(--semi-color-text-2);
 }
+.semi-tagInput-tag-content-wrapper {
+  display: flex;
+  align-items: center;
+}
+.semi-tagInput-sortable-list {
+  display: flex;
+  flex-flow: row wrap;
+  width: 100%;
+}
 
 .semi-rtl .semi-tagInput,
 .semi-portal-rtl .semi-tagInput {

package/lib/cjs/tagInput/tagInput.scss

@@ -259,6 +259,17 @@ $module: #{$prefix}-tagInput;
             color: $color-tagInput_suffix-default;
         }
     }
+
+    &-tag-content-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
+    &-sortable-list {
+        display: flex;
+        flex-flow: row wrap;
+        width: 100%;
+    }
 }
 
 @import "./rtl.scss";

package/lib/cjs/tooltip/foundation.js

@@ -944,7 +944,7 @@ class Tooltip extends _foundation.default {
           }
 
           if (shouldReverseLeftSide && widthIsBigger) {
-            position = this._adjustPos(position, true);
+            position = this._adjustPos(position);
           }
 
           if (isWidthOverFlow && (isViewXEnoughSideHalf || isContainerXEnoughSideHalf)) {

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

@@ -54,7 +54,7 @@ export declare function calcMotionKeys(oldKeySet: Set<string>, newKeySet: Set<st
  */
 export declare function filter(sugInput: string, option: any, filterTreeNode: any, filterProps: any): any;
 export declare function normalizedArr(val: any): any[];
-export declare function normalizeKeyList(keyList: any, keyEntities: KeyEntities, leafOnly?: boolean): string[];
+export declare function normalizeKeyList(keyList: any, keyEntities: KeyEntities, leafOnly?: boolean, flag?: boolean): string[];
 export declare function getMotionKeys(eventKey: string, expandedKeys: Set<string>, keyEntities: KeyEntities): any[];
 export declare function calcCheckedKeysForChecked(key: string, keyEntities: KeyEntities, checkedKeys: Set<string>, halfCheckedKeys: Set<string>): {
     checkedKeys: Set<string>;

package/lib/cjs/tree/treeUtil.js

@@ -234,6 +234,9 @@ function findKeysForValues(valueList, valueEntities) {
   valueList.forEach(val => {
     if (val in valueEntities) {
       res.push(valueEntities[val]);
+    } else {
+      // if val not in valueEntities, then value push to keys array
+      val && res.push(val);
     }
   });
   return res;
@@ -512,16 +515,23 @@ function normalizedArr(val) {
   } else {
     return val;
   }
-}
+} // flag is used to determine whether to return when the key does not belong to the keys in keyEntities
+// export function normalizeKeyList(keyList: any, keyEntities: KeyEntities, leafOnly = false) {
+
 
 function normalizeKeyList(keyList, keyEntities) {
   let leafOnly = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  let flag = arguments.length > 3 ? arguments[3] : undefined;
   const res = [];
   const keyListSet = new Set(keyList);
 
   if (!leafOnly) {
     keyList.forEach(key => {
       if (!keyEntities[key]) {
+        if (flag) {
+          res.push(key);
+        }
+
         return;
       }
 
@@ -539,6 +549,11 @@ function normalizeKeyList(keyList, keyEntities) {
     keyList.forEach(key => {
       if (keyEntities[key] && !isValid(keyEntities[key].children)) {
         res.push(key);
+      } // when key is not in keyEntities, if flag is true, key should be push in res
+
+
+      if (!keyEntities[key] && flag) {
+        res.push(key);
       }
     });
   }
@@ -658,7 +673,7 @@ function calcCheckedKeysForUnchecked(key, keyEntities, checkedKeys, halfCheckedK
     }
   };
 
-  calcCurrLevel(nodeItem);
+  nodeItem && calcCurrLevel(nodeItem);
   return {
     checkedKeys,
     halfCheckedKeys

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

@@ -115,6 +115,12 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     _isSelectToClose(): boolean;
     _isLoadControlled(): any;
     _showFilteredOnly(): any;
+    findDataForValue(findValue: string): any;
+    constructDataForValue(value: string): {
+        [x: number]: string;
+        key: string;
+    };
+    getDataForKeyNotInKeyEntities(value: string): any;
     getCopyFromState(items: string | string[]): BasicTreeInnerData;
     getTreeNodeProps(key: string): BasicTreeNodeProps;
     handleNodeLoad(loadedKeys: Set<string>, loadingKeys: Set<string>, data: BasicTreeNodeData, resolve: (value?: any) => void): {

package/lib/cjs/treeSelect/foundation.js

@@ -115,6 +115,46 @@ class TreeSelectFoundation extends _foundation.default {
     return Boolean(inputValue) && showFilteredOnly;
   }
 
+  findDataForValue(findValue) {
+    const {
+      value,
+      defaultValue
+    } = this.getProps();
+    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.value === findValue || item.key === findValue;
+    });
+  }
+
+  constructDataForValue(value) {
+    const {
+      treeNodeLabelProp
+    } = this.getProps();
+    return {
+      key: value,
+      [treeNodeLabelProp]: value
+    };
+  }
+
+  getDataForKeyNotInKeyEntities(value) {
+    const {
+      onChangeWithObject
+    } = this.getProps();
+
+    if (onChangeWithObject) {
+      return this.findDataForValue(value);
+    } else {
+      return this.constructDataForValue(value);
+    }
+  }
+
   getCopyFromState(items) {
     const res = {};
     (0, _treeUtil.normalizedArr)(items).forEach(key => {
@@ -241,12 +281,12 @@ class TreeSelectFoundation extends _foundation.default {
     let keyList = [];
 
     if (checkRelation === 'related') {
-      keyList = (0, _treeUtil.normalizeKeyList)(key, keyEntities, leafOnly);
+      keyList = (0, _treeUtil.normalizeKeyList)(key, keyEntities, leafOnly, true);
     } else if (checkRelation === 'unRelated') {
       keyList = key;
     }
 
-    const nodes = keyList.map(i => keyEntities[i].data);
+    const nodes = keyList.map(key => keyEntities[key] && keyEntities[key].data.key === key ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key));
 
     if (this.getProp('onChangeWithObject')) {
       this._adapter.notifyChangeWithObject(nodes, e);
@@ -420,7 +460,7 @@ class TreeSelectFoundation extends _foundation.default {
       disabledKeys,
       realCheckedKeys
     } = this.getStates();
-    const item = keyEntities[eventKey].data;
+    const item = keyEntities[eventKey] && keyEntities[eventKey].data.key === eventKey ? keyEntities[eventKey].data : this.getDataForKeyNotInKeyEntities(eventKey);
 
     if (item.disabled || disableStrictly && disabledKeys.has(eventKey)) {
       return;
@@ -843,7 +883,13 @@ class TreeSelectFoundation extends _foundation.default {
       keyEntities
     } = this.getStates();
     const renderSelectedItem = (0, _isFunction2.default)(propRenderSelectedItem) ? propRenderSelectedItem : item => (0, _get2.default)(item, treeNodeLabelProp, null);
-    const item = selectedKeys.length && keyEntities[selectedKeys[0]] ? keyEntities[selectedKeys[0]].data : undefined;
+    let item;
+
+    if (selectedKeys.length) {
+      const key = selectedKeys[0];
+      item = keyEntities[key] && keyEntities[key].data.key === key ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key);
+    }
+
     const renderText = item && treeNodeLabelProp in item ? renderSelectedItem(item) : null;
     return renderText;
   }

package/lib/cjs/treeSelect/treeSelect.css

@@ -139,20 +139,18 @@
 .semi-tree-select-selection .semi-tagInput {
   border: hidden;
   background: transparent;
-}
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-default {
   min-height: 30px;
 }
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-small {
+.semi-tree-select-selection .semi-tagInput-small {
   min-height: 22px;
 }
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-large {
+.semi-tree-select-selection .semi-tagInput-large {
   min-height: 38px;
 }
+.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper {
+  padding-left: 4px;
+  padding-right: 4px;
+}
 .semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper .semi-input {
   padding-left: 0;
 }

package/lib/cjs/treeSelect/treeSelect.scss

@@ -171,23 +171,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 +202,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;
-                // }
             }
         }
     }

package/lib/es/cascader/cascader.css

@@ -136,13 +136,13 @@
   background: transparent;
   margin-left: -4px;
 }
-.semi-cascader-selection .semi-tagInput-wrapper-default {
+.semi-cascader-selection .semi-tagInput {
   min-height: 30px;
 }
-.semi-cascader-selection .semi-tagInput-wrapper-small {
+.semi-cascader-selection .semi-tagInput-small {
   min-height: 22px;
 }
-.semi-cascader-selection .semi-tagInput-wrapper-large {
+.semi-cascader-selection .semi-tagInput-large {
   min-height: 38px;
 }
 .semi-cascader-selection .semi-tagInput .semi-input-wrapper {

package/lib/es/cascader/cascader.scss

@@ -161,22 +161,17 @@ $module: #{$prefix}-cascader;
         }
         
         .#{$prefix}-tagInput {
-            &-wrapper {
-                &-default {
-                    min-height: $height-cascader_selection_tagInput_wrapper_default;
-                }
-    
-                &-small {
-                    min-height: $height-cascader_selection_tagInput_wrapper_small;
-                }
-    
-                &-large {
-                    min-height: $height-cascader_selection_tagInput_wrapper_large;
-                }
+            min-height: $height-cascader_selection_tagInput_wrapper_default;
+
+            &-small {
+                min-height: $height-cascader_selection_tagInput_wrapper_small;
+            }
+
+            &-large {
+                min-height: $height-cascader_selection_tagInput_wrapper_large;
             }
 
             .#{$prefix}-input-wrapper {
-                // height: $height-cascader_selection_tagInput_input_default;
 
                 margin-left: $spacing-cascader_selection_input-marginLeft;
                 .#{$prefix}-input {
@@ -193,13 +188,6 @@ $module: #{$prefix}-cascader;
                     margin-bottom: $spacing-cascader_selection_tag-marginY;
                 }
             }
-
-            // .#{$prefix}-input-wrapper-small {
-            //     height: $height-cascader_selection_tagInput_input_small;
-            // }
-            // .#{$prefix}-input-wrapper-large {
-            //     height: $height-cascader_selection_tagInput_input_large;
-            // }
         }
 
         &-text {

package/lib/es/grid/grid.css

@@ -26,7 +26,7 @@
   display: flex;
 }
 
-.semi-col-0 {
+.semi-col-0, .semi-col-xs-0, .semi-col-sm-0, .semi-col-md-0, .semi-col-lg-0, .semi-col-xl-0, .semi-col-xxl-0 {
   display: none;
 }
 

package/lib/es/grid/grid.scss

@@ -19,7 +19,7 @@ $module: #{$prefix};
     }
 }
 
-.#{$module}-col-0 {
+.#{$module}-col-0, .#{$module}-col-xs-0, .#{$module}-col-sm-0, .#{$module}-col-md-0, .#{$module}-col-lg-0, .#{$module}-col-xl-0, .#{$module}-col-xxl-0 {
     display: none;
 }
 

package/lib/es/table/foundation.js

@@ -99,9 +99,10 @@ class TableFoundation extends BaseFoundation {
     const {
       defaultFilteredValue,
       filteredValue,
-      filters
+      onFilter
     } = column;
-    const hasFilter = Array.isArray(filters) && filters.length;
+
+    const hasFilter = _isFunction(onFilter);
 
     if (hasFilter && _isUndefined(filteredValue)) {
       if (Array.isArray(defaultFilteredValue) && defaultFilteredValue.length) {
@@ -219,7 +220,7 @@ class TableFoundation extends BaseFoundation {
        * When initializing we should use `defaultFilteredValue`, after clicking we should use `filteredValue`
        */
       const currentFilteredValue = query.filteredValue ? query.filteredValue : query.defaultFilteredValue;
-      return _isFunction(query.onFilter) && Array.isArray(query.filters) && query.filters.length && Array.isArray(currentFilteredValue) && currentFilteredValue.length;
+      return _isFunction(query.onFilter) && Array.isArray(currentFilteredValue) && currentFilteredValue.length;
     }));
     const sortedDataSource = this.sortDataSource(filteredDataSource, queries.filter(query => query && _isFunction(query.sorter)));
     return sortedDataSource;

package/lib/es/table/utils.js

@@ -498,11 +498,12 @@ export function warnIfNoDataIndex(column) {
     const {
       filters,
       sorter,
-      dataIndex
+      dataIndex,
+      onFilter
     } = column;
     const logger = new Logger('[@douyinfe/semi-ui Table]');
 
-    if ((Array.isArray(filters) || _isFunction(sorter)) && isNullOrUndefined(dataIndex)) {
+    if ((Array.isArray(filters) || _isFunction(onFilter) || _isFunction(sorter)) && isNullOrUndefined(dataIndex)) {
       logger.warn("The column with sorter or filter must pass the 'dataIndex' prop");
     }
   }

package/lib/es/tagInput/tagInput.css

@@ -208,6 +208,15 @@
 .semi-tagInput-suffix-text {
   color: var(--semi-color-text-2);
 }
+.semi-tagInput-tag-content-wrapper {
+  display: flex;
+  align-items: center;
+}
+.semi-tagInput-sortable-list {
+  display: flex;
+  flex-flow: row wrap;
+  width: 100%;
+}
 
 .semi-rtl .semi-tagInput,
 .semi-portal-rtl .semi-tagInput {

package/lib/es/tagInput/tagInput.scss

@@ -259,6 +259,17 @@ $module: #{$prefix}-tagInput;
             color: $color-tagInput_suffix-default;
         }
     }
+
+    &-tag-content-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
+    &-sortable-list {
+        display: flex;
+        flex-flow: row wrap;
+        width: 100%;
+    }
 }
 
 @import "./rtl.scss";

package/lib/es/tooltip/foundation.js

@@ -934,7 +934,7 @@ export default class Tooltip extends BaseFoundation {
           }
 
           if (shouldReverseLeftSide && widthIsBigger) {
-            position = this._adjustPos(position, true);
+            position = this._adjustPos(position);
           }
 
           if (isWidthOverFlow && (isViewXEnoughSideHalf || isContainerXEnoughSideHalf)) {

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

@@ -54,7 +54,7 @@ export declare function calcMotionKeys(oldKeySet: Set<string>, newKeySet: Set<st
  */
 export declare function filter(sugInput: string, option: any, filterTreeNode: any, filterProps: any): any;
 export declare function normalizedArr(val: any): any[];
-export declare function normalizeKeyList(keyList: any, keyEntities: KeyEntities, leafOnly?: boolean): string[];
+export declare function normalizeKeyList(keyList: any, keyEntities: KeyEntities, leafOnly?: boolean, flag?: boolean): string[];
 export declare function getMotionKeys(eventKey: string, expandedKeys: Set<string>, keyEntities: KeyEntities): any[];
 export declare function calcCheckedKeysForChecked(key: string, keyEntities: KeyEntities, checkedKeys: Set<string>, halfCheckedKeys: Set<string>): {
     checkedKeys: Set<string>;

package/lib/es/tree/treeUtil.js

@@ -186,6 +186,9 @@ export function findKeysForValues(valueList, valueEntities) {
   valueList.forEach(val => {
     if (val in valueEntities) {
       res.push(valueEntities[val]);
+    } else {
+      // if val not in valueEntities, then value push to keys array
+      val && res.push(val);
     }
   });
   return res;
@@ -455,15 +458,22 @@ export function normalizedArr(val) {
   } else {
     return val;
   }
-}
+} // flag is used to determine whether to return when the key does not belong to the keys in keyEntities
+// export function normalizeKeyList(keyList: any, keyEntities: KeyEntities, leafOnly = false) {
+
 export function normalizeKeyList(keyList, keyEntities) {
   let leafOnly = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  let flag = arguments.length > 3 ? arguments[3] : undefined;
   const res = [];
   const keyListSet = new Set(keyList);
 
   if (!leafOnly) {
     keyList.forEach(key => {
       if (!keyEntities[key]) {
+        if (flag) {
+          res.push(key);
+        }
+
         return;
       }
 
@@ -481,6 +491,11 @@ export function normalizeKeyList(keyList, keyEntities) {
     keyList.forEach(key => {
       if (keyEntities[key] && !isValid(keyEntities[key].children)) {
         res.push(key);
+      } // when key is not in keyEntities, if flag is true, key should be push in res
+
+
+      if (!keyEntities[key] && flag) {
+        res.push(key);
       }
     });
   }
@@ -597,7 +612,7 @@ export function calcCheckedKeysForUnchecked(key, keyEntities, checkedKeys, halfC
     }
   };
 
-  calcCurrLevel(nodeItem);
+  nodeItem && calcCurrLevel(nodeItem);
   return {
     checkedKeys,
     halfCheckedKeys

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

@@ -115,6 +115,12 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     _isSelectToClose(): boolean;
     _isLoadControlled(): any;
     _showFilteredOnly(): any;
+    findDataForValue(findValue: string): any;
+    constructDataForValue(value: string): {
+        [x: number]: string;
+        key: string;
+    };
+    getDataForKeyNotInKeyEntities(value: string): any;
     getCopyFromState(items: string | string[]): BasicTreeInnerData;
     getTreeNodeProps(key: string): BasicTreeNodeProps;
     handleNodeLoad(loadedKeys: Set<string>, loadingKeys: Set<string>, data: BasicTreeNodeData, resolve: (value?: any) => void): {

package/lib/es/treeSelect/foundation.js

@@ -94,6 +94,46 @@ export default class TreeSelectFoundation extends BaseFoundation {
     return Boolean(inputValue) && showFilteredOnly;
   }
 
+  findDataForValue(findValue) {
+    const {
+      value,
+      defaultValue
+    } = this.getProps();
+    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.value === findValue || item.key === findValue;
+    });
+  }
+
+  constructDataForValue(value) {
+    const {
+      treeNodeLabelProp
+    } = this.getProps();
+    return {
+      key: value,
+      [treeNodeLabelProp]: value
+    };
+  }
+
+  getDataForKeyNotInKeyEntities(value) {
+    const {
+      onChangeWithObject
+    } = this.getProps();
+
+    if (onChangeWithObject) {
+      return this.findDataForValue(value);
+    } else {
+      return this.constructDataForValue(value);
+    }
+  }
+
   getCopyFromState(items) {
     const res = {};
     normalizedArr(items).forEach(key => {
@@ -220,12 +260,12 @@ export default class TreeSelectFoundation extends BaseFoundation {
     let keyList = [];
 
     if (checkRelation === 'related') {
-      keyList = normalizeKeyList(key, keyEntities, leafOnly);
+      keyList = normalizeKeyList(key, keyEntities, leafOnly, true);
     } else if (checkRelation === 'unRelated') {
       keyList = key;
     }
 
-    const nodes = keyList.map(i => keyEntities[i].data);
+    const nodes = keyList.map(key => keyEntities[key] && keyEntities[key].data.key === key ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key));
 
     if (this.getProp('onChangeWithObject')) {
       this._adapter.notifyChangeWithObject(nodes, e);
@@ -399,7 +439,7 @@ export default class TreeSelectFoundation extends BaseFoundation {
       disabledKeys,
       realCheckedKeys
     } = this.getStates();
-    const item = keyEntities[eventKey].data;
+    const item = keyEntities[eventKey] && keyEntities[eventKey].data.key === eventKey ? keyEntities[eventKey].data : this.getDataForKeyNotInKeyEntities(eventKey);
 
     if (item.disabled || disableStrictly && disabledKeys.has(eventKey)) {
       return;
@@ -822,7 +862,13 @@ export default class TreeSelectFoundation extends BaseFoundation {
       keyEntities
     } = this.getStates();
     const renderSelectedItem = _isFunction(propRenderSelectedItem) ? propRenderSelectedItem : item => _get(item, treeNodeLabelProp, null);
-    const item = selectedKeys.length && keyEntities[selectedKeys[0]] ? keyEntities[selectedKeys[0]].data : undefined;
+    let item;
+
+    if (selectedKeys.length) {
+      const key = selectedKeys[0];
+      item = keyEntities[key] && keyEntities[key].data.key === key ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key);
+    }
+
     const renderText = item && treeNodeLabelProp in item ? renderSelectedItem(item) : null;
     return renderText;
   }

package/lib/es/treeSelect/treeSelect.css

@@ -139,20 +139,18 @@
 .semi-tree-select-selection .semi-tagInput {
   border: hidden;
   background: transparent;
-}
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-default {
   min-height: 30px;
 }
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-small {
+.semi-tree-select-selection .semi-tagInput-small {
   min-height: 22px;
 }
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-large {
+.semi-tree-select-selection .semi-tagInput-large {
   min-height: 38px;
 }
+.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper {
+  padding-left: 4px;
+  padding-right: 4px;
+}
 .semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper .semi-input {
   padding-left: 0;
 }

package/lib/es/treeSelect/treeSelect.scss

@@ -171,23 +171,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 +202,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;
-                // }
             }
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.25.1",
+    "version": "2.26.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "571a51134e49bec30e4412b4eacd45dd35d3849f",
+    "gitHead": "97f744558e96e39201b54219f82ce64da7163b81",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/table/foundation.ts

@@ -130,8 +130,8 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
      * init filteredValue of filtering column, use defaultFilteredValue or [] when it is undefined
      */
     static initFilteredValue(column: BaseColumnProps<unknown>) {
-        const { defaultFilteredValue, filteredValue, filters } = column;
-        const hasFilter = Array.isArray(filters) && filters.length;
+        const { defaultFilteredValue, filteredValue, onFilter } = column;
+        const hasFilter = isFunction(onFilter);
         if (hasFilter && isUndefined(filteredValue)) {
             if (Array.isArray(defaultFilteredValue) && defaultFilteredValue.length) {
                 column.filteredValue = defaultFilteredValue;
@@ -253,8 +253,6 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
                 const currentFilteredValue = query.filteredValue ? query.filteredValue : query.defaultFilteredValue;
                 return (
                     isFunction(query.onFilter) &&
-                    Array.isArray(query.filters) &&
-                    query.filters.length &&
                     Array.isArray(currentFilteredValue) &&
                     currentFilteredValue.length
                 );

package/table/utils.ts

@@ -480,9 +480,9 @@ export interface GetAllDisabledRowKeysProps {
 
 export function warnIfNoDataIndex(column: Record<string, any>) {
     if (typeof column === 'object' && column !== null) {
-        const { filters, sorter, dataIndex } = column;
+        const { filters, sorter, dataIndex, onFilter } = column;
         const logger = new Logger('[@douyinfe/semi-ui Table]');
-        if ((Array.isArray(filters) || isFunction(sorter)) && isNullOrUndefined(dataIndex) ) {
+        if ((Array.isArray(filters) || isFunction(onFilter) || isFunction(sorter)) && isNullOrUndefined(dataIndex) ) {
             logger.warn(`The column with sorter or filter must pass the 'dataIndex' prop`);
         }
     }

package/tagInput/tagInput.scss

@@ -259,6 +259,17 @@ $module: #{$prefix}-tagInput;
             color: $color-tagInput_suffix-default;
         }
     }
+
+    &-tag-content-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
+    &-sortable-list {
+        display: flex;
+        flex-flow: row wrap;
+        width: 100%;
+    }
 }
 
 @import "./rtl.scss";

package/tooltip/foundation.ts

@@ -855,7 +855,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                         position = this._adjustPos(position, true);
                     }
                     if (shouldReverseLeftSide && widthIsBigger) {
-                        position = this._adjustPos(position, true);
+                        position = this._adjustPos(position);
                     }
                     if (isWidthOverFlow && (isViewXEnoughSideHalf || isContainerXEnoughSideHalf)) {
                         position = this._adjustPos(position, true, 'reduce');

package/tree/treeUtil.ts

@@ -187,6 +187,9 @@ export function findKeysForValues(valueList: any, valueEntities: any, isMultiple
     valueList.forEach((val: string) => {
         if (val in valueEntities) {
             res.push(valueEntities[val]);
+        } else {
+            // if val not in valueEntities, then value push to keys array
+            val && res.push(val);
         }
     });
 
@@ -427,12 +430,17 @@ export function normalizedArr(val: any) {
     }
 }
 
-export function normalizeKeyList(keyList: any, keyEntities: KeyEntities, leafOnly = false) {
+// flag is used to determine whether to return when the key does not belong to the keys in keyEntities
+// export function normalizeKeyList(keyList: any, keyEntities: KeyEntities, leafOnly = false) {
+export function normalizeKeyList(keyList: any, keyEntities: KeyEntities, leafOnly = false, flag?: boolean) {
     const res: string[] = [];
     const keyListSet = new Set(keyList);
     if (!leafOnly) {
         keyList.forEach((key: string) => {
             if (!keyEntities[key]) {
+                if (flag) {
+                    res.push(key);
+                }
                 return;
             }
             const { parent } = keyEntities[key];
@@ -446,6 +454,10 @@ export function normalizeKeyList(keyList: any, keyEntities: KeyEntities, leafOnl
             if (keyEntities[key] && !isValid(keyEntities[key].children)) {
                 res.push(key);
             }
+            // when key is not in keyEntities, if flag is true, key should be push in res
+            if (!keyEntities[key] && flag) {
+                res.push(key);
+            }
         });
     }
     return res;
@@ -546,7 +558,7 @@ export function calcCheckedKeysForUnchecked(key: string, keyEntities: KeyEntitie
             calcCurrLevel(par);
         }
     };
-    calcCurrLevel(nodeItem);
+    nodeItem && calcCurrLevel(nodeItem);
     return {
         checkedKeys,
         halfCheckedKeys,

package/treeSelect/foundation.ts

@@ -262,6 +262,36 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         return Boolean(inputValue) && showFilteredOnly;
     }
 
+    findDataForValue(findValue: string) {
+        const { value, defaultValue } = this.getProps();
+        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.value === findValue || item.key === findValue;
+        });
+    }
+
+    constructDataForValue(value: string) {
+        const { treeNodeLabelProp } = this.getProps();
+        return {
+            key: value,
+            [treeNodeLabelProp]: value
+        };    
+    }
+
+    getDataForKeyNotInKeyEntities(value: string) {
+        const { onChangeWithObject } = this.getProps();
+        if (onChangeWithObject) {
+            return this.findDataForValue(value);
+        } else {
+            return this.constructDataForValue(value);
+        }
+    }
+
     getCopyFromState(items: string | string[]) {
         const res = {};
         normalizedArr(items).forEach(key => {
@@ -366,11 +396,11 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         const { leafOnly, checkRelation } = 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].data.key === key) ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key));
         if (this.getProp('onChangeWithObject')) {
             this._adapter.notifyChangeWithObject(nodes, e);
         } else {
@@ -498,7 +528,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     removeTag(eventKey: BasicTreeNodeData['key']) {
         const { disableStrictly, checkRelation } = this.getProps();
         const { keyEntities, disabledKeys, realCheckedKeys } = this.getStates();
-        const item = keyEntities[eventKey].data;
+        const item = (keyEntities[eventKey] && keyEntities[eventKey].data.key === eventKey) ? keyEntities[eventKey].data : this.getDataForKeyNotInKeyEntities(eventKey);
         if (item.disabled || (disableStrictly && disabledKeys.has(eventKey))) {
             return;
         }
@@ -789,9 +819,11 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         const renderSelectedItem = isFunction(propRenderSelectedItem) ?
             propRenderSelectedItem :
             (item: BasicTreeNodeData) => get(item, treeNodeLabelProp, null);
-        const item = selectedKeys.length && keyEntities[selectedKeys[0]] ?
-            keyEntities[selectedKeys[0]].data :
-            undefined;
+        let item;
+        if (selectedKeys.length) {
+            const key = selectedKeys[0];
+            item = (keyEntities[key] && keyEntities[key].data.key === key) ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key);
+        }
         const renderText = item && treeNodeLabelProp in item ? renderSelectedItem(item) : null;
         return renderText;
     }

package/treeSelect/treeSelect.scss

@@ -171,23 +171,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 +202,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;
-                // }
             }
         }
     }