@douyinfe/semi-foundation 2.13.0 → 2.14.0-beta.1

package/anchor/foundation.ts

@@ -2,7 +2,6 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { isArray, get } from 'lodash';
 import scrollIntoView, { CustomBehaviorOptions } from 'scroll-into-view-if-needed';
 import { cssClasses } from './constants';
-import React from 'react';
 
 const prefixCls = cssClasses.PREFIX;
 
@@ -21,7 +20,7 @@ export interface AnchorAdapter<P = Record<string, any>, S = Record<string, any>>
     getAnchorNode: (selector: string) => HTMLElement;
     getContentNode: (selector: string) => HTMLElement;
     notifyChange: (currentLink: string, previousLink: string) => void;
-    notifyClick: (e: React.MouseEvent<HTMLElement>, link: string) => void;
+    notifyClick: (e: any, link: string) => void;
     canSmoothScroll: () => boolean;
 }
 

package/autoComplete/foundation.ts

@@ -78,7 +78,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
 
     destroy(): void {
         // this._adapter.unregisterClickOutsideHandler();
-        this.unBindKeyBoardEvent();
+        // this.unBindKeyBoardEvent();
     }
 
     _setDropdownWidth(): void {
@@ -114,7 +114,6 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
         this._setDropdownWidth();
         // this._adapter.registerClickOutsideHandler(e => this.closeDropdown(e));
         this._adapter.notifyDropdownVisibleChange(true);
-        this.bindKeyBoardEvent();
         this._modifyFocusIndexOnPanelOpen();
     }
 
@@ -123,7 +122,8 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
         this._adapter.toggleListVisible(false);
         // this._adapter.unregisterClickOutsideHandler();
         this._adapter.notifyDropdownVisibleChange(false);
-        this.unBindKeyBoardEvent();
+        // After closing the panel, you can still open the panel by pressing the enter key
+        // this.unBindKeyBoardEvent();
     }
 
     // props.data => optionList
@@ -301,19 +301,16 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
         this._adapter.registerKeyDown(this._keydownHandler);
     }
 
-    unBindKeyBoardEvent() {
-        if (this._keydownHandler) {
-            this._adapter.unregisterKeyDown(this._keydownHandler);
-        }
-    }
+    // unBindKeyBoardEvent() {
+    //     if (this._keydownHandler) {
+    //         this._adapter.unregisterKeyDown(this._keydownHandler);
+    //     }
+    // }
 
     _handleKeyDown(event: KeyboardEvent) {
         const key = event.keyCode;
         const { visible } = this.getStates();
 
-        if (!visible) {
-            return;
-        }
         switch (key) {
             case KeyCode.UP:
                 // Prevent Input's cursor from following the movement
@@ -326,6 +323,8 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
                 this._handleArrowKeyDown(1);
                 break;
             case KeyCode.ENTER:
+                // when custom trigger, prevent outer open panel again
+                event.preventDefault();
                 this._handleEnterKeyDown();
                 break;
             case KeyCode.ESC:
@@ -377,17 +376,26 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
     }
 
     _handleArrowKeyDown(offset: number): void {
-        this._getEnableFocusIndex(offset);
+        const { visible } = this.getStates();
+        if (!visible){
+            this.openDropdown();
+        } else {
+            this._getEnableFocusIndex(offset);  
+        }
     }
 
     _handleEnterKeyDown() {
         const { visible, options, focusIndex } = this.getStates();
-        if (focusIndex !== -1 && options.length !== 0) {
-            const visibleOptions = options.filter((item: StateOptionItem) => item.show);
-            const selectedOption = visibleOptions[focusIndex];
-            this.handleSelect(selectedOption, focusIndex);
-        } else if (visible) {
-            // this.close();
+        if (!visible){
+            this.openDropdown();
+        } else {
+            if (focusIndex !== undefined  && focusIndex !== -1 && options.length !== 0) {
+                const visibleOptions = options.filter((item: StateOptionItem) => item.show);
+                const selectedOption = visibleOptions[focusIndex];
+                this.handleSelect(selectedOption, focusIndex);
+            } else {
+                this.closeDropdown();
+            }
         }
     }
 
@@ -396,6 +404,9 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
     }
 
     handleFocus(e: FocusEvent) {
+        // If you get the focus through the tab key, you need to manually bind keyboard events
+        // Then you can open the panel by pressing the enter key
+        this.bindKeyBoardEvent();
         this._adapter.notifyFocus(e);
     }
 

package/avatar/avatar.scss

@@ -16,6 +16,20 @@ $colors: "amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "ligh
     text-align: center;
     vertical-align: middle;
 
+    &:focus-visible {
+        outline: $width-avatar-outline solid $color-avatar-outline-focus;
+    }
+
+    &-focus {
+        outline: $width-avatar-outline solid $color-avatar-outline-focus;
+    }
+
+    &-no-focus-visible {
+        &:focus-visible {
+            outline: none;
+        }
+    }
+
     .#{$module}-label {
         display: flex;
         align-items: center;

package/avatar/foundation.ts

@@ -1,9 +1,11 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import warning from '../utils/warning';
 
 export interface AvatarAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     notifyImgState(isImgExist: boolean): void;
     notifyLeave(event: any): void;
     notifyEnter(event: any): void;
+    setFocusVisible: (focusVisible: boolean) => void;
 }
 
 export default class AvatarFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AvatarAdapter<P, S>, P, S> {
@@ -32,4 +34,19 @@ export default class AvatarFoundation<P = Record<string, any>, S = Record<string
         this._adapter.notifyLeave(e);
     }
 
