@douyinfe/semi-foundation 2.52.0-beta.1 → 2.52.1

package/avatar/avatar.scss

@@ -1,4 +1,4 @@
-@import "./animation";
+@import "./animation.scss";
 @import './variables.scss';
 @import './mixin.scss';
 

package/cascader/foundation.ts

@@ -1,7 +1,6 @@
 import { isEqual, get, difference, isUndefined, assign, cloneDeep, isEmpty, isNumber, includes, isFunction, isObject } from 'lodash';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import {
-    filter,
     findAncestorKeys,
     calcCheckedKeysForUnchecked,
     calcCheckedKeysForChecked,
@@ -11,11 +10,13 @@ import {
 } from '../tree/treeUtil';
 import { Motion } from '../utils/type';
 import {
+    filter,
     convertDataToEntities,
     normalizedArr,
     isValid,
     calcMergeType,
-    getKeysByValuePath
+    getKeysByValuePath,
+    getKeyByPos
 } from './util';
 import { strings } from './constants';
 import isEnterPress from '../utils/isEnterPress';
@@ -56,6 +57,8 @@ export interface BasicEntity {
     parentKey?: string;
     /* key path */
     path: Array<string>;
+    /* pos in treeData */
+    pos: string;
     /* value path */
     valuePath: Array<string>
 }
@@ -908,8 +911,8 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
                     if (_notExist) {
                         return false;
                     }
-                    const filteredPath = this.getItemPropPath(key, treeNodeFilterProp).join();
-                    return filter(sugInput, data, filterTreeNode, false, filteredPath);
+                    const filteredPath = this.getItemPropPath(key, treeNodeFilterProp);
+                    return filter(sugInput, data, filterTreeNode, filteredPath);
                 })
                 .filter(
                     item => (filterTreeNode && !filterLeafOnly) ||
@@ -932,6 +935,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         const isControlled = this._isControlledComponent();
         const newState: Partial<BasicCascaderInnerData> = {};
         if (multiple) {
+            newState.isSearching = false;
             this._adapter.updateInputValue('');
             this._adapter.notifyOnSearch('');
             newState.checkedKeys = new Set([]);
@@ -1026,17 +1030,20 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         this._adapter.notifyListScroll(e, { panelIndex: ind, activeNode: data });
     }
 
-    handleTagRemove(e: any, tagValuePath: string[]) {
+    handleTagRemoveByKey = (key: string) => {
         const { keyEntities } = this.getStates();
         const { disabled } = this.getProps();
         if (disabled) {
             /* istanbul ignore next */
             return;
         }
-        const removedItem = (Object.values(keyEntities) as BasicEntity[])
-            .filter(item => isEqual(item.valuePath, tagValuePath))[0];
-        !isEmpty(removedItem) &&
-        !removedItem.data.disabled &&
-        this._handleMultipleSelect(removedItem);
+        const removedItem = keyEntities[key] ?? {};
+        !removedItem?.data?.disable && this._handleMultipleSelect(removedItem);
+    }
+
+    handleTagRemoveInTrigger = (pos: string) => {
+        const { treeData } = this.getStates();
+        const key = getKeyByPos(pos, treeData);
+        this.handleTagRemoveByKey(key);
     }
 }

package/cascader/util.ts

@@ -21,6 +21,36 @@ export function normalizedArr(val: any) {
     }
 }
 
+/**
+ * @returns whether option includes sugInput.
+ * When filterTreeNode is a function,returns the result of filterTreeNode which called with (sugInput, target, option).
+ */
+export function filter(sugInput: string, option: any, filterTreeNode: any, filteredPath?: string[]) {
+    if (!filterTreeNode) {
+        return true;
+    }
+    let filterFn = filterTreeNode;
+    let target: string;
+    if (typeof filterTreeNode === 'boolean') {
+        filterFn = (targetVal: string, val: string) => {
+            const input = targetVal.toLowerCase();
+            return val
+                .toLowerCase()
+                .includes(input);
+        };
+        // 当 filterTreeNode 是 bool 类型时，由 Cascader 内部判断是否符合筛选条件，使用 join('') 修复搜索英文逗号导致所有数据被匹配问题
+        // When the type of of filterTreeNode is bool, Cascader internally determines whether it meets the filtering conditions.
+        // Use join('') to fix the problem that searching for English commas causes all data to be matched.
+        target = filteredPath.join('');
+    } else {
+        // 当 filterTreeNode 为函数类型时，由用户判断是否符合筛选条件，使用 join(), 和原来保持一致
+        // When the type of of filterTreeNode is function, the user determines whether it meets the filtering conditions, 
+        // uses join() to be consistent with the previous version.
+        target = filteredPath.join();
+    }
+    return filterFn(sugInput, target, option);
+}
+
 /**
  * Traverse all the data by `treeData`.
  */
@@ -31,10 +61,12 @@ function traverseDataNodes(treeNodes: any, callback: any) {
         // Process node if is not root
         if (node) {
             const key = parent ? `${parent.key}${VALUE_SPLIT}${node.value}` : node.value;
+            const pos = parent ? getPosition(parent.pos, ind) : `${ind}`;
             item = {
                 data: { ...node },
                 ind,
                 key,
+                pos,
                 level: parent ? parent.level + 1 : 0,
                 parentKey: parent ? parent.key : null,
                 path: parent ? [...parent.path, key] : [key],
@@ -74,6 +106,17 @@ export function getValuePathByKey(key: string) {
     return key.split(VALUE_SPLIT);
 }
 
+export function getKeyByPos(pos: string, treeData: any) {
+    const posArr = pos.split('-').map(item => Number(item));
+    let resultData = treeData;
+    let valuePath = [];
+    posArr.forEach((item, index) => {
+        resultData = index === 0 ? resultData[item] : resultData?.children?.[item];
+        valuePath.push(resultData?.value);
+    });
+    return getKeyByValuePath(valuePath);
+}
+
 export function convertDataToEntities(dataNodes: any) {
     const keyEntities: any = {};
 

package/datePicker/foundation.ts

@@ -18,6 +18,7 @@ import type { Type, DateInputFoundationProps, InsetInputValue } from './inputFou
 import type { MonthsGridFoundationProps } from './monthsGridFoundation';
 import type { WeekStartNumber } from './_utils/getMonthTable';
 import isValidTimeZone from './_utils/isValidTimeZone';
+import warning from '../utils/warning';
 
 export type ValidateStatus = ArrayElement<typeof strings.STATUS>;
 export type InputSize = ArrayElement<typeof strings.SIZE_SET>;
@@ -292,6 +293,8 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
                         parsedV = zonedTimeToUtc(parsedV, prevTimeZone);
                     }
                     result.push(isValidTimeZone(timeZone) ? utcToZonedTime(parsedV, timeZone) : parsedV);
+                } else {
+                    warning(true, `[Semi DatePicker] value cannot be parsed, value: ${String(v)}`);
                 }
             }
         }

package/dropdown/dropdown.scss

