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

package/lib/cjs/avatar/foundation.js

@@ -14,9 +14,29 @@ var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 
+var _warning = _interopRequireDefault(require("../utils/warning"));
+
 class AvatarFoundation extends _foundation.default {
   constructor(adapter) {
     super((0, _assign.default)({}, adapter));
+
+    this.handleFocusVisible = event => {
+      const {
+        target
+      } = event;
+
+      try {
+        if (target.matches(':focus-visible')) {
+          this._adapter.setFocusVisible(true);
+        }
+      } catch (error) {
+        (0, _warning.default)(true, 'Warning: [Semi Avatar] The current browser does not support the focus-visible');
+      }
+    };
+
+    this.handleBlur = () => {
+      this._adapter.setFocusVisible(false);
+    };
   }
 
   init() {} // eslint-disable-line

package/lib/cjs/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/lib/cjs/base/foundation.js

@@ -27,6 +27,8 @@ class BaseFoundation {
   }
   /** @return enum{css className} */
 
+  /* istanbul ignore next */
+
 
   static get cssClasses() {
     // Classes extending Foundation should implement this method to return an object which exports every
@@ -35,6 +37,8 @@ class BaseFoundation {
   }
   /** @return enum{strings} */
 
+  /* istanbul ignore next */
+
 
   static get strings() {
     // Classes extending Foundation should implement this method to return an object which exports all
@@ -43,6 +47,8 @@ class BaseFoundation {
   }
   /** @return enum{numbers} */
 
+  /* istanbul ignore next */
+
 
   static get numbers() {
     // Classes extending Foundation should implement this method to return an object which exports all
@@ -89,10 +95,14 @@ class BaseFoundation {
   getContext(key) {
     return this._adapter.getContext(key);
   }
+  /* istanbul ignore next */
+
 
   getContexts() {
     return this._adapter.getContexts();
   }
+  /* istanbul ignore next */
+
 
   getCaches() {
     return this._adapter.getCaches();
@@ -129,6 +139,8 @@ class BaseFoundation {
 
   destroy() {// Subclasses should override this method to perform de-initialization routines (de-registering events, etc.)
   }
+  /* istanbul ignore next */
+
 
   log(text) {
     for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {

package/lib/cjs/calendar/eventUtil.d.ts

@@ -88,6 +88,6 @@ export declare const collectDailyEvents: (events: ParsedRangeEvent[][]) => Parse
 export declare const renderDailyEvent: (event: EventObject) => {
     startPos: number;
     endPos: number;
-    children: import("react").ReactNode;
+    children: any;
     allDay: boolean;
 };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { Locale } from 'date-fns';
 import { DateObj } from './eventUtil';
@@ -8,7 +7,7 @@ export interface EventObject {
     allDay?: boolean;
     start?: Date;
     end?: Date;
-    children?: React.ReactNode;
+    children?: any;
 }
 export interface ParsedEventsWithArray {
     day: Array<any>;

package/lib/cjs/cascader/cascader.css

@@ -29,6 +29,11 @@
   min-height: 40px;
   line-height: 40px;
 }
+.semi-cascader-large .semi-cascader-selection {
+  font-size: 16px;
+  line-height: 22px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
 .semi-cascader-focus {
   border: 1px solid var(--semi-color-focus-border);
   outline: 0;

package/lib/cjs/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/lib/cjs/cascader/foundation.d.ts

@@ -205,17 +205,6 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     handleSingleSelect(e: any, item: BasicEntity | BasicData): void;
     _handleMultipleSelect(item: BasicEntity | BasicData): void;
     calcNonDisabledCheckedKeys(eventKey: string, targetStatus: boolean): {
-        /**
-         * The typical scenario is: suppose we select the 0-0 node, at this time
-         *  selectedKeys=Set('0-0'), the input box will display a 0-0 label. When
-         *  treeData is updated, assuming 0-0 does not exist in treeData at this
-         *  time, then selectedKeys=Set('not-exist-0-0'), at this time the input
-         *  box displays 0-0, which means not-exist -After the content. When treeData
-         *  is updated again, assuming that 0-0 exists in treeData at this time,
-         *  then selectedKeys=Set('0-0'), and the input box displays a label of
-         *  0-0 at this time. The operation done here is for the 0-0 label to be
-         *  displayed normally after the second update in the example.
-         */
         checkedKeys: Set<string>;
         halfCheckedKeys: Set<any>;
     };

package/lib/cjs/cascader/foundation.js

@@ -570,6 +570,8 @@ class CascaderFoundation extends _foundation.default {
    * A11y: simulate selection click
    */
 
+  /* istanbul ignore next */
+
 
   handleSelectionEnterPress(keyboardEvent) {
     if ((0, _isEnterPress.default)(keyboardEvent)) {
@@ -1002,6 +1004,8 @@ class CascaderFoundation extends _foundation.default {
    * A11y: simulate clear button click
    */
 
+  /* istanbul ignore next */
+
 
   handleClearEnterPress(keyboardEvent) {
     if ((0, _isEnterPress.default)(keyboardEvent)) {
@@ -1084,6 +1088,7 @@ class CascaderFoundation extends _foundation.default {
     } = this.getProps();
 
     if (disabled) {
+      /* istanbul ignore next */
       return;
     }
 

package/lib/cjs/checkbox/checkboxFoundation.js

@@ -18,6 +18,8 @@ var _foundation = _interopRequireDefault(require("../base/foundation"));
 
 var _isEnterPress = _interopRequireDefault(require("../utils/isEnterPress"));
 
+var _warning = _interopRequireDefault(require("../utils/warning"));
+
 class CheckboxFoundation extends _foundation.default {
   constructor(adapter) {
     super((0, _assign.default)({}, adapter));
@@ -38,7 +40,7 @@ class CheckboxFoundation extends _foundation.default {
           this._adapter.setFocusVisible(true);
         }
       } catch (error) {
-        console.warn('The current browser does not support the focus-visible');
+        (0, _warning.default)(true, 'Warning: [Semi Checkbox] The current browser does not support the focus-visible');
       }
     };
 

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from './constants';
 import { Type, DateInputFoundationProps, InsetInputValue } from './inputFoundation';
@@ -95,12 +94,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;
@@ -116,7 +115,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     spacing?: number;
     startDateOffset?: DateOffsetType;
     stopPropagation?: boolean | string;
-    style?: React.CSSProperties;
+    style?: Record<string, any>;
     timePickerOpts?: any;
     timeZone?: string | number;
     type?: Type;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { BaseValueType, ValidateStatus, ValueType } from './foundation';
 import { strings } from './constants';
@@ -27,7 +26,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/lib/cjs/datePicker/monthsGridFoundation.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from './constants';
 import { WeekStartNumber } from './_utils/getMonthTable';
@@ -7,10 +6,10 @@ import { MonthDayInfo } from './monthFoundation';
 import { ArrayElement } from '../utils/type';
 declare type Type = ArrayElement<typeof strings.TYPE_SET>;
 interface MonthsGridElementProps {
-    navPrev?: React.ReactNode;
-    navNext?: React.ReactNode;
-    renderDate?: () => React.ReactNode;
-    renderFullDate?: () => React.ReactNode;
+    navPrev?: any;
+    navNext?: any;
+    renderDate?: () => any;
+    renderFullDate?: () => any;
 }
 export declare type PanelType = 'left' | 'right';
 export declare type YearMonthChangeType = 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear';

package/lib/cjs/form/utils.d.ts

@@ -1,7 +1,10 @@
-/// <reference types="react" />
 import AsyncValidator from 'async-validator';
 import { ComponentProps, WithFieldOption } from './interface';
-export declare function getDisplayName(WrappedComponent: React.ComponentType | any): string;
+/**
+ *
+ * @param WrappedComponent React.ComponentType | any
+ */
+export declare function getDisplayName(WrappedComponent: any): string;
 export declare function generateValidatesFromRules(field: string, rules?: any[]): AsyncValidator;
 export declare function isRequired(rules?: any[] | Record<string, any>): boolean;
 export declare function isValid(errors: any): boolean;

package/lib/cjs/form/utils.js

@@ -48,6 +48,10 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
 
+/**
+ *
+ * @param WrappedComponent React.ComponentType | any
+ */
 function getDisplayName(WrappedComponent) {
   const originName = WrappedComponent.displayName || WrappedComponent.name;
   return originName ? "SemiField".concat(originName) : 'SemiField';

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

@@ -75,10 +75,6 @@ declare class InputFoundation extends BaseFoundation<InputAdapter> {
      * @param {Event} e
      */
     handlePreventMouseDown(e: any): void;
-    /**
-     * A11y: simulate clear button click
-     */
-    handleClearEnterPress(e: any): void;
     /**
      * A11y: simulate password button click
      */

package/lib/cjs/input/foundation.js

@@ -14,6 +14,8 @@ var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 
 var _isString2 = _interopRequireDefault(require("lodash/isString"));
@@ -28,8 +30,6 @@ var _foundation = _interopRequireDefault(require("../base/foundation"));
 
 var _constants = require("./constants");
 
-var _isEnterPress = _interopRequireDefault(require("../utils/isEnterPress"));
-
 var _keyCode = require("./../utils/keyCode");
 
 class InputFoundation extends _foundation.default {
@@ -374,23 +374,17 @@ class InputFoundation extends _foundation.default {
       e.preventDefault();
     }
   }
-  /**
-   * A11y: simulate clear button click
-   */
-
-
-  handleClearEnterPress(e) {
-    if ((0, _isEnterPress.default)(e)) {
-      this.handleClear(e);
-    }
-  }
   /**
    * A11y: simulate password button click
    */
 
 
   handleModeEnterPress(e) {
-    if ((0, _isEnterPress.default)(e)) {
+    var _context;
+
+    // trigger by Enter or Space key
+    if ((0, _includes.default)(_context = ['Enter', ' ']).call(_context, e === null || e === void 0 ? void 0 : e.key)) {
+      this.handlePreventMouseDown(e);
       this.handleClickEye(e);
     }
   }

package/lib/cjs/input/input.css

@@ -138,6 +138,12 @@
 .semi-input-wrapper .semi-input-modebtn:hover .semi-icon {
   color: var(--semi-color-primary-hover);
 }
+.semi-input-wrapper .semi-input-clearbtn:focus-visible,
+.semi-input-wrapper .semi-input-modebtn:focus-visible {
+  border-radius: var(--semi-border-radius-small);
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -1px;
+}
 .semi-input-wrapper__with-suffix-icon.semi-input-wrapper-clearable:not(.semi-input-wrapper__with-suffix-hidden) .semi-input-clearbtn {
   min-width: 24px;
   justify-content: flex-end;

package/lib/cjs/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/lib/cjs/input/textareaFoundation.d.ts

@@ -60,8 +60,4 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
     handleMouseLeave(e: any): void;
     isAllowClear(): boolean;
     handleClear(e: any): void;
-    /**
-     * A11y: simulate clear button click
-     */
-    handleClearEnterPress(e: any): void;
 }

package/lib/cjs/input/textareaFoundation.js

@@ -28,8 +28,6 @@ var _calculateNodeHeight = _interopRequireDefault(require("./util/calculateNodeH
 
 var _getSizingData = _interopRequireDefault(require("./util/getSizingData"));
 
-var _isEnterPress = _interopRequireDefault(require("../utils/isEnterPress"));
-
 class TextAreaFoundation extends _foundation.default {
   constructor(adapter) {
     super((0, _assign.default)((0, _assign.default)({}, TextAreaFoundation.textAreaDefaultAdapter), adapter));
@@ -295,16 +293,6 @@ class TextAreaFoundation extends _foundation.default {
 
     this.stopPropagation(e);
   }
-  /**
-   * A11y: simulate clear button click
-   */
-
-
-  handleClearEnterPress(e) {
-    if ((0, _isEnterPress.default)(e)) {
-      this.handleClear(e);
-    }
-  }
 
 }
 

package/lib/cjs/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/overflowList/foundation.d.ts

@@ -6,6 +6,7 @@ export interface OverflowListAdapter extends DefaultAdapter {
 }
 declare class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
     constructor(adapter: OverflowListAdapter);
+    previousY: any;
     isScrollMode: () => boolean;
     getOverflowItem(): Array<Array<Record<string, any>>>;
     handleIntersect(entries: Array<IntersectionObserverEntry>): void;

package/lib/cjs/overflowList/foundation.js

@@ -22,6 +22,8 @@ var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stab
 
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/values"));
+
 var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
 
 var _get2 = _interopRequireDefault(require("lodash/get"));
@@ -36,6 +38,7 @@ const OverflowDirection = _constants.strings.OVERFLOW_DIR;
 class OverflowListFoundation extends _foundation.default {
   constructor(adapter) {
     super((0, _assign.default)({}, adapter));
+    this.previousY = undefined;
 
     this.isScrollMode = () => {
       const {
@@ -81,6 +84,28 @@ class OverflowListFoundation extends _foundation.default {
       res[itemKey] = entry;
       visibleState.set(itemKey, visible);
     });
+    let someItemVisible = false;
+
+    for (const value of (0, _values.default)(visibleState).call(visibleState)) {
+      if (value) {
+        someItemVisible = true;
+        break;
+      }
+    } // Any item is visible, indicating that the List is visible
+
+
+    const wholeListVisible = someItemVisible; // If scrolling in the vertical direction makes the List invisible, no processing is required. 
+    // If this.previousY is undefined, it means that the List is mounted for the first time and will not be processed.
+
+    const [entry1] = entries;
+    const currentY = entry1.boundingClientRect.y;
+
+    if (!wholeListVisible && this.previousY !== undefined && currentY !== this.previousY) {
+      this.previousY = currentY;
+      return;
+    }
+
+    this.previousY = currentY;
 
     this._adapter.updateVisibleState(visibleState);
 

package/lib/cjs/radio/radio.css

@@ -280,6 +280,12 @@
   padding-left: 24px;
   box-sizing: border-box;
 }
+.semi-radio-focus {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
+.semi-radio-focus-border {
+  border: solid 1px var(--semi-color-focus-border);
+}
 
 .semi-radioGroup {
   font-size: 14px;

package/lib/cjs/radio/radio.scss

@@ -379,6 +379,14 @@ $inner-width: $width-icon-medium;
         padding-left: $spacing-radio_extra-paddingLeft;
         box-sizing: border-box;
     }
+
+    &-focus {
+        outline: $width-radio-outline solid $color-radio_primary-outline-focus;
+
+        &-border {
+            border: solid $width-radio_hover-border $color-radio_default-border-hover;
+        }
+    }
 }
 
 .#{$module}Group {

package/lib/cjs/radio/radioFoundation.d.ts

@@ -3,8 +3,11 @@ export interface RadioAdapter extends DefaultAdapter {
     setHover: (hover: boolean) => void;
     setAddonId: () => void;
     setExtraId: () => void;
+    setFocusVisible: (focusVisible: boolean) => void;
 }
 export default class RadioFoundation extends BaseFoundation<RadioAdapter> {
     init(): void;
     setHover(hover: boolean): void;
+    handleFocusVisible: (event: any) => void;
+    handleBlur: () => void;
 }

package/lib/cjs/radio/radioFoundation.js

@@ -12,7 +12,31 @@ exports.default = void 0;
 
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 
+var _warning = _interopRequireDefault(require("../utils/warning"));
+
 class RadioFoundation extends _foundation.default {
+  constructor() {
+    super(...arguments);
+
+    this.handleFocusVisible = event => {
+      const {
+        target
+      } = event;
+
+      try {
+        if (target.matches(':focus-visible')) {
+          this._adapter.setFocusVisible(true);
+        }
+      } catch (error) {
+        (0, _warning.default)(true, 'Warning: [Semi Radio] The current browser does not support the focus-visible');
+      }
+    };
+
+    this.handleBlur = () => {
+      this._adapter.setFocusVisible(false);
+    };
+  }
+
   init() {
     const {
       children,

package/lib/cjs/radio/variables.scss

@@ -48,6 +48,8 @@ $color-radio_card-bg-hover: var(--semi-color-white); // 单选圆点颜色
 $color-radio_card-bg-active: var(--semi-color-white); // 单选圆点颜色 - 按下态
 $color-radio_card-bg-default: var(--semi-color-white); // 单选圆点颜色 - 悬浮态
 
+$color-radio_primary-outline-focus: var(--semi-color-primary-light-active); // 轮廓颜色 - 按键聚焦
+
 $radius-radio_cardRadioGroup: var(--semi-border-radius-small); // 卡片式单选圆角大小
 $radius-radio_addon_buttonRadio: var(--semi-border-radius-small); // 按钮式单选圆点圆角大小
 $radius-radio_buttonRadio: var(--semi-border-radius-small); // 按钮式单选圆角大小
@@ -58,6 +60,8 @@ $width-radio_hover-border: $border-thickness-control; // 描边宽度 - 悬浮
 $width-radio_disabled-border: $border-thickness-control; // 描边宽度 - 禁用态
 $width-radio_innder-border: $border-thickness-control; // 描边宽度 - 禁用态
 
+$width-radio-outline: 2px; // 单选框轮廓宽度
+
 $height-radio_inner_min: 20px; // 单选按钮高度
 $width-radio_inner: $width-icon-medium; // 单选按钮宽度
 $spacing-radio_addon-paddingLeft: $spacing-tight; //单选标题到单选按钮左侧边距

package/lib/cjs/select/foundation.js

@@ -1185,6 +1185,8 @@ class SelectFoundation extends _foundation.default {
       this.handleClick(e);
     }
   }
+  /* istanbul ignore next */
+
 
   handleClearBtnEnterPress(e) {
     if ((0, _isEnterPress.default)(e)) {

package/lib/cjs/select/select.css

@@ -109,6 +109,11 @@
   min-height: 40px;
   line-height: 40px;
 }
+.semi-select-large .semi-select-selection {
+  font-size: 16px;
+  line-height: 22px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
 .semi-select-open, .semi-select-focus {
   border: 1px solid var(--semi-color-focus-border);
   outline: 0;

package/lib/cjs/select/select.scss

@@ -45,6 +45,9 @@ $multiple: #{$module}-multiple;
     &-large {
         min-height: $height-select_large;
         line-height: $height-select_large;
+        .#{$module}-selection {
+            @include font-size-header-6;
+        }
     }
 
     &-open,

package/lib/cjs/switch/foundation.js

@@ -14,6 +14,8 @@ var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 
+var _warning = _interopRequireDefault(require("../utils/warning"));
+
 class SwitchFoundation extends _foundation.default {
   constructor(adapter) {
     super((0, _assign.default)({}, adapter));
@@ -28,7 +30,7 @@ class SwitchFoundation extends _foundation.default {
           this._adapter.setFocusVisible(true);
         }
       } catch (error) {
-        console.warn('The current browser does not support the focus-visible');
+        (0, _warning.default)(true, 'Warning: [Semi Switch] The current browser does not support the focus-visible');
       }
     };
 

package/lib/cjs/tagInput/foundation.js

@@ -195,6 +195,8 @@ class TagInputFoundation extends _foundation.default {
    * A11y: simulate clear button click
    */
 
+  /* istanbul ignore next */
+
 
   handleClearEnterPress(e) {
     if ((0, _isEnterPress.default)(e)) {

package/lib/cjs/tagInput/tagInput.css

@@ -154,7 +154,7 @@
   color: var(--semi-color-text-2);
 }
 .semi-tagInput-suffix-text {
-  color: var(--semi-color-text-1);
+  color: var(--semi-color-text-2);
 }
 
 .semi-rtl .semi-tagInput,