+    handleFocusVisible = (event: any) => {
+        const { target } = event;
+        try {
+            if (target.matches(':focus-visible')) {
+                this._adapter.setFocusVisible(true);
+            }
+        } catch (error){
+            warning(true, 'Warning: [Semi Avatar] The current browser does not support the focus-visible');
+        }
+    }
+
+    handleBlur = () => {
+        this._adapter.setFocusVisible(false);
+    }
+
 }

package/avatar/variables.scss

@@ -2,6 +2,7 @@ $z-avatar-default: 100; // 头像 z-index
 // color
 $color-avatar_default-border-default: var(--semi-color-bg-1); // 头像描边颜色
 $color-avatar_more_default-bg-default: rgba(var(--semi-grey-5), 1); // 「更多」描边颜色
+$color-avatar-outline-focus: var(--semi-color-primary-light-active); // 头像聚焦轮廓颜色
 
 
 $width-avatar_extra_extra_small: 20px; // 头像尺寸 - 极小
@@ -43,3 +44,5 @@ $spacing-avatar_extra_small-marginLeft: -10px; // 头像左侧外边距 - 超小
 
 $width-avatar_extra_extra_small-border: 1px; // 头像描边尺寸 - 极小
 $spacing-avatar_extra_extra_small-marginLeft: -4px; // 头像左侧外边距 - 极小
+
+$width-avatar-outline: 2px; //头像聚焦轮廓宽度

package/base/foundation.ts

@@ -25,6 +25,7 @@ export interface DefaultAdapter<P = Record<string, any>, S = Record<string, any>
 
 class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record<string, any>, S = Record<string, any>> {
     /** @return enum{css className} */
+    /* istanbul ignore next */
     static get cssClasses() {
         // Classes extending Foundation should implement this method to return an object which exports every
         // CSS class the foundation class needs as a property. e.g. {ACTIVE: 'component--active'}
@@ -32,6 +33,7 @@ class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record<string,
     }
 
     /** @return enum{strings} */
+    /* istanbul ignore next */
     static get strings() {
         // Classes extending Foundation should implement this method to return an object which exports all
         // semantic strings as constants. e.g. {ARIA_ROLE: 'tablist'}
@@ -39,6 +41,7 @@ class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record<string,
     }
 
     /** @return enum{numbers} */
+    /* istanbul ignore next */
     static get numbers() {
         // Classes extending Foundation should implement this method to return an object which exports all
         // of its semantic numbers as constants. e.g. {ANIMATION_DELAY_MS: 350}
@@ -91,10 +94,12 @@ class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record<string,
         return this._adapter.getContext(key);
     }
 
+    /* istanbul ignore next */
     getContexts() {
         return this._adapter.getContexts();
     }
 
+    /* istanbul ignore next */
     getCaches() {
         return this._adapter.getCaches();
     }
@@ -132,6 +137,7 @@ class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record<string,
         // Subclasses should override this method to perform de-initialization routines (de-registering events, etc.)
     }
 
