@douyinfe/semi-foundation 2.12.1-alpha.1 → 2.13.0

package/autoComplete/foundation.ts

@@ -47,6 +47,8 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
         super({ ...adapter });
     }
 
+    isPanelOpen = false;
+
     init(): void {
         this._setDropdownWidth();
 
@@ -62,7 +64,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
         }
 
         // When both defaultValue and value exist, finally the value of value will be taken as initValue
-        let initValue = '';
+        let initValue: string;
         if (typeof defaultValue !== 'undefined') {
             initValue = defaultValue;
         }
@@ -97,20 +99,27 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
     handleInputClick(e?: MouseEvent): void {
         const { options } = this.getStates();
         const { disabled } = this.getProps();
-        if (options.length && !disabled) {
-            this.openDropdown();
+        if (!disabled) {
+            if (this.isPanelOpen) {
+                this.closeDropdown();
+            } else {
+                this.openDropdown();
+            }
         }
     }
 
     openDropdown(): void {
+        this.isPanelOpen = true;
         this._adapter.toggleListVisible(true);
         this._setDropdownWidth();
         // this._adapter.registerClickOutsideHandler(e => this.closeDropdown(e));
         this._adapter.notifyDropdownVisibleChange(true);
         this.bindKeyBoardEvent();
+        this._modifyFocusIndexOnPanelOpen();
     }
 
     closeDropdown(e?: any): void {
+        this.isPanelOpen = false;
         this._adapter.toggleListVisible(false);
         // this._adapter.unregisterClickOutsideHandler();
         this._adapter.notifyDropdownVisibleChange(false);
@@ -143,6 +152,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
         this._adapter.updateInputValue(inputValue);
         this._adapter.notifySearch(inputValue);
         this._adapter.notifyChange(inputValue);
+        this._modifyFocusIndex(inputValue);
     }
 
     handleSelect(option: StateOptionItem, optionIndex?: number): void {
@@ -156,7 +166,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
                 'Warning: [Semi AutoComplete] renderSelectedItem must return string, please check your function return'
             );
         } else {
-            newInputValue = option.label;
+            newInputValue = option.value;
         }
 
         // 1. trigger onSelect
@@ -207,7 +217,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
     }
 
     handleValueChange(propValue: any) {
-        let { data } = this.getProps();
+        let { data, defaultActiveFirstOption } = this.getProps();
         let selectedValue = '';
         if (this._backwardLabelInValue() && Object.prototype.toString.call(propValue) === '[object Object]') {
             selectedValue = propValue.value;
@@ -219,10 +229,10 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
 
         const options = this._generateList(data);
         // Get the option whose value match from options
-        let selectedOption: StateOptionItem | Array<StateOptionItem> = options.filter(option => option.value === selectedValue);
+        let selectedOption: StateOptionItem | Array<StateOptionItem> = options.filter(option => renderSelectedItem(option) === selectedValue);
         const canMatchInData = selectedOption.length;
 
-        const selectedOptionIndex = options.findIndex(option => option.value === selectedValue);
+        const selectedOptionIndex = options.findIndex(option => renderSelectedItem(option) === selectedValue);
 
         let inputValue = '';
         if (canMatchInData) {
@@ -234,15 +244,45 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
         }
         this._adapter.updateInputValue(inputValue);
         this.updateSelection(canMatchInData ? selectedOption : null);
-        this._adapter.updateFocusIndex(selectedOptionIndex);
+        if (selectedOptionIndex === -1 && defaultActiveFirstOption) {
+            this._adapter.updateFocusIndex(0);
+        } else {
+            this._adapter.updateFocusIndex(selectedOptionIndex);
+        }
     }
 
+    _modifyFocusIndex(searchValue) {
+        let { focusIndex } = this.getStates();
+
+        let { data, defaultActiveFirstOption } = this.getProps();
+
+        let renderSelectedItem = this._getRenderSelectedItem();
+
+        const options = this._generateList(data);
+
+        const selectedOptionIndex = options.findIndex(option => renderSelectedItem(option) === searchValue);
+
+        if (selectedOptionIndex === -1 && defaultActiveFirstOption) {
+            if (focusIndex !== 0) {
+                this._adapter.updateFocusIndex(0);
+            }
+        } else {
+            if (selectedOptionIndex !== focusIndex) {
+                this._adapter.updateFocusIndex(selectedOptionIndex);
+            }
+        }
+    }
+
+    _modifyFocusIndexOnPanelOpen() {
+        let { inputValue } = this.getStates();
+        this._modifyFocusIndex(inputValue);
+    }
 
     _getRenderSelectedItem() {
         let { renderSelectedItem } = this.getProps();
 
         if (typeof renderSelectedItem === 'undefined') {
-            renderSelectedItem = (option: any) => option.label;
+            renderSelectedItem = (option: any) => option.value;
         } else if (renderSelectedItem && typeof renderSelectedItem === 'function') {
             // do nothing
         }
@@ -345,7 +385,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
         if (focusIndex !== -1 && options.length !== 0) {
             const visibleOptions = options.filter((item: StateOptionItem) => item.show);
             const selectedOption = visibleOptions[focusIndex];
-            this.handleSelect(selectedOption);
+            this.handleSelect(selectedOption, focusIndex);
         } else if (visible) {
             // this.close();
         }
@@ -357,7 +397,6 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
 
     handleFocus(e: FocusEvent) {
         this._adapter.notifyFocus(e);
-        this.openDropdown();
     }
 
     handleBlur(e: FocusEvent) {

package/button/button.scss

@@ -47,7 +47,7 @@ $module: #{$prefix}-button;
         }
         &.#{$module}-light,
         &.#{$module}-borderless {
-            color: $color-button_danger-bg-default;
+            color: $color-button_danger_borderless-text-default;
         }
         &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
             outline: $width-button-outline solid $color-button_danger-outline-focus;
@@ -64,7 +64,7 @@ $module: #{$prefix}-button;
         }
         &.#{$module}-light,
         &.#{$module}-borderless {
