@douyinfe/semi-foundation 2.5.1 → 2.7.0-beta.0

package/lib/cjs/datePicker/inputFoundation.js

@@ -12,13 +12,24 @@ exports.default = void 0;
 
 var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
 
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _set2 = _interopRequireDefault(require("lodash/set"));
+
+var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
+
+var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
+
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 
 var _formatter = require("./_utils/formatter");
 
 var _getDefaultFormatToken = require("./_utils/getDefaultFormatToken");
 
-/* eslint-disable max-len */
+var _getInsetInputFormatToken = _interopRequireDefault(require("./_utils/getInsetInputFormatToken"));
+
+var _getInsetInputValueFromInsetInputStr = _interopRequireDefault(require("./_utils/getInsetInputValueFromInsetInputStr"));
+
 const KEY_CODE_ENTER = 'Enter';
 const KEY_CODE_TAB = 'Tab';
 
@@ -78,7 +89,7 @@ class InputFoundation extends _foundation.default {
     this._adapter.notifyRangeInputFocus(e, rangeType);
   }
 
-  formatShowText(value) {
+  formatShowText(value, customFormat) {
     const {
       type,
       dateFnsLocale,
@@ -86,7 +97,7 @@ class InputFoundation extends _foundation.default {
       rangeSeparator
     } = this._adapter.getProps();
 
-    const formatToken = format || (0, _getDefaultFormatToken.getDefaultFormatTokenByType)(type);
+    const formatToken = customFormat || format || (0, _getDefaultFormatToken.getDefaultFormatTokenByType)(type);
     let text = '';
 
     switch (type) {
@@ -123,6 +134,188 @@ class InputFoundation extends _foundation.default {
     return text;
   }
 
+  handleInsetInputChange(options) {
+    const {
+      value,
+      valuePath,
+      insetInputValue
+    } = options;
+
+    const {
+      format,
+      type
+    } = this._adapter.getProps();
+
+    const insetFormatToken = (0, _getInsetInputFormatToken.default)({
+      type,
+      format
+    });
+    const newInsetInputValue = (0, _set2.default)((0, _cloneDeep2.default)(insetInputValue), valuePath, value);
+    const newInputValue = this.concatInsetInputValue({
+      insetInputValue: newInsetInputValue
+    });
+
+    this._adapter.notifyInsetInputChange({
+      insetInputValue: newInsetInputValue,
+      format: insetFormatToken,
+      insetInputStr: newInputValue
+    });
+  }
+  /**
+   * 只有传入的 format 符合 formatReg 时，才会使用用户传入的 format
+   * 否则会使用默认的 format 作为 placeholder
+   *
+   * The format passed in by the user will be used only if the incoming format conforms to formatReg
+   * Otherwise the default format will be used as placeholder
+   */
+
+
+  getInsetInputPlaceholder() {
+    const {
+      type,
+      format
+    } = this._adapter.getProps();
+
+    const insetInputFormat = (0, _getInsetInputFormatToken.default)({
+      type,
+      format
+    });
+    let datePlaceholder, timePlaceholder;
+
+    switch (type) {
+      case 'date':
+      case 'month':
+      case 'dateRange':
+        datePlaceholder = insetInputFormat;
+        break;
+
+      case 'dateTime':
+      case 'dateTimeRange':
+        [datePlaceholder, timePlaceholder] = insetInputFormat.split(' ');
+        break;
+    }
+
+    return {
+      datePlaceholder,
+      timePlaceholder
+    };
+  }
+  /**
+   * 从当前日期值或 inputValue 中解析出 insetInputValue
+   *
+   * Parse out insetInputValue from current date value or inputValue
+   */
+
+
+  getInsetInputValue(_ref) {
+    let {
+      value,
+      insetInputValue
+    } = _ref;
+
+    const {
+      type,
+      rangeSeparator,
+      format
+    } = this._adapter.getProps();
+
+    let inputValueStr = '';
+
+    if ((0, _isObject2.default)(insetInputValue)) {
+      inputValueStr = this.concatInsetInputValue({
+        insetInputValue
+      });
+    } else {
+      const insetInputFormat = (0, _getInsetInputFormatToken.default)({
+        format,
+        type
+      });
+      inputValueStr = this.formatShowText(value, insetInputFormat);
+    }
+
+    const newInsetInputValue = (0, _getInsetInputValueFromInsetInputStr.default)({
+      inputValue: inputValueStr,
+      type,
+      rangeSeparator
+    });
+    return newInsetInputValue;
+  }
+
+  concatInsetDateAndTime(_ref2) {
+    var _context;
+
+    let {
+      date,
+      time
+    } = _ref2;
+    return (0, _concat.default)(_context = "".concat(date, " ")).call(_context, time);
+  }
+
+  concatInsetDateRange(_ref3) {
+    var _context2, _context3;
+
+    let {
+      rangeStart,
+      rangeEnd
+    } = _ref3;
+
+    const {
+      rangeSeparator
+    } = this._adapter.getProps();
+
+    return (0, _concat.default)(_context2 = (0, _concat.default)(_context3 = "".concat(rangeStart)).call(_context3, rangeSeparator)).call(_context2, rangeEnd);
+  }
+
+  concatInsetInputValue(_ref4) {
+    let {
+      insetInputValue
+    } = _ref4;
+
+    const {
+      type
+    } = this._adapter.getProps();
+
+    let inputValue = '';
+
+    switch (type) {
+      case 'date':
+      case 'month':
+        inputValue = insetInputValue.monthLeft.dateInput;
+        break;
+
+      case 'dateRange':
+        inputValue = this.concatInsetDateRange({
+          rangeStart: insetInputValue.monthLeft.dateInput,
+          rangeEnd: insetInputValue.monthRight.dateInput
+        });
+        break;
+
+      case 'dateTime':
+        inputValue = this.concatInsetDateAndTime({
+          date: insetInputValue.monthLeft.dateInput,
+          time: insetInputValue.monthLeft.timeInput
+        });
+        break;
+
+      case 'dateTimeRange':
+        const rangeStart = this.concatInsetDateAndTime({
+          date: insetInputValue.monthLeft.dateInput,
+          time: insetInputValue.monthLeft.timeInput
+        });
+        const rangeEnd = this.concatInsetDateAndTime({
+          date: insetInputValue.monthRight.dateInput,
+          time: insetInputValue.monthRight.timeInput
+        });
+        inputValue = this.concatInsetDateRange({
+          rangeStart,
+          rangeEnd
+        });
+        break;
+    }
+
+    return inputValue;
+  }
+
 }
 
 exports.default = InputFoundation;

package/lib/cjs/datePicker/monthFoundation.d.ts

@@ -26,6 +26,7 @@ export interface MonthFoundationProps {
     focusRecordsRef: any;
     locale: any;
     localeCode: string;
+    multiple: boolean;
 }
 export declare type MonthDayInfo = {
     dayNumber: number;

package/lib/cjs/datePicker/monthsGridFoundation.d.ts

@@ -54,6 +54,7 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     isAnotherPanelHasOpened?: (currentRangeInput: 'rangeStart' | 'rangeEnd') => boolean;
     focusRecordsRef?: any;
     triggerRender?: (props: Record<string, any>) => any;
+    insetInput: boolean;
 }
 export interface MonthInfo {
     pickerDate: Date;

package/lib/cjs/datePicker/monthsGridFoundation.js

@@ -180,7 +180,7 @@ class MonthsGridFoundation extends _foundation.default {
   _initDatePickerFromValue(values) {
     let refreshPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     const monthLeft = this.getState('monthLeft');
-    const newMonthLeft = (0, _assign.default)({}, monthLeft);
+    const newMonthLeft = (0, _assign.default)({}, monthLeft); // REMOVE:
 
     this._adapter.updateMonthOnLeft(newMonthLeft);
 
@@ -197,6 +197,7 @@ class MonthsGridFoundation extends _foundation.default {
     if (refreshPicker) {
       this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
     } else {
+      // FIXME:
       this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_LEFT, newMonthLeft.pickerDate);
     }
 
@@ -598,7 +599,8 @@ class MonthsGridFoundation extends _foundation.default {
       selected: selectedSet,
       rangeStart,
       rangeEnd
-    } = this.getStates();
+    } = this.getStates(); // FIXME:
+
     const includeRange = (0, _includes2.default)(_context3 = ['dateRange', 'dateTimeRange']).call(_context3, type);
     const options = {
       closePanel: false

package/lib/cjs/datePicker/rtl.scss

@@ -181,5 +181,13 @@ $module: #{$prefix}-datepicker;
             padding-left: $spacing-datepicker_footer_compact-paddintRight;
             padding-right: auto;
         }
+
+        .#{$module}-inset-input {
+            &-separator {
+                border-right: $width-datepicker-border solid $color-datepicker_border-bg-default;
+                border-left: 0;
+                transform: translateX(-50%);
+            }
+        }
     }
 }

package/lib/cjs/datePicker/variables.scss

@@ -23,6 +23,14 @@ $width-datepicker_quick_control-borderRadius: var(--semi-border-radius-medium);
 $width-datepicker_slot-border: 1px; // 日期星期分割线宽度
 $width-datepicker_range_input-border: $border-thickness-control-focus;
 $width-datepicker_day_main-border: 1px;
+$height-datepicker_timeType_insetInput_yam: 100%; // 时间面板高度 - 内嵌输入框
+$height-datepicker_timeType_insetInput_tpk: 100%; // 时间面板高度 - 内嵌输入框
+$width-datepicker_insetInput_date_type_wrapper: 284px; // 日期类型内嵌输入框宽度
+$width-datepicker_insetInput_date_range_type_wrapper: $width-datepicker_insetInput_date_type_wrapper * 2; // 范围选择内嵌输入框宽度
+$width-datepicker_insetInput_month_type_wrapper: 204px; // 月份类型内嵌输入框宽度
+$height-datepicker_insetInput_separator: 32px;
+$height-datepicker_month_grid_yearType_insetInput: 312px;
+$height-datepicker_month_grid_timeType_insetInput: 314px;
 
 // Spacing
 $spacing-datepicker_day-marginX: ($width-datepicker_day - $width-datepicker_day_main) / 2; // 日期格子水平外边距
@@ -53,6 +61,14 @@ $spacing-datepicker_range_input_suffix-paddingLeft: 8px;
 $spacing-datepicker_range_input_suffix-paddingRight: 12px;
 $spacing-datepicker_range_input_clearbtn-paddingLeft: 8px;
 $spacing-datepicker_range_input_clearbtn-paddingRight: 12px;
+$spacing-datepicker_navigation_insetInput-paddingY: 8px; // 年月切换 header 垂直内边距 - 内嵌输入框
+$spacing-datepicker_insetInput_wrapper-margin: 8px;
+$spacing-datepicker_insetInput_wrapper-paddingY: 12px;
+$spacing-datepicker_insetInput_wrapper-paddingX: 16px;
+$spacing-datepicker_insetInput_wrapper-paddingBottom: 0;
+$spacing-datepicker_insetInput_separator-paddingY: 0;
+$spacing-datepicker_insetInput_separator-paddingX: 4px;
+
 
 // Color
 $color-datepicker_panel-bg-default: var(--semi-color-bg-3); // 日期选择器背景颜色
@@ -118,6 +134,7 @@ $color-datepicker_range_input_inputWrapper-bg-default: transparent;
 $color-datepicker_range_input_inputWrapper-bg-focus: var(--semi-color-fill-1);
 $color-datepicker_range_input_separator-text-active: var(--semi-color-text-0);
 $color-datepicker_day_main-border: var(--semi-color-primary-active);
+$color-datepicker_insetInput_separator: var(--semi-color-text-3);
 
 // Font
 $font-datepicker_range_input_prefix_suffix_clearbtn-fontWeight: 600;
@@ -144,9 +161,17 @@ $radius-datepicker_range_input_inputWrapper: var(--semi-border-radius-small);
 $height-datepicker_range_input-default: 32px;
 $height-datepicker_range_input-small: 24px;
 $height-datepicker_range_input-large: 40px;
+$width-datepicker_insetInput_date_type_wrapper_compact: 216px;
+$width-datepicker_insetInput_date_range_type_wrapper_compact: $width-datepicker_insetInput_date_type_wrapper_compact * 2;
+$width-datepicker_insetInput_month_type_wrapper_compact: 195px;
+$height-datepicker_insetInput_tpk_compact: 100%;
+$height-datepicker_timeType_insetInput_yam_compact: 100%;
+$height-datepicker_insetInput_wrapper_compact: 28px;
 
 $lineHeight-datepicker_compact: 20px;
 $lineHeight-datepicker_weekday_item_compact: 28px;
+$height-datepicker_insetInput_compact: 26px;
+$fontSize-datepicker_insetInput_compact-fontSize: 12px;
 
 $spacing-datepicker_switch_compact-padding: 6px;
 $spacing-datepicker_day_compact-margin: ($width-datepicker_day_compact - $width-datepicker_day_main_compact) / 2;
@@ -163,6 +188,11 @@ $spacing-datepicker_footer_compact-paddintBottom: 10px;
 $spacing-datepicker_footer_compact-paddintRight: 8px;
 $spacing-datepicker_scrolllist_shade_pre_compact-marginTop: -17px;
 $spacing-datepicker_scrolllist_shade_post_compact-marginTop: 17px;
+$spacing-datepicker_insetInput_wrapper_compact-margin: 4px;
+$spacing-datepicker_insetInput_wrapper_compact-paddingY: 8px;
+$spacing-datepicker_insetInput_wrapper_compact-paddingX: 8px;
+$spacing-datepicker_insetInput_wrapper_compact-paddingBottom: 0;
+$spacing-datepicker_insetInput_wrapper_rangeType_compact-paddingTop: 0;
 
 // Radius
 $radius-datepicker_range_input: var(--semi-border-radius-small);

package/lib/cjs/table/table.css

@@ -380,7 +380,7 @@
   position: relative;
   z-index: 1;
   padding: 16px 12px;
-  color: var(--semi-color-disabled-bg);
+  color: var(--semi-color-text-2);
   font-size: 14px;
   text-align: center;
   background: transparent;

package/lib/cjs/table/table.scss

@@ -466,7 +466,7 @@ $module: #{$prefix}-table;
         position: relative;
         z-index: 1;
         padding: #{$spacing-table-paddingY} #{$spacing-table-paddingX};
-        color: $color-table_disabled-bg-default;
+        color: $color-table_placeholder-text-default;
         font-size: #{$font-table_base-fontSize};
         text-align: center;
         background: $color-table_pl-bg-default;

package/lib/cjs/table/variables.scss

@@ -73,6 +73,7 @@ $color-table_sorter-text-hover: var(--semi-color-text-2); // 表格排序按钮
 $color-table_page-text-default: var(--semi-color-text-2); // 表格翻页器文本颜色
 $color-table_resizer-bg-default: var(--semi-color-primary); // 表格拉伸标示线颜色
 $color-table_selection-bg-default: rgba(var(--semi-grey-0), 1); // 表格分组背景色
+$color-table_placeholder-text-default: var(--semi-color-text-2); // 表格空数据文本颜色
 
 // Other
 $font-table_base-fontSize: 14px; // 表格默认文本字号

package/lib/cjs/tag/tag.css

@@ -10,6 +10,7 @@
   user-select: none;
   overflow: hidden;
   white-space: nowrap;
+  vertical-align: bottom;
 }
 .semi-tag-default, .semi-tag-small {
   font-size: 12px;

package/lib/cjs/tag/tag.scss

@@ -18,6 +18,7 @@ $types: "ghost", "solid", "light";
     // hidden avatar tag image
     overflow: hidden;
     white-space: nowrap;
+    vertical-align: bottom;
 
     &-default,
     &-small {

package/lib/cjs/tooltip/foundation.js

@@ -538,25 +538,25 @@ class Tooltip extends _foundation.default {
         break;
 
       case 'leftTopOver':
-        left = triggerRect.left;
-        top = triggerRect.top;
+        left = triggerRect.left - SPACING;
+        top = triggerRect.top - SPACING;
         break;
 
       case 'rightTopOver':
-        left = triggerRect.right;
-        top = triggerRect.top;
+        left = triggerRect.right + SPACING;
+        top = triggerRect.top - SPACING;
         translateX = -1;
         break;
 
       case 'leftBottomOver':
-        left = triggerRect.left;
-        top = triggerRect.bottom;
+        left = triggerRect.left - SPACING;
+        top = triggerRect.bottom + SPACING;
         translateY = -1;
         break;
 
       case 'rightBottomOver':
-        left = triggerRect.right;
-        top = triggerRect.bottom;
+        left = triggerRect.right + SPACING;
+        top = triggerRect.bottom + SPACING;
         translateX = -1;
         translateY = -1;
         break;

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

@@ -27,7 +27,7 @@ export interface BasicOnChange {
     (node: BasicTreeNodeData[] | BasicTreeNodeData, e: any): void;
     (value: BasicTreeNodeData['value'] | Array<BasicTreeNodeData['value']>, node: BasicTreeNodeData[] | BasicTreeNodeData, e: any): void;
 }
-export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize' | 'renderFullLabel' | 'renderLabel' | 'autoExpandParent' | 'className' | 'defaultExpandAll' | 'defaultExpandedKeys' | 'defaultValue' | 'disabled' | 'emptyContent' | 'expandAction' | 'expandedKeys' | 'filterTreeNode' | 'labelEllipsis' | 'leafOnly' | 'multiple' | 'onChangeWithObject' | 'showClear' | 'showFilteredOnly' | 'style' | 'treeData' | 'treeNodeFilterProp' | 'value' | 'onExpand' | 'onSearch' | 'expandAll' | 'disableStrictly' | 'aria-label' | 'checkRelation'> {
+export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize' | 'renderFullLabel' | 'renderLabel' | 'autoExpandParent' | 'className' | 'defaultExpandAll' | 'defaultExpandedKeys' | 'defaultValue' | 'disabled' | 'emptyContent' | 'expandAction' | 'expandedKeys' | 'filterTreeNode' | 'labelEllipsis' | 'leafOnly' | 'multiple' | 'onChangeWithObject' | 'showClear' | 'showFilteredOnly' | 'style' | 'treeData' | 'treeNodeFilterProp' | 'value' | 'onExpand' | 'expandAll' | 'disableStrictly' | 'aria-label' | 'checkRelation'> {
     motion?: Motion;
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;
@@ -63,6 +63,7 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize'
     renderSelectedItem?: BasicRenderSelectedItem;
     getPopupContainer?: () => HTMLElement;
     onBlur?: (e: any) => void;
+    onSearch?: (sunInput: string, filteredExpandedKeys: string[]) => void;
     onChange?: BasicOnChange;
     onFocus?: (e: any) => void;
     onVisibleChange?: (isVisible: boolean) => void;
@@ -84,7 +85,7 @@ export interface TreeSelectAdapter<P = Record<string, any>, S = Record<string, a
     rePositionDropdown: () => void;
     updateState: (states: Partial<BasicTreeSelectInnerData>) => void;
     notifySelect: (selectedKeys: string, selected: boolean, selectedNode: BasicTreeNodeData) => void;
-    notifySearch: (input: string) => void;
+    notifySearch: (input: string, filteredExpandedKeys: string[]) => void;
     cacheFlattenNodes: (bool: boolean) => void;
     openMenu: () => void;
     closeMenu: (cb?: () => void) => void;

package/lib/cjs/treeSelect/foundation.js

@@ -28,6 +28,8 @@ var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
 var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
 
 var _every = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/every"));
@@ -193,7 +195,7 @@ class TreeSelectFoundation extends _foundation.default {
     const isSearching = Boolean(inputValue);
     const treeNodeProps = {
       eventKey: key,
-      expanded: isSearching ? filteredExpandedKeys.has(key) : expandedKeys.has(key),
+      expanded: isSearching && !this._isExpandControlled() ? filteredExpandedKeys.has(key) : expandedKeys.has(key),
       selected: (0, _includes.default)(selectedKeys).call(selectedKeys, key),
       checked: realChecked,
       halfChecked: realHalfChecked,
@@ -480,18 +482,23 @@ class TreeSelectFoundation extends _foundation.default {
 
   clearInput() {
     const {
+      flattenNodes,
       expandedKeys,
       selectedKeys,
       keyEntities,
       treeData
     } = this.getStates();
+    const newExpandedKeys = new _set.default(expandedKeys);
+
+    const isExpandControlled = this._isExpandControlled();
+
     const expandedOptsKeys = (0, _treeUtil.findAncestorKeys)(selectedKeys, keyEntities);
-    (0, _forEach.default)(expandedOptsKeys).call(expandedOptsKeys, item => expandedKeys.add(item));
-    const flattenNodes = (0, _treeUtil.flattenTreeData)(treeData, expandedKeys);
+    (0, _forEach.default)(expandedOptsKeys).call(expandedOptsKeys, item => newExpandedKeys.add(item));
+    const newFlattenNodes = (0, _treeUtil.flattenTreeData)(treeData, newExpandedKeys);
 
     this._adapter.updateState({
-      expandedKeys,
-      flattenNodes,
+      expandedKeys: isExpandControlled ? expandedKeys : newExpandedKeys,
+      flattenNodes: isExpandControlled ? flattenNodes : newFlattenNodes,
       inputValue: '',
       motionKeys: new _set.default([]),
       filteredKeys: new _set.default([]),
@@ -505,6 +512,7 @@ class TreeSelectFoundation extends _foundation.default {
     this._adapter.updateInputValue(sugInput);
 
     const {
+      flattenNodes,
       expandedKeys,
       selectedKeys,
       keyEntities,
@@ -515,15 +523,16 @@ class TreeSelectFoundation extends _foundation.default {
       filterTreeNode,
       treeNodeFilterProp
     } = this.getProps();
+    const newExpandedKeys = new _set.default(expandedKeys);
     let filteredOptsKeys = [];
     let expandedOptsKeys = [];
-    let flattenNodes = [];
+    let newFlattenNodes = [];
     let filteredShownKeys = new _set.default([]);
 
     if (!sugInput) {
       expandedOptsKeys = (0, _treeUtil.findAncestorKeys)(selectedKeys, keyEntities);
-      (0, _forEach.default)(expandedOptsKeys).call(expandedOptsKeys, item => expandedKeys.add(item));
-      flattenNodes = (0, _treeUtil.flattenTreeData)(treeData, expandedKeys);
+      (0, _forEach.default)(expandedOptsKeys).call(expandedOptsKeys, item => newExpandedKeys.add(item));
+      newFlattenNodes = (0, _treeUtil.flattenTreeData)(treeData, newExpandedKeys);
     } else {
       var _context3, _context4;
 
@@ -536,17 +545,19 @@ class TreeSelectFoundation extends _foundation.default {
       expandedOptsKeys = (0, _treeUtil.findAncestorKeys)(filteredOptsKeys, keyEntities, false);
       const shownChildKeys = (0, _treeUtil.findDescendantKeys)(filteredOptsKeys, keyEntities, true);
       filteredShownKeys = new _set.default([...shownChildKeys, ...expandedOptsKeys]);
-      flattenNodes = (0, _treeUtil.flattenTreeData)(treeData, new _set.default(expandedOptsKeys), showFilteredOnly && filteredShownKeys);
+      newFlattenNodes = (0, _treeUtil.flattenTreeData)(treeData, new _set.default(expandedOptsKeys), showFilteredOnly && filteredShownKeys);
     }
 
-    this._adapter.notifySearch(sugInput);
+    const newFilteredExpandedKeys = new _set.default(expandedOptsKeys);
+
+    this._adapter.notifySearch(sugInput, (0, _from.default)(newFilteredExpandedKeys));
 
     this._adapter.updateState({
-      expandedKeys,
-      flattenNodes,
+      expandedKeys: this._isExpandControlled() ? expandedKeys : newExpandedKeys,
+      flattenNodes: this._isExpandControlled() ? flattenNodes : newFlattenNodes,
       motionKeys: new _set.default([]),
       filteredKeys: new _set.default(filteredOptsKeys),
-      filteredExpandedKeys: new _set.default(expandedOptsKeys),
+      filteredExpandedKeys: newFilteredExpandedKeys,
       filteredShownKeys
     });
   }
@@ -785,7 +796,9 @@ class TreeSelectFoundation extends _foundation.default {
       return;
     }
 
-    if (isSearching) {
+    const isExpandControlled = this._isExpandControlled();
+
+    if (isSearching && !isExpandControlled) {
       this.handleNodeExpandInSearch(e, treeNode);
       return;
     }
@@ -813,7 +826,7 @@ class TreeSelectFoundation extends _foundation.default {
 
     this._adapter.cacheFlattenNodes(motionType === 'hide' && this._isAnimated());
 
-    if (!this._isExpandControlled()) {
+    if (!isExpandControlled) {
       const flattenNodes = (0, _treeUtil.flattenTreeData)(treeData, expandedKeys);
       const motionKeys = this._isAnimated() ? (0, _treeUtil.getMotionKeys)(eventKey, expandedKeys, keyEntities) : [];
       const newState = {

package/lib/es/button/button.css

@@ -44,6 +44,9 @@
   vertical-align: middle;
   white-space: nowrap;
 }
+.semi-button:focus {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-button-danger {
   background-color: var(--semi-color-danger);
   color: white;
@@ -57,6 +60,9 @@
 .semi-button-danger.semi-button-light, .semi-button-danger.semi-button-borderless {
   color: var(--semi-color-danger);
 }
+.semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus {
+  outline-color: var(--semi-color-danger-light-active);
+}
 .semi-button-warning {
   background-color: var(--semi-color-warning);
   color: white;
@@ -70,6 +76,9 @@
 .semi-button-warning.semi-button-light, .semi-button-warning.semi-button-borderless {
   color: var(--semi-color-warning);
 }
+.semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus {
+  outline-color: var(--semi-color-warning-light-active);
+}
 .semi-button-tertiary {
   background-color: var(--semi-color-tertiary);
   color: white;

package/lib/es/button/button.scss

@@ -23,6 +23,11 @@ $module: #{$prefix}-button;
     outline: none;
     vertical-align: middle;
     white-space: nowrap;
+
+    &:focus {
+        outline: $width-button-outline solid $color-button_primary-outline-focus;
+    }
+
     &-danger {
         background-color: $color-button_danger-bg-default;
         color: $color-button_danger-text-default;
@@ -36,6 +41,9 @@ $module: #{$prefix}-button;
         &.#{$module}-borderless {
             color: $color-button_danger-bg-default;
         }
+        &:not(.#{$module}-borderless):not(.#{$module}-light):focus {
+            outline-color: $color-button_danger-outline-focus;
+        }
     }
     &-warning {
         background-color: $color-button_warning-bg-default;
@@ -50,6 +58,9 @@ $module: #{$prefix}-button;
         &.#{$module}-borderless {
             color: $color-button_warning-bg-default;
         }
+        &:not(.#{$module}-borderless):not(.#{$module}-light):focus {
+            outline-color: $color-button_warning-outline-focus;
+        }
     }
     &-tertiary {
         background-color: $color-button_tertiary-bg-default;

package/lib/es/button/variables.scss

@@ -10,6 +10,7 @@ $color-button_primary-text-hover: white; // 主要按钮文字颜色 - 悬浮
 $color-button_primary-bg-active: var(--semi-color-primary-active); // 主要按钮背景颜色 - 按下
 $color-button_primary-border-active: var(--semi-color-primary-active); // 主要按钮描边颜色 - 按下
 $color-button_primary-text-active: white; // 主要按钮文字颜色 - 按下
+$color-button_primary-outline-focus: var(--semi-color-primary-light-active); // 主要按钮轮廓 - 聚焦
 
 // secondary
 $color-button_secondary-bg-default: var(--semi-color-secondary); // 次要按钮背景颜色
@@ -36,6 +37,7 @@ $color-button_danger-text-hover: white; // 危险按钮文字颜色 - 悬浮
 $color-button_danger-bg-active: var(--semi-color-danger-active); // 危险按钮背景颜色 - 按下
 $color-button_danger-border-active: var(--semi-color-danger-active); // 危险按钮描边颜色 - 按下
 $color-button_danger-text-active: white; // 危险按钮文字颜色 - 按下
+$color-button_danger-outline-focus: var(--semi-color-danger-light-active); // 危险按钮轮廓 - 聚焦
 
 // warning
 $color-button_warning-bg-default: var(--semi-color-warning); // 警告按钮背景颜色
@@ -49,6 +51,7 @@ $color-button_warning-text-hover: white; // 警告按钮文字颜色 - 悬浮
 $color-button_warning-bg-active: var(--semi-color-warning-active); // 警告按钮背景颜色 - 按下
 $color-button_warning-border-active: var(--semi-color-warning-active); // 警告按钮描边颜色 - 按下
 $color-button_warning-text-active: white; // 警告按钮文字颜色 - 按下
+$color-button_warning-outline-focus: var(--semi-color-warning-light-active); // 警告按钮轮廓 - 聚焦
 
 // tertiary
 $color-button_tertiary-bg-default: var(--semi-color-tertiary); // 第三按钮背景颜色
@@ -134,3 +137,4 @@ $height-button_default: $height-control-default; // 按钮高度 - 默认
 $width-button-border: $border-thickness;  // 按钮描边宽度
 $radius-button: var(--semi-border-radius-small); // 按钮圆角大小
 $radius-button_group: $radius-button; // 按钮组圆角大小
+$width-button-outline: 2px; // 按钮轮廓宽度