+    /* istanbul ignore next */
     log(text: string, ...rest: any) {
         log(text, ...rest);
     }

package/calendar/foundation.ts

@@ -41,7 +41,8 @@ export interface EventObject {
     allDay?: boolean;
     start?: Date;
     end?: Date;
-    children?: React.ReactNode;
+    // children?: React.ReactNode;
+    children?: any;
 }
 
 export interface ParsedEventsWithArray {

package/cascader/cascader.scss

@@ -31,6 +31,9 @@ $module: #{$prefix}-cascader;
     &-large {
         min-height: $height-cascader_large;
         line-height: $height-cascader_large;
+        .#{$module}-selection {
+            @include font-size-header-6;
+        }
     }
 
     &-focus {

package/cascader/foundation.ts

@@ -606,6 +606,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     /**
      * A11y: simulate selection click
      */
+    /* istanbul ignore next */
     handleSelectionEnterPress(keyboardEvent: any) {
         if (isEnterPress(keyboardEvent)) {
             this.handleClick(keyboardEvent);
@@ -924,6 +925,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     /**
      * A11y: simulate clear button click
      */
+    /* istanbul ignore next */
     handleClearEnterPress(keyboardEvent: any) {
         if (isEnterPress(keyboardEvent)) {
             this.handleClear();
@@ -976,6 +978,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         const { keyEntities } = this.getStates();
         const { disabled } = this.getProps();
         if (disabled) {
+            /* istanbul ignore next */
             return;
         }
         const removedItem = (Object.values(keyEntities) as BasicEntity[])

package/checkbox/checkboxFoundation.ts

@@ -1,5 +1,6 @@
 import BaseFoundation, { DefaultAdapter, noopFunction } from '../base/foundation';
 import isEnterPress from '../utils/isEnterPress';
+import warning from '../utils/warning';
 
 export interface BasicTargetObject {
     [x: string]: any;
@@ -139,7 +140,7 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
                 this._adapter.setFocusVisible(true);
             }
         } catch (error){
-            console.warn('The current browser does not support the focus-visible');
+            warning(true, 'Warning: [Semi Checkbox] The current browser does not support the focus-visible');
         }
     }
 

package/datePicker/foundation.ts

@@ -125,12 +125,12 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     disabledDate?: DisabledDateType;
     disabledTime?: DisabledTimeType;
     dropdownClassName?: string;
-    dropdownStyle?: React.CSSProperties;
+    dropdownStyle?: Record<string, any>;
     endDateOffset?: DateOffsetType;
     format?: string;
     getPopupContainer?: () => HTMLElement;
     inputReadOnly?: boolean;
-    inputStyle?: React.CSSProperties;
+    inputStyle?: Record<string, any>;
     max?: number;
     motion?: Motion;
     multiple?: boolean;
@@ -146,7 +146,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     spacing?: number;
     startDateOffset?: DateOffsetType;
     stopPropagation?: boolean | string;
-    style?: React.CSSProperties;
+    style?: Record<string, any>;
     timePickerOpts?: any; // TODO import timePicker props
     timeZone?: string | number;
     type?: Type;

package/datePicker/inputFoundation.ts

@@ -45,7 +45,7 @@ export interface DateInputFoundationProps extends DateInputElementProps, DateInp
     type?: Type;
     showClear?: boolean;
     format?: string;
-    inputStyle?: React.CSSProperties;
+    inputStyle?: Record<string, any>;
     inputReadOnly?: boolean;
     validateStatus?: ValidateStatus;
     prefixCls?: string;

package/datePicker/monthsGridFoundation.ts

@@ -40,10 +40,14 @@ const dateCalcFns = {
 type Type = ArrayElement<typeof strings.TYPE_SET>;
 
 interface MonthsGridElementProps {
-    navPrev?: React.ReactNode;
-    navNext?: React.ReactNode;
-    renderDate?: () => React.ReactNode;
-    renderFullDate?: () => React.ReactNode;
+    // navPrev?: React.ReactNode;
+    navPrev?: any;
+    // navNext?: React.ReactNode;
+    navNext?: any;
+    // renderDate?: () => React.ReactNode;
+    renderDate?: () => any;
+    // renderFullDate?: () => React.ReactNode;
+    renderFullDate?: () => any;
 }
 
 export type PanelType = 'left' | 'right';

package/form/utils.ts

@@ -5,7 +5,11 @@ import AsyncValidator from 'async-validator';
 import { cloneDeep, toPath } from 'lodash';
 import { FieldValidateTriggerType, BasicTriggerType, ComponentProps, WithFieldOption } from './interface';
 
-export function getDisplayName(WrappedComponent: React.ComponentType | any) {
+/**
+ * 
+ * @param WrappedComponent React.ComponentType | any
+ */
+export function getDisplayName(WrappedComponent: any) {
     const originName = WrappedComponent.displayName || WrappedComponent.name;
     return originName ? `SemiField${originName}` : 'SemiField';
 }

package/input/foundation.ts

@@ -2,7 +2,6 @@ import BaseFoundation, { DefaultAdapter, noopFunction } from '../base/foundation
 import { strings } from './constants';
 import { noop, set, isNumber, isString, isFunction } from 'lodash';
 
-import isEnterPress from '../utils/isEnterPress';
 import { ENTER_KEY } from './../utils/keyCode';
 
 export interface InputDefaultAdapter {
@@ -296,20 +295,13 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
         }
     }
 
-    /**
-     * A11y: simulate clear button click
-     */
-    handleClearEnterPress(e: any) {
-        if (isEnterPress(e)) {
-            this.handleClear(e);
-        }
-    }
-
     /**
      * A11y: simulate password button click
      */
     handleModeEnterPress(e: any) {
-        if (isEnterPress(e)) {
+        // trigger by Enter or Space key
+        if (['Enter', ' '].includes(e?.key)) {
+            this.handlePreventMouseDown(e);
             this.handleClickEye(e);
         }
     }

package/input/input.scss

@@ -173,6 +173,12 @@ $module: #{$prefix}-input;
                 color: $color-input-icon-hover;
             }
         }
+
+        &:focus-visible {
+            border-radius: $radius-input_wrapper;
+            outline: $width-input_icon-outline solid $color-input_icon-outline;
+            outline-offset: $width-input_icon-outlineOffset;
+        }
     }
 
     &__with-suffix-icon.#{$module}-wrapper-clearable:not(.#{$module}-wrapper__with-suffix-hidden) {

package/input/textareaFoundation.ts

@@ -233,13 +233,4 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
         this._adapter.notifyClear(e);
         this.stopPropagation(e);
     }
-
-    /**
-     * A11y: simulate clear button click
-     */
-    handleClearEnterPress(e: any) {
-        if (isEnterPress(e)) {
-            this.handleClear(e);
-        }
-    }
 }