-            color: $color-button_warning-bg-default;
+            color: $color-button_warning_borderless-text-default;
         }
         &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
             outline: $width-button-outline solid $color-button_warning-outline-focus;
@@ -96,7 +96,7 @@ $module: #{$prefix}-button;
 
         &.#{$module}-light,
         &.#{$module}-borderless {
-            color: $color-button_primary-bg-default;
+            color: $color-button_primary_borderless-text-default;
         }
     }
     &-secondary {
@@ -112,7 +112,7 @@ $module: #{$prefix}-button;
 
         &.#{$module}-light,
         &.#{$module}-borderless {
-            color: $color-button_secondary-bg-default;
+            color: $color-button_secondary_borderless-text-default;
         }
     }
     &-disabled {

package/button/variables.scss

@@ -12,6 +12,8 @@ $color-button_primary-border-active: var(--semi-color-primary-active); // 主要
 $color-button_primary-text-active: rgba(var(--semi-white), 1); // 主要按钮文字颜色 - 按下
 $color-button_primary-outline-focus: var(--semi-color-primary-light-active); // 主要按钮轮廓 - 聚焦
 
+$color-button_primary_borderless-text-default: var(--semi-color-primary); // 主要按钮无边框文字颜色
+
 // secondary
 $color-button_secondary-bg-default: var(--semi-color-secondary); // 次要按钮背景颜色
 $color-button_secondary-border-default: var(--semi-color-secondary); // 次要按钮描边颜色
@@ -25,6 +27,8 @@ $color-button_secondary-bg-active: var(--semi-color-secondary-active); // 次要
 $color-button_secondary-border-active: var(--semi-color-secondary-active); // 次要按钮描边颜色 - 按下
 $color-button_secondary-text-active: rgba(var(--semi-white), 1); // 次要按钮文字颜色 - 按下
 
+$color-button_secondary_borderless-text-default: var(--semi-color-secondary); // 次要按钮无边框文字颜色
+
 // danger
 $color-button_danger-bg-default: var(--semi-color-danger); // 危险按钮背景颜色
 $color-button_danger-border-default: var(--semi-color-danger); // 危险按钮描边颜色
@@ -39,6 +43,8 @@ $color-button_danger-border-active: var(--semi-color-danger-active); // 危险
 $color-button_danger-text-active: rgba(var(--semi-white), 1); // 危险按钮文字颜色 - 按下
 $color-button_danger-outline-focus: var(--semi-color-danger-light-active); // 危险按钮轮廓 - 聚焦
 
+$color-button_danger_borderless-text-default: var(--semi-color-danger); // 危险按钮无边框文字颜色
+
 // warning
 $color-button_warning-bg-default: var(--semi-color-warning); // 警告按钮背景颜色
 $color-button_warning-border-default: var(--semi-color-warning); // 警告按钮描边颜色
@@ -53,6 +59,8 @@ $color-button_warning-border-active: var(--semi-color-warning-active); // 警告
 $color-button_warning-text-active: rgba(var(--semi-white), 1); // 警告按钮文字颜色 - 按下
 $color-button_warning-outline-focus: var(--semi-color-warning-light-active); // 警告按钮轮廓 - 聚焦
 
+$color-button_warning_borderless-text-default: var(--semi-color-warning); // 警告按钮无边框文字颜色
+
 // tertiary
 $color-button_tertiary-bg-default: var(--semi-color-tertiary); // 第三按钮背景颜色
 $color-button_tertiary-border-default: var(--semi-color-tertiary); // 第三按钮描边颜色
@@ -79,10 +87,10 @@ $color-button_disabled-bg-hover: var(--semi-color-disabled-bg); // 禁用按钮
 $color-button_light-bg-default: var(--semi-color-fill-0); // 浅色按钮背景颜色
 $color-button_light-bg-hover: var(--semi-color-fill-1); // 禁用按钮背景颜色 - 悬浮
 $color-button_light-bg-active: var(--semi-color-fill-2); // 禁用按钮背景颜色 - 按下
-$color-button_light-border-default: transparent; // 浅色按钮描边颜色 
+$color-button_light-border-default: transparent; // 浅色按钮描边颜色
 $color-button_light-border-hover: $color-button_light-border-default; // 浅色按钮描边颜色 - 悬浮
 $color-button_light-border-active: $color-button_light-border-hover; // 浅色按钮描边颜色 - 按下
-$width-button_light-border: 0;  // 浅色按钮描边宽度
+$width-button_light-border: 0; // 浅色按钮描边宽度
 
 // borderless
 $color-button_borderless-text-default: var(--semi-color-primary); // 无背景按钮背景颜色
@@ -126,7 +134,7 @@ $spacing-button_iconOnly_small-paddingTop: $spacing-extra-tight; // 图标按钮
 $spacing-button_iconOnly_small-paddingBottom: $spacing-extra-tight; // 图标按钮底部内边距 - 小尺寸
 
 // margin
-$spacing-button_iconOnly_content-marginLeft: $spacing-tight;  // 按钮左侧图标距离文字间距
+$spacing-button_iconOnly_content-marginLeft: $spacing-tight; // 按钮左侧图标距离文字间距
 $spacing-button_iconOnly_content-marginRight: $spacing-tight; // 按钮右侧图标距离文字间距
 
 $font-button-fontWeight: $font-weight-bold; // 按钮文字字重
@@ -134,7 +142,7 @@ $height-button_large: $height-control-large; // 按钮高度 - 大尺寸
 $height-button_small: $height-control-small; // 按钮高度 - 小尺寸
 $height-button_default: $height-control-default; // 按钮高度 - 默认
 
-$width-button-border: $border-thickness;  // 按钮描边宽度
+$width-button-border: $border-thickness; // 按钮描边宽度
 $radius-button: var(--semi-border-radius-small); // 按钮圆角大小
 $radius-button_group: $radius-button; // 按钮组圆角大小
 $width-button-outline: 2px; // 按钮轮廓宽度

package/checkbox/checkbox.scss

@@ -103,7 +103,12 @@ $module: #{$prefix}-checkbox;
         }
 
         &-pureCardType {
-            display: none;
+            // Reasons to use opacity:0 & width: 0 instead of display: none
+            // The a11y keyboard focus event of the checkbox depends on the implementation of the input focus/blur event
+            // input focus/blur cannot take effect when display: none
+            opacity: 0;
+            width: 0;
+            margin-right: 0 !important;
         }
     }
 