@@ -7,6 +7,7 @@ $module: #{$prefix}-dropdown;
 .#{$module} {
     @include font-size-regular;
     &-wrapper {
+        overflow-y:auto; // prevent flow out of the radius limit area
         @include shadow-elevated;
         position: relative;
         z-index: $z-dropdown;

package/image/previewInnerFoundation.ts

@@ -226,6 +226,10 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
         }
 
         const preloadImages = getPreloadImagArr(imgSrc, currentIndex, preLoadGap, infinite);
+        if (preloadImages.length === 0) {
+            return;
+        }
+
         const Img = new Image();
         let index = 0;
         function callback(e: any) {

package/lib/cjs/avatar/avatar.scss

@@ -1,4 +1,4 @@
-@import "./animation";
+@import "./animation.scss";
 @import './variables.scss';
 @import './mixin.scss';
 

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

@@ -24,6 +24,7 @@ export interface BasicEntity {
     parent?: BasicEntity;
     parentKey?: string;
     path: Array<string>;
+    pos: string;
     valuePath: Array<string>;
 }
 export interface BasicCascaderData {
@@ -239,16 +240,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
      * @param {boolean} curCheckedStatus checked status of node
      */
     calcCheckedKeys(key: string, curCheckedStatus: boolean): {
-        checkedKeys: Set<string>; /**
-         * If selectedKeys does not meet the update conditions,
-         * and state.selectedKeys is the same as selectedKeys
-         * at this time, state.selectedKeys should be cleared.
-         * A typical scenario is:
-         * The originally selected node is the leaf node, but
-         * after props.treeData is dynamically updated, the node
-         * is a non-leaf node. At this point, selectedKeys should
-         * be cleared.
-         */
+        checkedKeys: Set<string>;
         halfCheckedKeys: Set<string>;
     };
     handleInputChange(sugInput: string): void;
@@ -260,5 +252,6 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     getRenderData(): BasicEntity[] | BasicData[];
     getFilteredData(): BasicData[];
     handleListScroll(e: any, ind: number): void;
-    handleTagRemove(e: any, tagValuePath: string[]): void;
+    handleTagRemoveByKey: (key: string) => void;
+    handleTagRemoveInTrigger: (pos: string) => void;
 }

package/lib/cjs/cascader/foundation.js

@@ -29,6 +29,28 @@ class CascaderFoundation extends _foundation.default {
         isSearching: false
       });
     };
+    this.handleTagRemoveByKey = key => {
+      var _a, _b;
+      const {
+        keyEntities
+      } = this.getStates();
+      const {
+        disabled
+      } = this.getProps();
+      if (disabled) {
+        /* istanbul ignore next */
+        return;
+      }
+      const removedItem = (_a = keyEntities[key]) !== null && _a !== void 0 ? _a : {};
+      !((_b = removedItem === null || removedItem === void 0 ? void 0 : removedItem.data) === null || _b === void 0 ? void 0 : _b.disable) && this._handleMultipleSelect(removedItem);
+    };
+    this.handleTagRemoveInTrigger = pos => {
+      const {
+        treeData
+      } = this.getStates();
+      const key = (0, _util.getKeyByPos)(pos, treeData);
+      this.handleTagRemoveByKey(key);
+    };
   }
   init() {
     const isOpen = this.getProp('open') || this.getProp('defaultOpen');
@@ -737,8 +759,8 @@ class CascaderFoundation extends _foundation.default {
         if (_notExist) {
           return false;
         }
-        const filteredPath = this.getItemPropPath(key, treeNodeFilterProp).join();
-        return (0, _treeUtil.filter)(sugInput, data, filterTreeNode, false, filteredPath);
+        const filteredPath = this.getItemPropPath(key, treeNodeFilterProp);
+        return (0, _util.filter)(sugInput, data, filterTreeNode, filteredPath);
       }).filter(item => filterTreeNode && !filterLeafOnly || this._isLeaf(item)).map(item => item.key);
     }
     this._adapter.updateStates({
@@ -760,6 +782,7 @@ class CascaderFoundation extends _foundation.default {
     const isControlled = this._isControlledComponent();
     const newState = {};
     if (multiple) {
+      newState.isSearching = false;
       this._adapter.updateInputValue('');
       this._adapter.notifyOnSearch('');
       newState.checkedKeys = new Set([]);
@@ -862,19 +885,5 @@ class CascaderFoundation extends _foundation.default {
       activeNode: data
     });
   }
-  handleTagRemove(e, tagValuePath) {
-    const {
-      keyEntities
-    } = this.getStates();
-    const {
-      disabled
-    } = this.getProps();
-    if (disabled) {
-      /* istanbul ignore next */
-      return;
-    }
-    const removedItem = Object.values(keyEntities).filter(item => (0, _isEqual2.default)(item.valuePath, tagValuePath))[0];
-    !(0, _isEmpty2.default)(removedItem) && !removedItem.data.disabled && this._handleMultipleSelect(removedItem);
-  }
 }
 exports.default = CascaderFoundation;

package/lib/cjs/cascader/util.d.ts

@@ -1,7 +1,13 @@
 export declare function isValid(val: any): boolean;
 export declare function normalizedArr(val: any): any[];
+/**
+ * @returns whether option includes sugInput.
+ * When filterTreeNode is a function,returns the result of filterTreeNode which called with (sugInput, target, option).
+ */
+export declare function filter(sugInput: string, option: any, filterTreeNode: any, filteredPath?: string[]): any;
 export declare function getKeysByValuePath(valuePath: (string | number)[][] | (string | number)[]): string[];
 export declare function getKeyByValuePath(valuePath: (string | number)[]): string;
 export declare function getValuePathByKey(key: string): string[];
+export declare function getKeyByPos(pos: string, treeData: any): string;
 export declare function convertDataToEntities(dataNodes: any): any;
 export declare function calcMergeType(autoMergeValue: boolean, leafOnly: boolean): string;

package/lib/cjs/cascader/util.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.calcMergeType = calcMergeType;
 exports.convertDataToEntities = convertDataToEntities;
+exports.filter = filter;
+exports.getKeyByPos = getKeyByPos;
 exports.getKeyByValuePath = getKeyByValuePath;
 exports.getKeysByValuePath = getKeysByValuePath;
 exports.getValuePathByKey = getValuePathByKey;
@@ -27,6 +29,33 @@ function normalizedArr(val) {
     return val;
   }
 }
+/**
+ * @returns whether option includes sugInput.
+ * When filterTreeNode is a function,returns the result of filterTreeNode which called with (sugInput, target, option).
+ */
+function filter(sugInput, option, filterTreeNode, filteredPath) {
+  if (!filterTreeNode) {
+    return true;
+  }
+  let filterFn = filterTreeNode;
+  let target;
+  if (typeof filterTreeNode === 'boolean') {
+    filterFn = (targetVal, val) => {
+      const input = targetVal.toLowerCase();
+      return val.toLowerCase().includes(input);
+    };
+    // 当 filterTreeNode 是 bool 类型时，由 Cascader 内部判断是否符合筛选条件，使用 join('') 修复搜索英文逗号导致所有数据被匹配问题
+    // When the type of of filterTreeNode is bool, Cascader internally determines whether it meets the filtering conditions.
+    // Use join('') to fix the problem that searching for English commas causes all data to be matched.
+    target = filteredPath.join('');
+  } else {
+    // 当 filterTreeNode 为函数类型时，由用户判断是否符合筛选条件，使用 join(), 和原来保持一致
+    // When the type of of filterTreeNode is function, the user determines whether it meets the filtering conditions, 
+    // uses join() to be consistent with the previous version.
+    target = filteredPath.join();
+  }
+  return filterFn(sugInput, target, option);
+}
 /**
  * Traverse all the data by `treeData`.
  */
