@douyinfe/semi-foundation 2.30.0-alpha.0 → 2.30.0

package/popconfirm/popconfirmFoundation.ts

@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 
+import { get } from 'lodash';
+
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import isPromise from '../utils/isPromise';
 
@@ -10,7 +12,10 @@ export interface PopconfirmAdapter<P = Record<string, any>, S = Record<string, a
     notifyConfirm: (e: any) => Promise<any> | void;
     notifyCancel: (e: any) => Promise<any> | void;
     notifyVisibleChange: (visible: boolean) => void;
-    notifyClickOutSide: (e: any) => void
+    notifyClickOutSide: (e: any) => void;
+    focusCancelButton: () => void;
+    focusOkButton: () => void;
+    focusPrevFocusElement: () => void
 }
 
 export default class PopConfirmFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PopconfirmAdapter<P, S>, P, S> {
@@ -63,6 +68,20 @@ export default class PopConfirmFoundation<P = Record<string, any>, S = Record<st
         if (!this._isControlledComponent('visible')) {
             this._adapter.setVisible(visible);
         }
+        if (visible) {
+            this.handleFocusOperateButton();
+        } else {
+            this._adapter.focusPrevFocusElement();
+        }
         this._adapter.notifyVisibleChange(visible);
     }
+
+    handleFocusOperateButton() {
+        const { cancelButtonProps, okButtonProps } = this._adapter.getProps() as any;
+        if (get(cancelButtonProps, 'autoFocus') && !get(cancelButtonProps, 'disabled')) {
+            this._adapter.focusCancelButton();
+        } else if (get(okButtonProps, 'autoFocus') && !get(okButtonProps, 'disabled')) {
+            this._adapter.focusOkButton();
+        }
+    }
 }

package/select/select.scss

@@ -36,6 +36,7 @@ $overflowList: #{$prefix}-overflow-list;
 
     &:focus {
         border: $width-select-border-focus solid $color-select-border-focus;
+        background-color: $color-select-bg-focus;
         outline: 0;
     }
 

package/select/variables.scss

@@ -2,6 +2,7 @@
 $color-select-bg-default: var(--semi-color-fill-0); // 选择器输入框背景色 - 默认态
 $color-select-bg-hover: var(--semi-color-fill-1); // 选择器输入框背景色 - 悬停态
 $color-select-bg-active: var(--semi-color-fill-2); // 选择器输入框背景色 - 按下态
+$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); // 选择器输入框描边颜色 - 按下态