@@ -347,6 +352,14 @@ $module: #{$prefix}-checkbox;
         color: $color-checkbox_extra-text-default;
         margin-top: $spacing-checkbox_extra-marginTop;
     }
+
+    &-focus {
+        outline: $width-checkbox-outline solid $color-checkbox_primary-outline-focus;
+        
+        &-border {
+            box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-hover;
+        }
+    }
 }
 
 .#{$module}Group {

package/checkbox/checkboxFoundation.ts

@@ -23,6 +23,8 @@ export interface CheckboxAdapter<P = Record<string, any>, S = Record<string, any
     notifyChange: (event: BasicCheckboxEvent) => void;
     setAddonId: () => void;
     setExtraId: () => void;
+    setFocusVisible: (focusVisible: boolean) => void;
+    focusCheckboxEntity: () => void;
 }
 
 class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CheckboxAdapter<P, S>, P, S> {
@@ -31,6 +33,8 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
         super({ ...adapter });
     }
 
+    clickState = false;
+
     init() {
         const { children, extra, extraId, addonId } = this.getProps();
         if (children && !addonId) {
@@ -77,6 +81,12 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
             return;
         }
 
+        if (e?.type === 'click') {
+            this.clickState = true;
+        }
+
+        this._adapter.focusCheckboxEntity();
+
         const isInGroup = this._adapter.getIsInGroup();
 
         if (isInGroup) {
@@ -118,6 +128,26 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
         this._adapter.setNativeControlChecked(checked);
     }
 
+    handleFocusVisible = (event: any) => {
+        const { target } = event;
+        try {
+            if (this.clickState) {
+                this.clickState = false;
+                return;
+            } 
+            if (target.matches(':focus-visible')) {
+                this._adapter.setFocusVisible(true);
+            }
+        } catch (error){
+            console.warn('The current browser does not support the focus-visible');
+        }
+    }
+
+    handleBlur = () => {
+        this.clickState = false;
+        this._adapter.setFocusVisible(false);
+    }
+
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy() {}
 }