@@ -37,10 +66,12 @@ function traverseDataNodes(treeNodes, callback) {
     // Process node if is not root
     if (node) {
       const key = parent ? `${parent.key}${_constants.VALUE_SPLIT}${node.value}` : node.value;
+      const pos = parent ? getPosition(parent.pos, ind) : `${ind}`;
       item = {
         data: Object.assign({}, node),
         ind,
         key,
+        pos,
         level: parent ? parent.level + 1 : 0,
         parentKey: parent ? parent.key : null,
         path: parent ? [...parent.path, key] : [key],
@@ -73,6 +104,17 @@ function getKeyByValuePath(valuePath) {
 function getValuePathByKey(key) {
   return key.split(_constants.VALUE_SPLIT);
 }
+function getKeyByPos(pos, treeData) {
+  const posArr = pos.split('-').map(item => Number(item));
+  let resultData = treeData;
+  let valuePath = [];
+  posArr.forEach((item, index) => {
+    var _a;
+    resultData = index === 0 ? resultData[item] : (_a = resultData === null || resultData === void 0 ? void 0 : resultData.children) === null || _a === void 0 ? void 0 : _a[item];
+    valuePath.push(resultData === null || resultData === void 0 ? void 0 : resultData.value);
+  });
+  return getKeyByValuePath(valuePath);
+}
 function convertDataToEntities(dataNodes) {
   const keyEntities = {};
   traverseDataNodes(dataNodes, data => {

package/lib/cjs/datePicker/foundation.js

@@ -21,6 +21,7 @@ var _constants2 = require("../input/constants");
 var _getInsetInputFormatToken = _interopRequireDefault(require("./_utils/getInsetInputFormatToken"));
 var _getInsetInputValueFromInsetInputStr = _interopRequireDefault(require("./_utils/getInsetInputValueFromInsetInputStr"));
 var _isValidTimeZone = _interopRequireDefault(require("./_utils/isValidTimeZone"));
+var _warning = _interopRequireDefault(require("../utils/warning"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * The datePicker foundation.js is responsible for maintaining the date value and the input box value, as well as the callback of both
@@ -125,6 +126,8 @@ class DatePickerFoundation extends _foundation.default {
             parsedV = (0, _dateFnsExtra.zonedTimeToUtc)(parsedV, prevTimeZone);
           }
           result.push((0, _isValidTimeZone.default)(timeZone) ? (0, _dateFnsExtra.utcToZonedTime)(parsedV, timeZone) : parsedV);
+        } else {
+          (0, _warning.default)(true, `[Semi DatePicker] value cannot be parsed, value: ${String(v)}`);
         }
       }
     }

package/lib/cjs/dropdown/dropdown.css

@@ -7,6 +7,7 @@
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 .semi-dropdown-wrapper {
+  overflow-y: auto;
   box-shadow: var(--semi-shadow-elevated);
   position: relative;
   z-index: 1050;

package/lib/cjs/dropdown/dropdown.scss

@@ -7,6 +7,7 @@ $module: #{$prefix}-dropdown;
 .#{$module} {
     @include font-size-regular;
     &-wrapper {
+        overflow-y:auto; // prevent flow out of the radius limit area
         @include shadow-elevated;
         position: relative;
         z-index: $z-dropdown;

package/lib/cjs/image/previewInnerFoundation.js

@@ -231,6 +231,9 @@ class PreviewInnerFoundation extends _foundation.default {
         return;
       }
       const preloadImages = (0, _utils.getPreloadImagArr)(imgSrc, currentIndex, preLoadGap, infinite);
+      if (preloadImages.length === 0) {
+        return;
+      }
       const Img = new Image();
       let index = 0;
       function callback(e) {

package/lib/cjs/select/foundation.js

@@ -1017,6 +1017,8 @@ class SelectFoundation extends _foundation.default {
     if (filter) {
       this.clearInput(e);
     }
+    // after click showClear button, the select need to be focused
+    this.focus();
     this.clearSelected();
     // prevent this click open dropdown
     e.stopPropagation();

package/lib/cjs/select/select.scss

@@ -59,12 +59,12 @@ $overflowList: #{$prefix}-overflow-list;
 
     &-open,
     &-focus {
-        border: $border-thickness-control-focus solid $color-select_default-border-focus;
+        border: $width-select-border-focus solid $color-select_default-border-focus;
         outline: 0;
 
         &:hover {
             background-color: $color-select-bg-default;
-            border: $border-thickness-control-focus solid $color-select_default-border-focus;
+            border: $width-select-border-hover solid $color-select_default-border-focus;
         }
 
         // when click the trigger, trigger get the focus state, active style should take effect
@@ -124,9 +124,8 @@ $overflowList: #{$prefix}-overflow-list;
         }
 
         &:focus {
-            // border: $border-thickness-control-focus solid $color-select_default-border-focus;
             // when select is disabled, the border should not have active color
-            border: $border-thickness-control-focus solid transparent;
+            border: $width-select-border-focus solid transparent;
         }
 
         .#{$module}-selection,

package/lib/cjs/select/variables.scss

@@ -6,7 +6,8 @@ $color-select-bg-focus: var(--semi-color-fill-0); // 选择器输入框背景色
 $color-select-border-default: transparent; // 选择器输入框描边颜色
 $color-select-border-hover: $color-select-border-default;  // 选择器输入框描边颜色 - 悬浮
 $color-select-border-active: var(--semi-color-focus-border); // 选择器输入框描边颜色 - 按下态
-$color-select-border-focus: $color-select-border-active;// 选择器输入框描边颜色 - 悬停态
+$color-select-border-focus: $color-select-border-active;// 选择器输入框描边颜色 - 选中态
+
 $color-select_warning-bg-default: var(--semi-color-warning-light-default); // 警示选择器输入框背景色 - 默认态
 $color-select_warning-border-default: var(--semi-color-warning-light-default); // 警示选择器输入框描边颜色 - 默认态
 $color-select_warning-bg-hover: var(--semi-color-warning-light-hover); // 警示选择器输入框背景色 - 悬停态
@@ -15,6 +16,7 @@ $color-select_warning-bg-focus: var(--semi-color-warning-light-default); // 警
 $color-select_warning-border-focus: var(--semi-color-warning); // 警示选择器输入框描边颜色 - 选中态
 $color-select_warning-bg-active: var(--semi-color-warning-light-active); // 警示选择器输入框背景色 - 按下态
 $color-select_warning-border-active: var(--semi-color-warning-light-active); // 警示选择器输入框描边颜色 - 按下态
+
 $color-select_danger-bg-default: var(--semi-color-danger-light-default); // 报错选择器输入框背景色 - 默认态
 $color-select_danger-border-default: var(--semi-color-danger-light-default); // 报错选择器输入框描边颜色 - 默认态
 $color-select_danger-bg-hover: var(--semi-color-danger-light-hover); // 报错选择器输入框背景色 - 悬停态
@@ -23,7 +25,9 @@ $color-select_danger-bg-focus: var(--semi-color-danger-light-default); // 报错
 $color-select_danger-border-focus: var(--semi-color-danger); // 报错选择器输入框描边颜色 - 选中态
 $color-select_danger-bg-active: var(--semi-color-danger-light-active); // 报错选择器输入框背景色 - 按下态
 $color-select_danger-border-active: var(--semi-color-danger-light-active); // 报错选择器输入框描边颜色 - 按下态
-$color-select_default-border-focus: var(--semi-color-focus-border); // 选择器输入框描边颜色 - 选中态
+
+$color-select_default-border-focus: var(--semi-color-focus-border); // 默认选择器输入框描边颜色 - 选中态
+
 $color-select_main-text-default: var(--semi-color-text-0); // 选择器输入框回填内容文本颜色
 $color-select-icon-default: var(--semi-color-text-2); // 选择器输入框图标颜色
 $color-select_clearBtn-text-default: var(--semi-color-text-2); // 选择器输入框清空按钮颜色 - 默认态
@@ -34,6 +38,7 @@ $color-select_input_disabled-border: var(--semi-color-border); // 禁用选择
 $color-select_input_disabled-text: var(--semi-color-disabled-text); // 禁用选择器输入框回填内容文字颜色
 $color-select_input_disabled-bg-hover: var(--semi-color-disabled-fill); // 选择器输入框回填内容文字颜色 - 悬停态
 $color-select_input_placeholder-text: var(--semi-color-text-2); // 选择器输入框占位文本文字颜色
+
 $color-select_option_main-text: var(--semi-color-text-0); // 选择器菜单选项文本颜色
 $color-select_option_keyword-text: var(--semi-color-primary); // 选择器菜单选项匹配搜索结果文本颜色
 $color-select_option-bg-default: transparent; // 选择器菜单选项背景颜色 - 默认态
@@ -88,10 +93,6 @@ $spacing-select_option-paddingTop: $spacing-tight; // 选择器菜单项顶部
 $spacing-select_option-paddingBottom: $spacing-tight; // 选择器菜单项底部内边距
 
 
-// $spacing-select_option_first-marginTop: $spacing-extra-tight; // 选择器第一个菜单项顶部外边距
-// $spacing-select_option_last-marginBottom: $spacing-extra-tight; // 选择器最后一个菜单项顶部外边距
-
-
 $spacing-select_tag-marginTop: $spacing-super-tight - 1px; // 多项选择器标签顶部外边距
 $spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签右侧外边距
 $spacing-select_tag-marginBottom: $spacing-super-tight - 1px; // 多项选择器标签底部外边距

package/lib/cjs/tooltip/foundation.js

@@ -427,6 +427,7 @@ class Tooltip extends _foundation.default {
     return null;
   }
   calcPosStyle(props) {
+    var _a;
     const {
       spacing,
       isOverFlow
@@ -477,6 +478,10 @@ class Tooltip extends _foundation.default {
     const isTriggerNearLeft = middleX - containerRect.left < containerRect.right - middleX;
     const isTriggerNearTop = middleY - containerRect.top < containerRect.bottom - middleY;
     const isWrapperWidthOverflow = wrapperRect.width > innerWidth;
+    const scaled = Math.abs((wrapperRect === null || wrapperRect === void 0 ? void 0 : wrapperRect.width) - ((_a = this._adapter.getContainer()) === null || _a === void 0 ? void 0 : _a.clientWidth)) > 1;
+    if (scaled) {
+      SPACING = SPACING * wrapperRect.width / this._adapter.getContainer().clientWidth;
+    }
     switch (position) {
       case 'top':
         // left = middleX;
@@ -593,6 +598,12 @@ class Tooltip extends _foundation.default {
     // Calculate container positioning relative to window
     left = left - containerRect.left;
     top = top - containerRect.top;
+    if (scaled) {
+      left /= wrapperRect.width / this._adapter.getContainer().clientWidth;
+    }
+    if (scaled) {
+      top /= wrapperRect.height / this._adapter.getContainer().clientHeight;
+    }
     /**
      * container为body时，如果position不为relative或absolute，这时trigger计算出的top/left会根据html定位（initial containing block）
      * 此时如果body有margin，则计算出的位置相对于body会有问题 fix issue #1368

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

@@ -60,9 +60,8 @@ export declare function calcMotionKeys(oldKeySet: Set<string>, newKeySet: Set<st
 /**
  * @returns whether option includes sugInput.
  * When filterTreeNode is a function,returns the result of filterTreeNode which called with (sugInput, target, option).
- * The filteredPath parameter will only be passed in when the Cascader calls the filter function
  */
-export declare function filter(sugInput: string, option: any, filterTreeNode: any, filterProps: any, filteredPath?: string): any;
+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, flag?: boolean): string[];
 export declare function getMotionKeys(eventKey: string, expandedKeys: Set<string>, keyEntities: KeyEntities): any[];

package/lib/cjs/tree/treeUtil.js

@@ -423,14 +423,13 @@ function calcMotionKeys(oldKeySet, newKeySet, keyEntities) {
 /**
  * @returns whether option includes sugInput.
  * When filterTreeNode is a function,returns the result of filterTreeNode which called with (sugInput, target, option).
- * The filteredPath parameter will only be passed in when the Cascader calls the filter function
  */
-function filter(sugInput, option, filterTreeNode, filterProps, filteredPath) {
+function filter(sugInput, option, filterTreeNode, filterProps) {
   if (!filterTreeNode) {
     return true;
   }
   let filterFn = filterTreeNode;
-  let target = filteredPath !== null && filteredPath !== void 0 ? filteredPath : option;
+  let target = option;
   if (typeof filterTreeNode === 'boolean') {
     filterFn = (targetVal, val) => {
       const input = targetVal.toLowerCase();

package/lib/es/avatar/avatar.scss

@@ -1,4 +1,4 @@
-@import "./animation";
+@import "./animation.scss";
 @import './variables.scss';
 @import './mixin.scss';
 

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

@@ -24,6 +24,7 @@ export interface BasicEntity {
     parent?: BasicEntity;
     parentKey?: string;
     path: Array<string>;
+    pos: string;
     valuePath: Array<string>;
 }
 export interface BasicCascaderData {
@@ -239,16 +240,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
      * @param {boolean} curCheckedStatus checked status of node
      */
     calcCheckedKeys(key: string, curCheckedStatus: boolean): {
-        checkedKeys: Set<string>; /**
-         * If selectedKeys does not meet the update conditions,
-         * and state.selectedKeys is the same as selectedKeys
-         * at this time, state.selectedKeys should be cleared.
-         * A typical scenario is:
-         * The originally selected node is the leaf node, but
-         * after props.treeData is dynamically updated, the node
-         * is a non-leaf node. At this point, selectedKeys should
-         * be cleared.
-         */
+        checkedKeys: Set<string>;
         halfCheckedKeys: Set<string>;
     };
     handleInputChange(sugInput: string): void;
@@ -260,5 +252,6 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     getRenderData(): BasicEntity[] | BasicData[];
     getFilteredData(): BasicData[];
     handleListScroll(e: any, ind: number): void;
-    handleTagRemove(e: any, tagValuePath: string[]): void;
+    handleTagRemoveByKey: (key: string) => void;
+    handleTagRemoveInTrigger: (pos: string) => void;
 }

package/lib/es/cascader/foundation.js

@@ -10,8 +10,8 @@ import _difference from "lodash/difference";
 import _get from "lodash/get";
 import _isEqual from "lodash/isEqual";
 import BaseFoundation from '../base/foundation';
-import { filter, findAncestorKeys, calcCheckedKeysForUnchecked, calcCheckedKeysForChecked, calcCheckedKeys, findDescendantKeys, normalizeKeyList } from '../tree/treeUtil';
-import { convertDataToEntities, normalizedArr, isValid, calcMergeType, getKeysByValuePath } from './util';
+import { findAncestorKeys, calcCheckedKeysForUnchecked, calcCheckedKeysForChecked, calcCheckedKeys, findDescendantKeys, normalizeKeyList } from '../tree/treeUtil';
+import { filter, convertDataToEntities, normalizedArr, isValid, calcMergeType, getKeysByValuePath, getKeyByPos } from './util';
 import { strings } from './constants';
 import isEnterPress from '../utils/isEnterPress';
 export default class CascaderFoundation extends BaseFoundation {
@@ -22,6 +22,28 @@ export default class CascaderFoundation extends BaseFoundation {
         isSearching: false
       });
     };
+    this.handleTagRemoveByKey = key => {
+      var _a, _b;
+      const {
+        keyEntities
+      } = this.getStates();
+      const {
+        disabled
+      } = this.getProps();
+      if (disabled) {
+        /* istanbul ignore next */
+        return;
+      }
+      const removedItem = (_a = keyEntities[key]) !== null && _a !== void 0 ? _a : {};
+      !((_b = removedItem === null || removedItem === void 0 ? void 0 : removedItem.data) === null || _b === void 0 ? void 0 : _b.disable) && this._handleMultipleSelect(removedItem);
+    };
+    this.handleTagRemoveInTrigger = pos => {
+      const {
+        treeData
+      } = this.getStates();
+      const key = getKeyByPos(pos, treeData);
+      this.handleTagRemoveByKey(key);
+    };
   }
   init() {
     const isOpen = this.getProp('open') || this.getProp('defaultOpen');
@@ -730,8 +752,8 @@ export default class CascaderFoundation extends BaseFoundation {
         if (_notExist) {
           return false;
         }
-        const filteredPath = this.getItemPropPath(key, treeNodeFilterProp).join();
-        return filter(sugInput, data, filterTreeNode, false, filteredPath);
+        const filteredPath = this.getItemPropPath(key, treeNodeFilterProp);
+        return filter(sugInput, data, filterTreeNode, filteredPath);
       }).filter(item => filterTreeNode && !filterLeafOnly || this._isLeaf(item)).map(item => item.key);
     }
     this._adapter.updateStates({
@@ -753,6 +775,7 @@ export default class CascaderFoundation extends BaseFoundation {
     const isControlled = this._isControlledComponent();
     const newState = {};
     if (multiple) {
+      newState.isSearching = false;
       this._adapter.updateInputValue('');
       this._adapter.notifyOnSearch('');
       newState.checkedKeys = new Set([]);
@@ -855,18 +878,4 @@ export default class CascaderFoundation extends BaseFoundation {
       activeNode: data
     });
   }
-  handleTagRemove(e, tagValuePath) {
-    const {
-      keyEntities
-    } = this.getStates();
-    const {
-      disabled
-    } = this.getProps();
-    if (disabled) {
-      /* istanbul ignore next */
-      return;
-    }
-    const removedItem = Object.values(keyEntities).filter(item => _isEqual(item.valuePath, tagValuePath))[0];
-    !_isEmpty(removedItem) && !removedItem.data.disabled && this._handleMultipleSelect(removedItem);
-  }
 }

package/lib/es/cascader/util.d.ts

@@ -1,7 +1,13 @@
 export declare function isValid(val: any): boolean;
 export declare function normalizedArr(val: any): any[];
+/**
+ * @returns whether option includes sugInput.
+ * When filterTreeNode is a function,returns the result of filterTreeNode which called with (sugInput, target, option).
+ */
+export declare function filter(sugInput: string, option: any, filterTreeNode: any, filteredPath?: string[]): any;
 export declare function getKeysByValuePath(valuePath: (string | number)[][] | (string | number)[]): string[];
 export declare function getKeyByValuePath(valuePath: (string | number)[]): string;
 export declare function getValuePathByKey(key: string): string[];
+export declare function getKeyByPos(pos: string, treeData: any): string;
 export declare function convertDataToEntities(dataNodes: any): any;
 export declare function calcMergeType(autoMergeValue: boolean, leafOnly: boolean): string;

package/lib/es/cascader/util.js

@@ -14,6 +14,33 @@ export function normalizedArr(val) {
     return val;
   }
 }
+/**
+ * @returns whether option includes sugInput.
+ * When filterTreeNode is a function,returns the result of filterTreeNode which called with (sugInput, target, option).
+ */
+export function filter(sugInput, option, filterTreeNode, filteredPath) {
+  if (!filterTreeNode) {
+    return true;
+  }
+  let filterFn = filterTreeNode;
+  let target;
+  if (typeof filterTreeNode === 'boolean') {
+    filterFn = (targetVal, val) => {
+      const input = targetVal.toLowerCase();
+      return val.toLowerCase().includes(input);
+    };
+    // 当 filterTreeNode 是 bool 类型时，由 Cascader 内部判断是否符合筛选条件，使用 join('') 修复搜索英文逗号导致所有数据被匹配问题
+    // When the type of of filterTreeNode is bool, Cascader internally determines whether it meets the filtering conditions.
+    // Use join('') to fix the problem that searching for English commas causes all data to be matched.
+    target = filteredPath.join('');
+  } else {
+    // 当 filterTreeNode 为函数类型时，由用户判断是否符合筛选条件，使用 join(), 和原来保持一致
+    // When the type of of filterTreeNode is function, the user determines whether it meets the filtering conditions, 
+    // uses join() to be consistent with the previous version.
+    target = filteredPath.join();
+  }
+  return filterFn(sugInput, target, option);
+}
 /**
  * Traverse all the data by `treeData`.
  */
@@ -24,10 +51,12 @@ function traverseDataNodes(treeNodes, callback) {
     // Process node if is not root
     if (node) {
       const key = parent ? `${parent.key}${VALUE_SPLIT}${node.value}` : node.value;
+      const pos = parent ? getPosition(parent.pos, ind) : `${ind}`;
       item = {
         data: Object.assign({}, node),
         ind,
         key,
+        pos,
         level: parent ? parent.level + 1 : 0,
         parentKey: parent ? parent.key : null,
         path: parent ? [...parent.path, key] : [key],
@@ -60,6 +89,17 @@ export function getKeyByValuePath(valuePath) {
 export function getValuePathByKey(key) {
   return key.split(VALUE_SPLIT);
 }
+export function getKeyByPos(pos, treeData) {
+  const posArr = pos.split('-').map(item => Number(item));
+  let resultData = treeData;
+  let valuePath = [];
+  posArr.forEach((item, index) => {
+    var _a;
+    resultData = index === 0 ? resultData[item] : (_a = resultData === null || resultData === void 0 ? void 0 : resultData.children) === null || _a === void 0 ? void 0 : _a[item];
+    valuePath.push(resultData === null || resultData === void 0 ? void 0 : resultData.value);
+  });
+  return getKeyByValuePath(valuePath);
+}
 export function convertDataToEntities(dataNodes) {
   const keyEntities = {};
   traverseDataNodes(dataNodes, data => {

package/lib/es/datePicker/foundation.js

@@ -15,6 +15,7 @@ import { strings as inputStrings } from '../input/constants';
 import getInsetInputFormatToken from './_utils/getInsetInputFormatToken';
 import getInsetInputValueFromInsetInputStr from './_utils/getInsetInputValueFromInsetInputStr';
 import isValidTimeZone from './_utils/isValidTimeZone';
+import warning from '../utils/warning';
 /**
  * The datePicker foundation.js is responsible for maintaining the date value and the input box value, as well as the callback of both
  *  task 1. Accept the selected date change, update the date value, and update the input box value according to the date = > Notify the change
@@ -118,6 +119,8 @@ export default class DatePickerFoundation extends BaseFoundation {
             parsedV = zonedTimeToUtc(parsedV, prevTimeZone);
           }
           result.push(isValidTimeZone(timeZone) ? utcToZonedTime(parsedV, timeZone) : parsedV);
+        } else {
+          warning(true, `[Semi DatePicker] value cannot be parsed, value: ${String(v)}`);
         }
       }
     }

package/lib/es/dropdown/dropdown.css

@@ -7,6 +7,7 @@
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 .semi-dropdown-wrapper {
+  overflow-y: auto;
   box-shadow: var(--semi-shadow-elevated);
   position: relative;
   z-index: 1050;

package/lib/es/dropdown/dropdown.scss

@@ -7,6 +7,7 @@ $module: #{$prefix}-dropdown;
 .#{$module} {
     @include font-size-regular;
     &-wrapper {
+        overflow-y:auto; // prevent flow out of the radius limit area
         @include shadow-elevated;
         position: relative;
         z-index: $z-dropdown;

package/lib/es/image/previewInnerFoundation.js

@@ -224,6 +224,9 @@ export default class PreviewInnerFoundation extends BaseFoundation {
         return;
       }
       const preloadImages = getPreloadImagArr(imgSrc, currentIndex, preLoadGap, infinite);
+      if (preloadImages.length === 0) {
+        return;
+      }
       const Img = new Image();
       let index = 0;
       function callback(e) {

package/lib/es/select/foundation.js

@@ -1008,6 +1008,8 @@ export default class SelectFoundation extends BaseFoundation {
     if (filter) {
       this.clearInput(e);
     }
+    // after click showClear button, the select need to be focused
+    this.focus();
     this.clearSelected();
     // prevent this click open dropdown
     e.stopPropagation();

package/lib/es/select/select.scss

@@ -59,12 +59,12 @@ $overflowList: #{$prefix}-overflow-list;
 
     &-open,
     &-focus {
-        border: $border-thickness-control-focus solid $color-select_default-border-focus;
+        border: $width-select-border-focus solid $color-select_default-border-focus;
         outline: 0;
 
         &:hover {
             background-color: $color-select-bg-default;
-            border: $border-thickness-control-focus solid $color-select_default-border-focus;
+            border: $width-select-border-hover solid $color-select_default-border-focus;
         }
 
         // when click the trigger, trigger get the focus state, active style should take effect
@@ -124,9 +124,8 @@ $overflowList: #{$prefix}-overflow-list;
         }
 
         &:focus {
-            // border: $border-thickness-control-focus solid $color-select_default-border-focus;
             // when select is disabled, the border should not have active color
-            border: $border-thickness-control-focus solid transparent;
+            border: $width-select-border-focus solid transparent;
         }
 
         .#{$module}-selection,

package/lib/es/select/variables.scss

@@ -6,7 +6,8 @@ $color-select-bg-focus: var(--semi-color-fill-0); // 选择器输入框背景色
 $color-select-border-default: transparent; // 选择器输入框描边颜色
 $color-select-border-hover: $color-select-border-default;  // 选择器输入框描边颜色 - 悬浮
 $color-select-border-active: var(--semi-color-focus-border); // 选择器输入框描边颜色 - 按下态
-$color-select-border-focus: $color-select-border-active;// 选择器输入框描边颜色 - 悬停态
+$color-select-border-focus: $color-select-border-active;// 选择器输入框描边颜色 - 选中态
+
 $color-select_warning-bg-default: var(--semi-color-warning-light-default); // 警示选择器输入框背景色 - 默认态
 $color-select_warning-border-default: var(--semi-color-warning-light-default); // 警示选择器输入框描边颜色 - 默认态
 $color-select_warning-bg-hover: var(--semi-color-warning-light-hover); // 警示选择器输入框背景色 - 悬停态
@@ -15,6 +16,7 @@ $color-select_warning-bg-focus: var(--semi-color-warning-light-default); // 警
 $color-select_warning-border-focus: var(--semi-color-warning); // 警示选择器输入框描边颜色 - 选中态
 $color-select_warning-bg-active: var(--semi-color-warning-light-active); // 警示选择器输入框背景色 - 按下态
 $color-select_warning-border-active: var(--semi-color-warning-light-active); // 警示选择器输入框描边颜色 - 按下态
+
 $color-select_danger-bg-default: var(--semi-color-danger-light-default); // 报错选择器输入框背景色 - 默认态
 $color-select_danger-border-default: var(--semi-color-danger-light-default); // 报错选择器输入框描边颜色 - 默认态
 $color-select_danger-bg-hover: var(--semi-color-danger-light-hover); // 报错选择器输入框背景色 - 悬停态
@@ -23,7 +25,9 @@ $color-select_danger-bg-focus: var(--semi-color-danger-light-default); // 报错
 $color-select_danger-border-focus: var(--semi-color-danger); // 报错选择器输入框描边颜色 - 选中态
 $color-select_danger-bg-active: var(--semi-color-danger-light-active); // 报错选择器输入框背景色 - 按下态
 $color-select_danger-border-active: var(--semi-color-danger-light-active); // 报错选择器输入框描边颜色 - 按下态
-$color-select_default-border-focus: var(--semi-color-focus-border); // 选择器输入框描边颜色 - 选中态
+
+$color-select_default-border-focus: var(--semi-color-focus-border); // 默认选择器输入框描边颜色 - 选中态
+
 $color-select_main-text-default: var(--semi-color-text-0); // 选择器输入框回填内容文本颜色
 $color-select-icon-default: var(--semi-color-text-2); // 选择器输入框图标颜色
 $color-select_clearBtn-text-default: var(--semi-color-text-2); // 选择器输入框清空按钮颜色 - 默认态
@@ -34,6 +38,7 @@ $color-select_input_disabled-border: var(--semi-color-border); // 禁用选择
 $color-select_input_disabled-text: var(--semi-color-disabled-text); // 禁用选择器输入框回填内容文字颜色
 $color-select_input_disabled-bg-hover: var(--semi-color-disabled-fill); // 选择器输入框回填内容文字颜色 - 悬停态
 $color-select_input_placeholder-text: var(--semi-color-text-2); // 选择器输入框占位文本文字颜色
+
 $color-select_option_main-text: var(--semi-color-text-0); // 选择器菜单选项文本颜色
 $color-select_option_keyword-text: var(--semi-color-primary); // 选择器菜单选项匹配搜索结果文本颜色
 $color-select_option-bg-default: transparent; // 选择器菜单选项背景颜色 - 默认态
@@ -88,10 +93,6 @@ $spacing-select_option-paddingTop: $spacing-tight; // 选择器菜单项顶部
 $spacing-select_option-paddingBottom: $spacing-tight; // 选择器菜单项底部内边距
 
 
-// $spacing-select_option_first-marginTop: $spacing-extra-tight; // 选择器第一个菜单项顶部外边距
-// $spacing-select_option_last-marginBottom: $spacing-extra-tight; // 选择器最后一个菜单项顶部外边距
-
-
 $spacing-select_tag-marginTop: $spacing-super-tight - 1px; // 多项选择器标签顶部外边距
 $spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签右侧外边距
 $spacing-select_tag-marginBottom: $spacing-super-tight - 1px; // 多项选择器标签底部外边距

package/lib/es/tooltip/foundation.js

@@ -420,6 +420,7 @@ export default class Tooltip extends BaseFoundation {
     return null;
   }
   calcPosStyle(props) {
+    var _a;
     const {
       spacing,
       isOverFlow
@@ -470,6 +471,10 @@ export default class Tooltip extends BaseFoundation {
     const isTriggerNearLeft = middleX - containerRect.left < containerRect.right - middleX;
     const isTriggerNearTop = middleY - containerRect.top < containerRect.bottom - middleY;
     const isWrapperWidthOverflow = wrapperRect.width > innerWidth;
+    const scaled = Math.abs((wrapperRect === null || wrapperRect === void 0 ? void 0 : wrapperRect.width) - ((_a = this._adapter.getContainer()) === null || _a === void 0 ? void 0 : _a.clientWidth)) > 1;
+    if (scaled) {
+      SPACING = SPACING * wrapperRect.width / this._adapter.getContainer().clientWidth;
+    }
     switch (position) {
       case 'top':
         // left = middleX;
@@ -586,6 +591,12 @@ export default class Tooltip extends BaseFoundation {
     // Calculate container positioning relative to window
     left = left - containerRect.left;
     top = top - containerRect.top;
+    if (scaled) {
+      left /= wrapperRect.width / this._adapter.getContainer().clientWidth;
+    }
+    if (scaled) {
+      top /= wrapperRect.height / this._adapter.getContainer().clientHeight;
+    }
     /**
      * container为body时，如果position不为relative或absolute，这时trigger计算出的top/left会根据html定位（initial containing block）
      * 此时如果body有margin，则计算出的位置相对于body会有问题 fix issue #1368

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

@@ -60,9 +60,8 @@ export declare function calcMotionKeys(oldKeySet: Set<string>, newKeySet: Set<st
 /**
  * @returns whether option includes sugInput.
  * When filterTreeNode is a function,returns the result of filterTreeNode which called with (sugInput, target, option).
- * The filteredPath parameter will only be passed in when the Cascader calls the filter function
  */
-export declare function filter(sugInput: string, option: any, filterTreeNode: any, filterProps: any, filteredPath?: string): any;
+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, flag?: boolean): string[];
 export declare function getMotionKeys(eventKey: string, expandedKeys: Set<string>, keyEntities: KeyEntities): any[];

package/lib/es/tree/treeUtil.js

@@ -388,14 +388,13 @@ export function calcMotionKeys(oldKeySet, newKeySet, keyEntities) {
 /**
  * @returns whether option includes sugInput.
  * When filterTreeNode is a function,returns the result of filterTreeNode which called with (sugInput, target, option).
- * The filteredPath parameter will only be passed in when the Cascader calls the filter function
  */
-export function filter(sugInput, option, filterTreeNode, filterProps, filteredPath) {
+export function filter(sugInput, option, filterTreeNode, filterProps) {
   if (!filterTreeNode) {
     return true;
   }
   let filterFn = filterTreeNode;
-  let target = filteredPath !== null && filteredPath !== void 0 ? filteredPath : option;
+  let target = option;
   if (typeof filterTreeNode === 'boolean') {
     filterFn = (targetVal, val) => {
       const input = targetVal.toLowerCase();

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.52.0-beta.1",
+    "version": "2.52.1",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.52.0-beta.1",
+        "@douyinfe/semi-animation": "2.52.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "f06aca5797fda6a3f03a003ddd24591da9a4e6d4",
+    "gitHead": "aca346e8bf01599b2f0aa4aa3c1976638f87cdfb",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/select/foundation.ts

@@ -1022,6 +1022,8 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         if (filter) {
             this.clearInput(e);
         }
+        // after click showClear button, the select need to be focused
+        this.focus();
         this.clearSelected();
         // prevent this click open dropdown
         e.stopPropagation();

package/select/select.scss

@@ -59,12 +59,12 @@ $overflowList: #{$prefix}-overflow-list;
 
     &-open,
     &-focus {
-        border: $border-thickness-control-focus solid $color-select_default-border-focus;
+        border: $width-select-border-focus solid $color-select_default-border-focus;
         outline: 0;
 
         &:hover {
             background-color: $color-select-bg-default;
-            border: $border-thickness-control-focus solid $color-select_default-border-focus;
+            border: $width-select-border-hover solid $color-select_default-border-focus;
         }
 
         // when click the trigger, trigger get the focus state, active style should take effect
@@ -124,9 +124,8 @@ $overflowList: #{$prefix}-overflow-list;
         }
 
         &:focus {
-            // border: $border-thickness-control-focus solid $color-select_default-border-focus;
             // when select is disabled, the border should not have active color
-            border: $border-thickness-control-focus solid transparent;
+            border: $width-select-border-focus solid transparent;
         }
 
         .#{$module}-selection,

package/select/variables.scss

@@ -6,7 +6,8 @@ $color-select-bg-focus: var(--semi-color-fill-0); // 选择器输入框背景色
 $color-select-border-default: transparent; // 选择器输入框描边颜色
 $color-select-border-hover: $color-select-border-default;  // 选择器输入框描边颜色 - 悬浮
 $color-select-border-active: var(--semi-color-focus-border); // 选择器输入框描边颜色 - 按下态
-$color-select-border-focus: $color-select-border-active;// 选择器输入框描边颜色 - 悬停态
+$color-select-border-focus: $color-select-border-active;// 选择器输入框描边颜色 - 选中态
+
 $color-select_warning-bg-default: var(--semi-color-warning-light-default); // 警示选择器输入框背景色 - 默认态
 $color-select_warning-border-default: var(--semi-color-warning-light-default); // 警示选择器输入框描边颜色 - 默认态
 $color-select_warning-bg-hover: var(--semi-color-warning-light-hover); // 警示选择器输入框背景色 - 悬停态
@@ -15,6 +16,7 @@ $color-select_warning-bg-focus: var(--semi-color-warning-light-default); // 警
 $color-select_warning-border-focus: var(--semi-color-warning); // 警示选择器输入框描边颜色 - 选中态
 $color-select_warning-bg-active: var(--semi-color-warning-light-active); // 警示选择器输入框背景色 - 按下态
 $color-select_warning-border-active: var(--semi-color-warning-light-active); // 警示选择器输入框描边颜色 - 按下态
+
 $color-select_danger-bg-default: var(--semi-color-danger-light-default); // 报错选择器输入框背景色 - 默认态
 $color-select_danger-border-default: var(--semi-color-danger-light-default); // 报错选择器输入框描边颜色 - 默认态
 $color-select_danger-bg-hover: var(--semi-color-danger-light-hover); // 报错选择器输入框背景色 - 悬停态
@@ -23,7 +25,9 @@ $color-select_danger-bg-focus: var(--semi-color-danger-light-default); // 报错
 $color-select_danger-border-focus: var(--semi-color-danger); // 报错选择器输入框描边颜色 - 选中态
 $color-select_danger-bg-active: var(--semi-color-danger-light-active); // 报错选择器输入框背景色 - 按下态
 $color-select_danger-border-active: var(--semi-color-danger-light-active); // 报错选择器输入框描边颜色 - 按下态
-$color-select_default-border-focus: var(--semi-color-focus-border); // 选择器输入框描边颜色 - 选中态
+
+$color-select_default-border-focus: var(--semi-color-focus-border); // 默认选择器输入框描边颜色 - 选中态
+
 $color-select_main-text-default: var(--semi-color-text-0); // 选择器输入框回填内容文本颜色
 $color-select-icon-default: var(--semi-color-text-2); // 选择器输入框图标颜色
 $color-select_clearBtn-text-default: var(--semi-color-text-2); // 选择器输入框清空按钮颜色 - 默认态
@@ -34,6 +38,7 @@ $color-select_input_disabled-border: var(--semi-color-border); // 禁用选择
 $color-select_input_disabled-text: var(--semi-color-disabled-text); // 禁用选择器输入框回填内容文字颜色
 $color-select_input_disabled-bg-hover: var(--semi-color-disabled-fill); // 选择器输入框回填内容文字颜色 - 悬停态
 $color-select_input_placeholder-text: var(--semi-color-text-2); // 选择器输入框占位文本文字颜色
+
 $color-select_option_main-text: var(--semi-color-text-0); // 选择器菜单选项文本颜色
 $color-select_option_keyword-text: var(--semi-color-primary); // 选择器菜单选项匹配搜索结果文本颜色
 $color-select_option-bg-default: transparent; // 选择器菜单选项背景颜色 - 默认态
@@ -88,10 +93,6 @@ $spacing-select_option-paddingTop: $spacing-tight; // 选择器菜单项顶部
 $spacing-select_option-paddingBottom: $spacing-tight; // 选择器菜单项底部内边距
 
 
-// $spacing-select_option_first-marginTop: $spacing-extra-tight; // 选择器第一个菜单项顶部外边距
-// $spacing-select_option_last-marginBottom: $spacing-extra-tight; // 选择器最后一个菜单项顶部外边距
-
-
 $spacing-select_tag-marginTop: $spacing-super-tight - 1px; // 多项选择器标签顶部外边距
 $spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签右侧外边距
 $spacing-select_tag-marginBottom: $spacing-super-tight - 1px; // 多项选择器标签底部外边距

package/tooltip/foundation.ts

@@ -450,7 +450,10 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         const isTriggerNearTop = middleY - containerRect.top < containerRect.bottom - middleY;
         
         const isWrapperWidthOverflow = wrapperRect.width > innerWidth;
-
+        const scaled = Math.abs(wrapperRect?.width - this._adapter.getContainer()?.clientWidth) > 1;
+        if (scaled) {
+            SPACING = SPACING * wrapperRect.width/this._adapter.getContainer().clientWidth;
+        }
         switch (position) {
             case 'top':
                 // left = middleX;
@@ -570,6 +573,14 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         left = left - containerRect.left;
         top = top - containerRect.top;
 
+        if (scaled) {
+            left /= wrapperRect.width/this._adapter.getContainer().clientWidth;
+        }
+
+        if (scaled) {
+            top /= wrapperRect.height/this._adapter.getContainer().clientHeight;
+        }
+
         /**
          * container为body时，如果position不为relative或absolute，这时trigger计算出的top/left会根据html定位（initial containing block）
          * 此时如果body有margin，则计算出的位置相对于body会有问题 fix issue #1368
@@ -828,7 +839,6 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
 
             const halfHeight = triggerRect.height / 2;
             const halfWidth = triggerRect.width / 2;
-
             // 视口, 原空间与反向空间是否都不足判断
             // Viewport, whether the original space and the reverse space are insufficient to judge
             const isViewYOverFlow = this.isOverFlow(clientTop - marginTop, restClientBottom - marginBottom, wrapperRect.height + spacing);

package/tree/treeUtil.ts

@@ -422,14 +422,13 @@ export function calcMotionKeys(oldKeySet: Set<string>, newKeySet: Set<string>, k
 /**
  * @returns whether option includes sugInput.
  * When filterTreeNode is a function,returns the result of filterTreeNode which called with (sugInput, target, option).
- * The filteredPath parameter will only be passed in when the Cascader calls the filter function
  */
-export function filter(sugInput: string, option: any, filterTreeNode: any, filterProps: any, filteredPath?: string) {
+export function filter(sugInput: string, option: any, filterTreeNode: any, filterProps: any) {
     if (!filterTreeNode) {
         return true;
     }
     let filterFn = filterTreeNode;
-    let target = filteredPath ?? option;
+    let target = option;
     if (typeof filterTreeNode === 'boolean') {
         filterFn = (targetVal: string, val: any) => {
             const input = targetVal.toLowerCase();