package/input/variables.scss

@@ -11,6 +11,7 @@ $color-input_default-border-active: $color-input_default-bg-active; // 输入框
 
 $color-input_default-bg-focus: var(--semi-color-fill-0); // 输入框背景颜色 - 选中
 $color-input_default-border-focus: var(--semi-color-focus-border); // 输入框描边颜色 - 选中
+$color-input_icon-outline: var(--semi-color-primary-light-active); // 输入框 icon outline 颜色
 
 // error
 $color-input_danger-bg-default: var(--semi-color-danger-light-default); // 错误输入框背景颜色 - 默认
@@ -75,6 +76,8 @@ $width-input_prepend-border: $border-thickness-control; // 前置标签描边宽
 $width-input_group_pseudo-border: $border-thickness-control;
 $width-input_wrapper-border: $border-thickness-control-focus; // 输入框描边宽度
 $width-input_wrapper_focus-border: $border-thickness-control-focus; // 输入框描边宽度 - 选中态
+$width-input_icon-outline: 2px; // 输入框 icon outline 宽度
+$width-input_icon-outlineOffset: -1px; // 输入框 icon outline-offset 宽度
 
 $radius-input_wrapper: var(--semi-border-radius-small); // 输入框圆角大小
 $spacing-input_icon-marginLeft: -$spacing-base-tight; // 输入框图标左侧内边距

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