package/checkbox/variables.scss

@@ -36,12 +36,14 @@ $color-checkbox_disabled-bg-default: var(--semi-color-disabled-fill); // 选框
 $color-checkbox_disabled-border-default: var(--semi-color-border); // 选框禁用态描边颜色 - 默认
 $color-checkbox_checked-bg-disabled: var(--semi-color-primary-disabled); // 选框选中 + 禁用态背景颜色
 $color-checkbox_checked-icon-disabled: var(--semi-color-white); // 选框禁用态对勾颜色
+$color-checkbox_primary-outline-focus: var(--semi-color-primary-light-active); // 复选框轮廓-聚焦颜色
 
 $size-checkbox_inner-shadow: $border-thickness-control; // 选框内描边宽度
 $width-checkbox_inner: $width-icon-medium; // 选框对勾 icon 宽度
 $height-checkbox_inner: 20px; // 选框对勾 icon 高度
 $width-checkbox_cardType_checked-border: 1px; // 卡片类型复选框的边框宽度
 $width-checkbox_cardType_checked_disabled-border: 1px; // 卡片类型复选框选中且禁用的边框宽度
+$width-checkbox-outline: 2px; // 复选框轮廓宽度
 
 $radius-checkbox_cardType: 3px; // 卡片类型复选框的圆角大小
 $radius-checkbox_inner: var(--semi-border-radius-extra-small); // 选框圆角

package/inputNumber/constants.ts