@@ -1,5 +1,4 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import React from 'react';
 export interface AnchorAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     addLink: (link: string) => void;
     removeLink: (link: string) => void;
@@ -15,7 +14,7 @@ export interface AnchorAdapter<P = Record<string, any>, S = Record<string, any>>
     getAnchorNode: (selector: string) => HTMLElement;
     getContentNode: (selector: string) => HTMLElement;
     notifyChange: (currentLink: string, previousLink: string) => void;
-    notifyClick: (e: React.MouseEvent<HTMLElement>, link: string) => void;
+    notifyClick: (e: any, link: string) => void;
     canSmoothScroll: () => boolean;
 }
 export default class AnchorFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AnchorAdapter<P, S>, P, S> {

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

@@ -53,7 +53,6 @@ declare class AutoCompleteFoundation<P = Record<string, any>, S = Record<string,
     _getRenderSelectedItem(): any;
     handleClear(): void;
     bindKeyBoardEvent(): void;
-    unBindKeyBoardEvent(): void;
     _handleKeyDown(event: KeyboardEvent): void;
     _getEnableFocusIndex(offset: number): void;
     _handleArrowKeyDown(offset: number): void;

package/lib/cjs/autoComplete/foundation.js

@@ -81,9 +81,8 @@ class AutoCompleteFoundation extends _foundation.default {
     }
   }
 
-  destroy() {
-    // this._adapter.unregisterClickOutsideHandler();
-    this.unBindKeyBoardEvent();
+  destroy() {// this._adapter.unregisterClickOutsideHandler();
+    // this.unBindKeyBoardEvent();
   }
 
   _setDropdownWidth() {
@@ -135,8 +134,6 @@ class AutoCompleteFoundation extends _foundation.default {
 
     this._adapter.notifyDropdownVisibleChange(true);
 
-    this.bindKeyBoardEvent();
-
     this._modifyFocusIndexOnPanelOpen();
   }
 
@@ -146,9 +143,9 @@ class AutoCompleteFoundation extends _foundation.default {
     this._adapter.toggleListVisible(false); // this._adapter.unregisterClickOutsideHandler();
 
 
-    this._adapter.notifyDropdownVisibleChange(false);
+    this._adapter.notifyDropdownVisibleChange(false); // After closing the panel, you can still open the panel by pressing the enter key
+    // this.unBindKeyBoardEvent();
 
-    this.unBindKeyBoardEvent();
   } // props.data => optionList
 
 
@@ -368,13 +365,12 @@ class AutoCompleteFoundation extends _foundation.default {
     };
 
     this._adapter.registerKeyDown(this._keydownHandler);
-  }
+  } // unBindKeyBoardEvent() {
+  //     if (this._keydownHandler) {
+  //         this._adapter.unregisterKeyDown(this._keydownHandler);
+  //     }
+  // }
 