@@ -7,7 +7,7 @@ const cssClasses = {
 const numbers = {
     ...inputNumbers,
     DEFAULT_STEP: 1,
-    DEFAULT_SHIFT_STEP: 1,
+    DEFAULT_SHIFT_STEP: 10,
     DEFAULT_PRESS_TIMEOUT: 250,
     DEFAULT_PRESS_INTERVAL: 0,
     MOUSE_BUTTON_LEFT: 0, // left mouse button

package/inputNumber/foundation.ts

@@ -215,7 +215,7 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
         if (code === keyCode.UP || code === keyCode.DOWN) {
             this._adapter.setClickUpOrDown(true);
             this._adapter.recordCursorPosition();
-            const formattedVal = code === keyCode.UP ? this.add() : this.minus();
+            const formattedVal = code === keyCode.UP ? this.add(null, event) : this.minus(null, event);
 
             this._doInput(formattedVal, event, () => {
                 this._adapter.restoreCursor();
@@ -382,7 +382,7 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
         this._adapter.setNumber(number);
         this._adapter.setValue(formattedValue);
 
-        if (isString(formattedValue) && formattedValue !== String(propsValue)) {
+        if (isString(formattedValue) && formattedValue !== String(propsValue ?? '')) {
             this.notifyChange(formattedValue, null);
         }
     }

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

@@ -33,6 +33,7 @@ export interface AutoCompleteAdapter<P = Record<string, any>, S = Record<string,
 declare class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AutoCompleteAdapter<P, S>, P, S> {
     private _keydownHandler;
     constructor(adapter: AutoCompleteAdapter<P, S>);
+    isPanelOpen: boolean;
     init(): void;
     destroy(): void;
     _setDropdownWidth(): void;
@@ -47,6 +48,8 @@ declare class AutoCompleteFoundation<P = Record<string, any>, S = Record<string,
     _backwardLabelInValue(): any;
     handleDataChange(newData: any[]): void;
     handleValueChange(propValue: any): void;
+    _modifyFocusIndex(searchValue: any): void;
+    _modifyFocusIndexOnPanelOpen(): void;
     _getRenderSelectedItem(): any;
     handleClear(): void;
     bindKeyBoardEvent(): void;

package/lib/cjs/autoComplete/foundation.js

@@ -42,6 +42,7 @@ var _keyCode = _interopRequireDefault(require("../utils/keyCode"));
 class AutoCompleteFoundation extends _foundation.default {
   constructor(adapter) {
     super((0, _assign.default)({}, adapter));
+    this.isPanelOpen = false;
   }
 
   init() {
@@ -65,7 +66,7 @@ class AutoCompleteFoundation extends _foundation.default {
     } // When both defaultValue and value exist, finally the value of value will be taken as initValue
 
 
-    let initValue = '';
+    let initValue;
 
     if (typeof defaultValue !== 'undefined') {
       initValue = defaultValue;
@@ -115,12 +116,18 @@ class AutoCompleteFoundation extends _foundation.default {
       disabled
     } = this.getProps();
 
-    if (options.length && !disabled) {
-      this.openDropdown();
+    if (!disabled) {
+      if (this.isPanelOpen) {
+        this.closeDropdown();
+      } else {
+        this.openDropdown();
+      }
     }
   }
 
   openDropdown() {
+    this.isPanelOpen = true;
+
     this._adapter.toggleListVisible(true);
 
     this._setDropdownWidth(); // this._adapter.registerClickOutsideHandler(e => this.closeDropdown(e));
@@ -129,9 +136,13 @@ class AutoCompleteFoundation extends _foundation.default {
     this._adapter.notifyDropdownVisibleChange(true);
 
     this.bindKeyBoardEvent();
+
+    this._modifyFocusIndexOnPanelOpen();
   }
 
   closeDropdown(e) {
+    this.isPanelOpen = false;
+
     this._adapter.toggleListVisible(false); // this._adapter.unregisterClickOutsideHandler();
 
 
@@ -182,6 +193,8 @@ class AutoCompleteFoundation extends _foundation.default {
     this._adapter.notifySearch(inputValue);
 
     this._adapter.notifyChange(inputValue);
+
+    this._modifyFocusIndex(inputValue);
   }
 
   handleSelect(option, optionIndex) {
@@ -194,7 +207,7 @@ class AutoCompleteFoundation extends _foundation.default {
       newInputValue = renderSelectedItem(option);
       (0, _warning.default)(typeof newInputValue !== 'string', 'Warning: [Semi AutoComplete] renderSelectedItem must return string, please check your function return');
     } else {
-      newInputValue = option.label;
+      newInputValue = option.value;
     } // 1. trigger onSelect
     // 2. close Dropdown
 
@@ -255,7 +268,8 @@ class AutoCompleteFoundation extends _foundation.default {
 
   handleValueChange(propValue) {
     let {
-      data
+      data,
+      defaultActiveFirstOption
     } = this.getProps();
     let selectedValue = '';
 
@@ -270,9 +284,9 @@ class AutoCompleteFoundation extends _foundation.default {
     const options = this._generateList(data); // Get the option whose value match from options
 
 
-    let selectedOption = (0, _filter.default)(options).call(options, option => option.value === selectedValue);
+    let selectedOption = (0, _filter.default)(options).call(options, option => renderSelectedItem(option) === selectedValue);
     const canMatchInData = selectedOption.length;
-    const selectedOptionIndex = (0, _findIndex.default)(options).call(options, option => option.value === selectedValue);
+    const selectedOptionIndex = (0, _findIndex.default)(options).call(options, option => renderSelectedItem(option) === selectedValue);
     let inputValue = '';
 
     if (canMatchInData) {
@@ -290,7 +304,45 @@ class AutoCompleteFoundation extends _foundation.default {
 
     this.updateSelection(canMatchInData ? selectedOption : null);
 
-    this._adapter.updateFocusIndex(selectedOptionIndex);
+    if (selectedOptionIndex === -1 && defaultActiveFirstOption) {
+      this._adapter.updateFocusIndex(0);
+    } else {
+      this._adapter.updateFocusIndex(selectedOptionIndex);
+    }
+  }
+
+  _modifyFocusIndex(searchValue) {
+    let {
+      focusIndex
+    } = this.getStates();
+    let {
+      data,
+      defaultActiveFirstOption
+    } = this.getProps();
+
+    let renderSelectedItem = this._getRenderSelectedItem();
+
+    const options = this._generateList(data);
+
+    const selectedOptionIndex = (0, _findIndex.default)(options).call(options, option => renderSelectedItem(option) === searchValue);
+
+    if (selectedOptionIndex === -1 && defaultActiveFirstOption) {
+      if (focusIndex !== 0) {
+        this._adapter.updateFocusIndex(0);
+      }
+    } else {
+      if (selectedOptionIndex !== focusIndex) {
+        this._adapter.updateFocusIndex(selectedOptionIndex);
+      }
+    }
+  }
+
+  _modifyFocusIndexOnPanelOpen() {
+    let {
+      inputValue
+    } = this.getStates();
+
+    this._modifyFocusIndex(inputValue);
   }
 
   _getRenderSelectedItem() {
@@ -299,7 +351,7 @@ class AutoCompleteFoundation extends _foundation.default {
     } = this.getProps();
 
     if (typeof renderSelectedItem === 'undefined') {
-      renderSelectedItem = option => option.label;
+      renderSelectedItem = option => option.value;
     } else if (renderSelectedItem && typeof renderSelectedItem === 'function') {// do nothing
     }
 
@@ -434,7 +486,7 @@ class AutoCompleteFoundation extends _foundation.default {
     if (focusIndex !== -1 && options.length !== 0) {
       const visibleOptions = (0, _filter.default)(options).call(options, item => item.show);
       const selectedOption = visibleOptions[focusIndex];
-      this.handleSelect(selectedOption);
+      this.handleSelect(selectedOption, focusIndex);
     } else if (visible) {// this.close();
     }
   }
@@ -445,8 +497,6 @@ class AutoCompleteFoundation extends _foundation.default {
 
   handleFocus(e) {
     this._adapter.notifyFocus(e);
-
-    this.openDropdown();
   }
 
   handleBlur(e) {

package/lib/cjs/button/button.scss

@@ -47,7 +47,7 @@ $module: #{$prefix}-button;
         }
         &.#{$module}-light,
         &.#{$module}-borderless {
-            color: $color-button_danger-bg-default;
+            color: $color-button_danger_borderless-text-default;
         }
         &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
             outline: $width-button-outline solid $color-button_danger-outline-focus;
@@ -64,7 +64,7 @@ $module: #{$prefix}-button;
         }
         &.#{$module}-light,
         &.#{$module}-borderless {
-            color: $color-button_warning-bg-default;
+            color: $color-button_warning_borderless-text-default;
         }
         &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
             outline: $width-button-outline solid $color-button_warning-outline-focus;
@@ -96,7 +96,7 @@ $module: #{$prefix}-button;
 
         &.#{$module}-light,
         &.#{$module}-borderless {
-            color: $color-button_primary-bg-default;
+            color: $color-button_primary_borderless-text-default;
         }
     }
     &-secondary {
@@ -112,7 +112,7 @@ $module: #{$prefix}-button;
 
         &.#{$module}-light,
         &.#{$module}-borderless {
-            color: $color-button_secondary-bg-default;
+            color: $color-button_secondary_borderless-text-default;
         }
     }
     &-disabled {

package/lib/cjs/button/variables.scss

@@ -12,6 +12,8 @@ $color-button_primary-border-active: var(--semi-color-primary-active); // 主要
 $color-button_primary-text-active: rgba(var(--semi-white), 1); // 主要按钮文字颜色 - 按下
 $color-button_primary-outline-focus: var(--semi-color-primary-light-active); // 主要按钮轮廓 - 聚焦
 
+$color-button_primary_borderless-text-default: var(--semi-color-primary); // 主要按钮无边框文字颜色
+
 // secondary
 $color-button_secondary-bg-default: var(--semi-color-secondary); // 次要按钮背景颜色
 $color-button_secondary-border-default: var(--semi-color-secondary); // 次要按钮描边颜色
@@ -25,6 +27,8 @@ $color-button_secondary-bg-active: var(--semi-color-secondary-active); // 次要
 $color-button_secondary-border-active: var(--semi-color-secondary-active); // 次要按钮描边颜色 - 按下
 $color-button_secondary-text-active: rgba(var(--semi-white), 1); // 次要按钮文字颜色 - 按下
 
+$color-button_secondary_borderless-text-default: var(--semi-color-secondary); // 次要按钮无边框文字颜色
+
 // danger
 $color-button_danger-bg-default: var(--semi-color-danger); // 危险按钮背景颜色
 $color-button_danger-border-default: var(--semi-color-danger); // 危险按钮描边颜色
@@ -39,6 +43,8 @@ $color-button_danger-border-active: var(--semi-color-danger-active); // 危险
 $color-button_danger-text-active: rgba(var(--semi-white), 1); // 危险按钮文字颜色 - 按下
 $color-button_danger-outline-focus: var(--semi-color-danger-light-active); // 危险按钮轮廓 - 聚焦
 
+$color-button_danger_borderless-text-default: var(--semi-color-danger); // 危险按钮无边框文字颜色
+
 // warning
 $color-button_warning-bg-default: var(--semi-color-warning); // 警告按钮背景颜色
 $color-button_warning-border-default: var(--semi-color-warning); // 警告按钮描边颜色
@@ -53,6 +59,8 @@ $color-button_warning-border-active: var(--semi-color-warning-active); // 警告
 $color-button_warning-text-active: rgba(var(--semi-white), 1); // 警告按钮文字颜色 - 按下
 $color-button_warning-outline-focus: var(--semi-color-warning-light-active); // 警告按钮轮廓 - 聚焦
 
+$color-button_warning_borderless-text-default: var(--semi-color-warning); // 警告按钮无边框文字颜色
+
 // tertiary
 $color-button_tertiary-bg-default: var(--semi-color-tertiary); // 第三按钮背景颜色
 $color-button_tertiary-border-default: var(--semi-color-tertiary); // 第三按钮描边颜色
@@ -79,10 +87,10 @@ $color-button_disabled-bg-hover: var(--semi-color-disabled-bg); // 禁用按钮
 $color-button_light-bg-default: var(--semi-color-fill-0); // 浅色按钮背景颜色
 $color-button_light-bg-hover: var(--semi-color-fill-1); // 禁用按钮背景颜色 - 悬浮
 $color-button_light-bg-active: var(--semi-color-fill-2); // 禁用按钮背景颜色 - 按下
-$color-button_light-border-default: transparent; // 浅色按钮描边颜色 
+$color-button_light-border-default: transparent; // 浅色按钮描边颜色
 $color-button_light-border-hover: $color-button_light-border-default; // 浅色按钮描边颜色 - 悬浮
 $color-button_light-border-active: $color-button_light-border-hover; // 浅色按钮描边颜色 - 按下
-$width-button_light-border: 0;  // 浅色按钮描边宽度
+$width-button_light-border: 0; // 浅色按钮描边宽度
 
 // borderless
 $color-button_borderless-text-default: var(--semi-color-primary); // 无背景按钮背景颜色
@@ -126,7 +134,7 @@ $spacing-button_iconOnly_small-paddingTop: $spacing-extra-tight; // 图标按钮
 $spacing-button_iconOnly_small-paddingBottom: $spacing-extra-tight; // 图标按钮底部内边距 - 小尺寸
 
 // margin
-$spacing-button_iconOnly_content-marginLeft: $spacing-tight;  // 按钮左侧图标距离文字间距
+$spacing-button_iconOnly_content-marginLeft: $spacing-tight; // 按钮左侧图标距离文字间距
 $spacing-button_iconOnly_content-marginRight: $spacing-tight; // 按钮右侧图标距离文字间距
 
 $font-button-fontWeight: $font-weight-bold; // 按钮文字字重
@@ -134,7 +142,7 @@ $height-button_large: $height-control-large; // 按钮高度 - 大尺寸
 $height-button_small: $height-control-small; // 按钮高度 - 小尺寸
 $height-button_default: $height-control-default; // 按钮高度 - 默认
 
-$width-button-border: $border-thickness;  // 按钮描边宽度
+$width-button-border: $border-thickness; // 按钮描边宽度
 $radius-button: var(--semi-border-radius-small); // 按钮圆角大小
 $radius-button_group: $radius-button; // 按钮组圆角大小
 $width-button-outline: 2px; // 按钮轮廓宽度