-  unBindKeyBoardEvent() {
-    if (this._keydownHandler) {
-      this._adapter.unregisterKeyDown(this._keydownHandler);
-    }
-  }
 
   _handleKeyDown(event) {
     const key = event.keyCode;
@@ -382,10 +378,6 @@ class AutoCompleteFoundation extends _foundation.default {
       visible
     } = this.getStates();
 
-    if (!visible) {
-      return;
-    }
-
     switch (key) {
       case _keyCode.default.UP:
         // Prevent Input's cursor from following the movement
@@ -404,6 +396,9 @@ class AutoCompleteFoundation extends _foundation.default {
         break;
 
       case _keyCode.default.ENTER:
+        // when custom trigger, prevent outer open panel again
+        event.preventDefault();
+
         this._handleEnterKeyDown();
 
         break;
@@ -473,7 +468,15 @@ class AutoCompleteFoundation extends _foundation.default {
   }
 
   _handleArrowKeyDown(offset) {
-    this._getEnableFocusIndex(offset);
+    const {
+      visible
+    } = this.getStates();
+
+    if (!visible) {
+      this.openDropdown();
+    } else {
+      this._getEnableFocusIndex(offset);
+    }
   }
 
   _handleEnterKeyDown() {
@@ -483,11 +486,16 @@ class AutoCompleteFoundation extends _foundation.default {
       focusIndex
     } = this.getStates();
 
-    if (focusIndex !== -1 && options.length !== 0) {
-      const visibleOptions = (0, _filter.default)(options).call(options, item => item.show);
-      const selectedOption = visibleOptions[focusIndex];
-      this.handleSelect(selectedOption, focusIndex);
-    } else if (visible) {// this.close();
+    if (!visible) {
+      this.openDropdown();
+    } else {
+      if (focusIndex !== undefined && focusIndex !== -1 && options.length !== 0) {
+        const visibleOptions = (0, _filter.default)(options).call(options, item => item.show);
+        const selectedOption = visibleOptions[focusIndex];
+        this.handleSelect(selectedOption, focusIndex);
+      } else {
+        this.closeDropdown();
+      }
     }
   }
 
@@ -496,6 +504,10 @@ class AutoCompleteFoundation extends _foundation.default {
   }
 
   handleFocus(e) {
+    // If you get the focus through the tab key, you need to manually bind keyboard events
+    // Then you can open the panel by pressing the enter key
+    this.bindKeyBoardEvent();
+
     this._adapter.notifyFocus(e);
   }
 

package/lib/cjs/avatar/avatar.css

@@ -11,6 +11,15 @@
   text-align: center;
   vertical-align: middle;
 }
+.semi-avatar:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
+.semi-avatar-focus {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
+.semi-avatar-no-focus-visible:focus-visible {
+  outline: none;
+}
 .semi-avatar .semi-avatar-label {
   display: flex;
   align-items: center;

package/lib/cjs/avatar/avatar.scss

@@ -16,6 +16,20 @@ $colors: "amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "ligh
     text-align: center;
     vertical-align: middle;
 
+    &:focus-visible {
+        outline: $width-avatar-outline solid $color-avatar-outline-focus;
+    }
+
+    &-focus {
+        outline: $width-avatar-outline solid $color-avatar-outline-focus;
+    }
+
+    &-no-focus-visible {
+        &:focus-visible {
+            outline: none;
+        }
+    }
+
     .#{$module}-label {
         display: flex;
         align-items: center;

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

@@ -3,6 +3,7 @@ export interface AvatarAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyImgState(isImgExist: boolean): void;
     notifyLeave(event: any): void;
     notifyEnter(event: any): void;
+    setFocusVisible: (focusVisible: boolean) => void;
 }
 export default class AvatarFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AvatarAdapter<P, S>, P, S> {
     constructor(adapter: AvatarAdapter<P, S>);
@@ -11,4 +12,6 @@ export default class AvatarFoundation<P = Record<string, any>, S = Record<string
     handleImgLoadError(): void;
     handleEnter(e: any): void;
     handleLeave(e: any): void;
+    handleFocusVisible: (event: any) => void;
+    handleBlur: () => void;
 }