@douyinfe/semi-ui 2.11.2 → 2.12.0-beta.1

package/lib/es/modal/ModalContent.js

@@ -1,6 +1,6 @@
-import _get from "lodash/get";
-import _isFunction from "lodash/isFunction";
 import _noop from "lodash/noop";
+import _isFunction from "lodash/isFunction";
+import _get from "lodash/get";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
@@ -32,7 +32,7 @@ import BaseComponent from '../_base/baseComponent'; // eslint-disable-next-line
 
 import ModalContentFoundation from '@douyinfe/semi-foundation/lib/es/modal/modalContentFoundation';
 import { IconClose } from '@douyinfe/semi-icons';
-import { getActiveElement } from '../_utils';
+import FocusTrapHandle from '@douyinfe/semi-foundation/lib/es/utils/FocusHandle';
 let uuid = 0;
 export default class ModalContent extends BaseComponent {
   constructor(props) {
@@ -200,6 +200,7 @@ export default class ModalContent extends BaseComponent {
       }, /*#__PURE__*/React.createElement("div", {
         role: "dialog",
         ref: this.modalDialogRef,
+        tabIndex: -1,
         "aria-modal": "true",
         "aria-labelledby": "".concat(cssClasses.DIALOG, "-title"),
         "aria-describedby": "".concat(cssClasses.DIALOG, "-body"),
@@ -214,7 +215,7 @@ export default class ModalContent extends BaseComponent {
 
     this.state = {
       dialogMouseDown: false,
-      prevFocusElement: getActiveElement()
+      prevFocusElement: FocusTrapHandle.getActiveElement()
     };
     this.foundation = new ModalContentFoundation(this.adapter);
     this.dialogId = "dialog-".concat(uuid++);
@@ -257,19 +258,26 @@ export default class ModalContent extends BaseComponent {
       },
       getMouseState: () => this.state.dialogMouseDown,
       modalDialogFocus: () => {
+        var _a, _b, _c;
+
         let activeElementInDialog;
 
         if (this.modalDialogRef) {
-          const activeElement = getActiveElement();
+          const activeElement = FocusTrapHandle.getActiveElement();
           activeElementInDialog = this.modalDialogRef.current.contains(activeElement);
+          (_a = this.focusTrapHandle) === null || _a === void 0 ? void 0 : _a.destroy();
+          this.focusTrapHandle = new FocusTrapHandle(this.modalDialogRef.current);
         }
 
         if (!activeElementInDialog) {
-          this.modalDialogRef && this.modalDialogRef.current.focus();
+          (_c = (_b = this.modalDialogRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.focus();
         }
       },
       modalDialogBlur: () => {
-        this.modalDialogRef && this.modalDialogRef.current.blur();
+        var _a, _b;
+
+        (_a = this.modalDialogRef) === null || _a === void 0 ? void 0 : _a.current.blur();
+        (_b = this.focusTrapHandle) === null || _b === void 0 ? void 0 : _b.destroy();
       },
       prevFocusElementReFocus: () => {
         const {
@@ -318,8 +326,7 @@ export default class ModalContent extends BaseComponent {
       className: "".concat(cssClasses.DIALOG, "-wrap"),
       onClick: maskClosable ? this.onMaskClick : null,
       onMouseUp: maskClosable ? this.onMaskMouseUp : null
-    }, this.getDialogElement())); // @ts-ignore Unreachable branch
-    // eslint-disable-next-line max-len
+    }, this.getDialogElement())); // eslint-disable-next-line max-len
 
     return containerContext && containerContext.Provider ? /*#__PURE__*/React.createElement(containerContext.Provider, {
       value: containerContext.value

package/lib/es/progress/index.js

@@ -220,7 +220,7 @@ class Progress extends Component {
     const perc = this.calcPercent(percent);
     const percNumber = this.calcPercent(percentNumber);
     const innerStyle = {
-      backgroundColor: stroke
+      background: stroke
     };
 
     if (direction === strings.DEFAULT_DIRECTION) {

package/lib/es/select/index.js

@@ -626,7 +626,7 @@ class Select extends BaseComponent {
       role: "listbox",
       "aria-multiselectable": multiple,
       onScroll: e => this.foundation.handleListScroll(e)
-    }, innerTopSlot, !loading ? listContent : this.renderLoading(), isEmpty && !loading ? this.renderEmpty() : null, innerBottomSlot), outerBottomSlot);
+    }, innerTopSlot, loading ? this.renderLoading() : isEmpty ? this.renderEmpty() : listContent, innerBottomSlot), outerBottomSlot);
   }
 
   renderSingleSelection(selections, filterable) {

package/lib/es/slider/index.js

@@ -243,7 +243,7 @@ export default class Slider extends BaseComponent {
         React.createElement("div", {
           className: cssClasses.TRACK,
           style: trackStyle,
-          onClick: e => this.foundation.handleWrapClick(e)
+          onClick: this.foundation.handleWrapClick
         })
       );
     };
@@ -271,7 +271,7 @@ export default class Slider extends BaseComponent {
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         React.createElement("span", {
           key: mark,
-          onClick: e => this.foundation.handleWrapClick(e),
+          onClick: this.foundation.handleWrapClick,
           className: markClass,
           style: {
             [stylePos]: "calc(".concat(markPercent * 100, "% - 2px)")
@@ -299,12 +299,16 @@ export default class Slider extends BaseComponent {
 
         const activeResult = this.foundation.isMarkActive(Number(mark));
         const markPercent = (Number(mark) - min) / (max - min);
-        return activeResult ? /*#__PURE__*/React.createElement("span", {
+        return activeResult ?
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+        React.createElement("span", {
           key: mark,
           className: cls(_concatInstanceProperty(_context3 = "".concat(prefixCls, "-mark")).call(_context3, vertical && verticalReverse ? '-reverse' : '')),
           style: {
             [stylePos]: "".concat(markPercent * 100, "%")
-          }
+          },
+          onClick: this.foundation.handleWrapClick
         }, marks[mark]) : null;
       })) : null;
       return labelContent;
@@ -584,7 +588,7 @@ export default class Slider extends BaseComponent {
       onMouseLeave: () => this.foundation.handleWrapperLeave()
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-rail"),
-      onClick: e => this.foundation.handleWrapClick(e),
+      onClick: this.foundation.handleWrapClick,
       style: this.props.railStyle
     }), this.renderTrack(), this.renderStepDot(), /*#__PURE__*/React.createElement("div", null, this.renderHandle()), this.renderLabel(), /*#__PURE__*/React.createElement("div", {
       className: boundaryClass

package/lib/es/tabs/TabBar.d.ts

@@ -30,6 +30,7 @@ declare class TabBar extends React.Component<TabBarProps, TabBarState> {
     renderIcon(icon: ReactNode): ReactNode;
     renderExtra(): ReactNode;
     handleItemClick: (itemKey: string, e: MouseEvent<Element>) => void;
+    handleKeyDown: (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
     renderTabItem: (panel: PlainTab) => ReactNode;
     renderTabComponents: (list: Array<PlainTab>) => Array<ReactNode>;
     handleArrowClick: (items: Array<OverflowItem>, pos: 'start' | 'end') => void;

package/lib/es/tabs/TabBar.js

@@ -49,6 +49,10 @@ class TabBar extends React.Component {
       }
     };
 
+    this.handleKeyDown = (event, itemKey, closable) => {
+      this.props.handleKeyDown(event, itemKey, closable);
+    };
+
     this.renderTabItem = panel => {
       const {
         size,
@@ -82,9 +86,12 @@ class TabBar extends React.Component {
       return /*#__PURE__*/React.createElement("div", _Object$assign({
         role: "tab",
         id: "semiTab".concat(key),
+        "data-tabkey": "semiTab".concat(key),
         "aria-controls": "semiTabPanel".concat(key),
         "aria-disabled": panel.disabled ? 'true' : 'false',
-        "aria-selected": isSelected ? 'true' : 'false'
+        "aria-selected": isSelected ? 'true' : 'false',
+        tabIndex: isSelected ? 0 : -1,
+        onKeyDown: e => this.handleKeyDown(e, key, panel.closable)
       }, events, {
         className: className,
         key: this._getItemKey(key)

package/lib/es/tabs/TabPane.js

@@ -114,7 +114,8 @@ class TabPane extends PureComponent {
       "aria-labelledby": "semiTab".concat(itemKey),
       className: classNames,
       style: style,
-      "aria-hidden": active ? 'false' : 'true'
+      "aria-hidden": active ? 'false' : 'true',
+      tabIndex: 0
     }, getDataAttr(restProps)), motion ? /*#__PURE__*/React.createElement(TabPaneTransition, {
       direction: this.getDirection(this.context.activeKey, itemKey, this.context.panes),
       motion: motion,

package/lib/es/tabs/index.js

@@ -313,7 +313,8 @@ class Tabs extends BaseComponent {
       tabBarExtraContent,
       tabPosition,
       type,
-      deleteTabItem: this.deleteTabItem
+      deleteTabItem: this.deleteTabItem,
+      handleKeyDown: this.foundation.handleKeyDown
     };
     const tabBar = renderTabBar ? renderTabBar(tabBarProps, TabBar) : /*#__PURE__*/React.createElement(TabBar, _Object$assign({}, tabBarProps));
     const content = keepDOM ? children : this.getActiveItem();

package/lib/es/tabs/interface.d.ts

@@ -48,6 +48,7 @@ export interface TabBarProps {
     dropdownStyle?: CSSProperties;
     closable?: boolean;
     deleteTabItem?: (tabKey: string, event: MouseEvent<Element>) => void;
+    handleKeyDown?: (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
 }
 export interface TabPaneProps {
     className?: string;

package/lib/es/tag/index.d.ts

@@ -21,6 +21,7 @@ export default class Tag extends Component<TagProps, TagState> {
         className: PropTypes.Requireable<string>;
         avatarSrc: PropTypes.Requireable<string>;
         avatarShape: PropTypes.Requireable<string>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     constructor(props: TagProps);
     static getDerivedStateFromProps(nextProps: TagProps): {
@@ -28,6 +29,7 @@ export default class Tag extends Component<TagProps, TagState> {
     };
     setVisible(visible: boolean): void;
     close(e: React.MouseEvent<HTMLElement>, value: React.ReactNode): void;
+    handleKeyDown(event: any): void;
     renderAvatar(): JSX.Element;
     render(): JSX.Element;
 }

package/lib/es/tag/index.js

@@ -1,3 +1,4 @@
+import _isString from "lodash/isString";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _bindInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/bind";
@@ -14,6 +15,8 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
 /* eslint-disable no-unused-vars */
 
 /* eslint-disable max-len */
@@ -25,6 +28,7 @@ import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/tag/constants';
 import Avatar from '../avatar/index';
 import { IconClose } from '@douyinfe/semi-icons';
+import { handlePrevent } from '@douyinfe/semi-foundation/lib/es/utils/a11y';
 import '@douyinfe/semi-foundation/lib/es/tag/tag.css';
 export * from './interface';
 const prefixCls = cssClasses.PREFIX;
@@ -34,13 +38,14 @@ const tagType = strings.TAG_TYPE;
 const avatarShapeSet = strings.AVATAR_SHAPE;
 export default class Tag extends Component {
   constructor(props) {
-    var _context;
+    var _context, _context2;
 
     super(props);
     this.state = {
       visible: true
     };
     this.close = _bindInstanceProperty(_context = this.close).call(_context, this);
+    this.handleKeyDown = _bindInstanceProperty(_context2 = this.handleKeyDown).call(_context2, this);
   } // any other way to achieve this?
 
 
@@ -77,6 +82,33 @@ export default class Tag extends Component {
     this.setVisible(false);
   }
 
+  handleKeyDown(event) {
+    const {
+      closable,
+      onClick
+    } = this.props;
+
+    switch (event.key) {
+      case "Backspace":
+      case "Delete":
+        closable && this.close(event, this.props.children);
+        handlePrevent(event);
+        break;
+
+      case "Enter":
+        onClick(event);
+        handlePrevent(event);
+        break;
+
+      case 'Escape':
+        event.target.blur();
+        break;
+
+      default:
+        break;
+    }
+  }
+
   renderAvatar() {
     const {
       avatarShape,
@@ -90,7 +122,7 @@ export default class Tag extends Component {
   }
 
   render() {
-    var _context2, _context3, _context4, _context5;
+    var _context3, _context4, _context5, _context6, _context7;
 
     const _a = this.props,
           {
@@ -100,37 +132,51 @@ export default class Tag extends Component {
       closable,
       visible,
       onClose,
+      onClick,
       className,
       type,
       avatarSrc,
       avatarShape
     } = _a,
-          attr = __rest(_a, ["children", "size", "color", "closable", "visible", "onClose", "className", "type", "avatarSrc", "avatarShape"]);
+          attr = __rest(_a, ["children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "avatarSrc", "avatarShape"]);
 
     const {
       visible: isVisible
     } = this.state;
+    const clickable = onClick !== Tag.defaultProps.onClick || closable;
+    const a11yProps = {
+      role: 'button',
+      tabIndex: 0,
+      onKeyDown: this.handleKeyDown
+    };
 
     const baseProps = _Object$assign(_Object$assign({}, attr), {
+      onClick,
       className: classNames(prefixCls, {
         ["".concat(prefixCls, "-default")]: size === 'default',
         ["".concat(prefixCls, "-small")]: size === 'small',
         ["".concat(prefixCls, "-large")]: size === 'large',
-        [_concatInstanceProperty(_context2 = "".concat(prefixCls, "-")).call(_context2, type)]: type,
-        [_concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "".concat(prefixCls, "-")).call(_context4, color, "-")).call(_context3, type)]: color && type,
+        [_concatInstanceProperty(_context3 = "".concat(prefixCls, "-")).call(_context3, type)]: type,
+        [_concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = "".concat(prefixCls, "-")).call(_context5, color, "-")).call(_context4, type)]: color && type,
         ["".concat(prefixCls, "-closable")]: closable,
         ["".concat(prefixCls, "-invisible")]: !isVisible,
-        [_concatInstanceProperty(_context5 = "".concat(prefixCls, "-avatar-")).call(_context5, avatarShape)]: avatarSrc
+        [_concatInstanceProperty(_context6 = "".concat(prefixCls, "-avatar-")).call(_context6, avatarShape)]: avatarSrc
       }, className)
     });
 
-    const closeIcon = closable ? /*#__PURE__*/React.createElement("div", {
+    const wrapProps = clickable ? _Object$assign(_Object$assign({}, baseProps), a11yProps) : baseProps;
+    const closeIcon = closable ?
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    React.createElement("div", {
       className: "".concat(prefixCls, "-close"),
       onClick: e => this.close(e, children)
     }, /*#__PURE__*/React.createElement(IconClose, {
       size: "small"
     })) : null;
-    return /*#__PURE__*/React.createElement("div", _Object$assign({}, baseProps), /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", _Object$assign({
+      "aria-label": this.props['aria-label'] || _isString(children) ? _concatInstanceProperty(_context7 = "".concat(closable ? 'Closable ' : '', "Tag: ")).call(_context7, children) : ''
+    }, wrapProps), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-content")
     }, avatarSrc ? this.renderAvatar() : null, children, closeIcon));
   }
@@ -160,5 +206,6 @@ Tag.propTypes = {
   style: PropTypes.object,
   className: PropTypes.string,
   avatarSrc: PropTypes.string,
-  avatarShape: PropTypes.oneOf(avatarShapeSet)
+  avatarShape: PropTypes.oneOf(avatarShapeSet),
+  'aria-label': PropTypes.string
 };

package/lib/es/tag/interface.d.ts

@@ -16,6 +16,7 @@ export interface TagProps {
     className?: string;
     avatarSrc?: string;
     avatarShape?: AvatarShape;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export interface TagGroupProps {
     style?: React.CSSProperties;

package/lib/es/tagInput/index.js

@@ -251,7 +251,7 @@ class TagInput extends BaseComponent {
       if (_isFunction(renderTagItem)) {
         item = renderTagItem(value, index);
       } else {
-        var _context2;
+        var _context2, _context3;
 
         item = /*#__PURE__*/React.createElement(Tag, {
           className: tagCls,
@@ -263,7 +263,8 @@ class TagInput extends BaseComponent {
           },
           closable: !disabled,
           key: _concatInstanceProperty(_context2 = "".concat(index)).call(_context2, value),
-          visible: true
+          visible: true,
+          "aria-label": _concatInstanceProperty(_context3 = "".concat(!disabled ? 'Closable ' : '', "Tag: ")).call(_context3, value)
         }, /*#__PURE__*/React.createElement(Paragraph, {
           className: typoCls,
           ellipsis: {

package/lib/es/tooltip/TooltipStyledTransition.js

@@ -15,12 +15,15 @@ const TooltipTransition = function () {
   const {
     children
   } = props;
-  const motion = getMotionObjFromProps(props);
+  const motion = getMotionObjFromProps(props); //  add fillMode forward to fix issue 715, tooltip close will flashing under react 18
+
   return /*#__PURE__*/React.createElement(StyledTransition, _Object$assign({}, props, {
     enter: enterCls,
     leave: leaveCls,
     duration: '100ms'
-  }, motion), typeof children === 'function' ? _ref => {
+  }, motion, {
+    fillMode: 'forward'
+  }), typeof children === 'function' ? _ref => {
     let {
       animateCls,
       animateEvents,

package/lib/es/treeSelect/index.js

@@ -5,13 +5,13 @@ import _isEmpty from "lodash/isEmpty";
 import _isString from "lodash/isString";
 import _isEqual from "lodash/isEqual";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import React, { Fragment } from 'react';
 import ReactDOM from 'react-dom';
 import cls from 'classnames';
@@ -179,7 +179,7 @@ class TreeSelect extends BaseComponent {
 
       if (checkRelation === 'related') {
         renderKeys = normalizeKeyList([...checkedKeys], keyEntities, leafOnly);
-      } else if (checkRelation === 'unRelated') {
+      } else if (checkRelation === 'unRelated' && _Object$keys(keyEntities).length > 0) {
         renderKeys = [...realCheckedKeys];
       }
 

package/modal/Modal.tsx

@@ -103,7 +103,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         onOk: noop,
         afterClose: noop,
         maskFixed: false,
-        closeOnEsc: false,
+        closeOnEsc: true,
         size: 'small',
         keepDOM: false,
         lazyRender: true,
@@ -290,6 +290,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
                         onClick={this.handleCancel}
                         loading={cancelLoading}
                         type="tertiary"
+                        autoFocus={true}
                         {...this.props.cancelButtonProps}
                     >
                         {cancelText || locale.cancel}

package/modal/ModalContent.tsx

@@ -13,9 +13,9 @@ import ModalContentFoundation, {
     ModalContentProps,
     ModalContentState
 } from '@douyinfe/semi-foundation/modal/modalContentFoundation';
-import { noop, isFunction, get } from 'lodash';
+import { get, isFunction, noop } from 'lodash';
 import { IconClose } from '@douyinfe/semi-icons';
-import { getActiveElement } from '../_utils';
+import FocusTrapHandle from "@douyinfe/semi-foundation/utils/FocusHandle";
 
 let uuid = 0;
 
@@ -23,6 +23,7 @@ let uuid = 0;
 export interface ModalContentReactProps extends ModalContentProps {
     children?: React.ReactNode;
 }
+
 export default class ModalContent extends BaseComponent<ModalContentReactProps, ModalContentState> {
     static contextType = ConfigContext;
     static propTypes = {
@@ -45,12 +46,13 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
     modalDialogRef: React.MutableRefObject<HTMLDivElement>;
     foundation: ModalContentFoundation;
     context: ContextValue;
+    focusTrapHandle: FocusTrapHandle;
 
     constructor(props: ModalContentProps) {
         super(props);
         this.state = {
             dialogMouseDown: false,
-            prevFocusElement: getActiveElement(),
+            prevFocusElement: FocusTrapHandle.getActiveElement(),
         };
         this.foundation = new ModalContentFoundation(this.adapter);
         this.dialogId = `dialog-${uuid++}`;
@@ -88,15 +90,18 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
             modalDialogFocus: () => {
                 let activeElementInDialog;
                 if (this.modalDialogRef) {
-                    const activeElement = getActiveElement();
+                    const activeElement = FocusTrapHandle.getActiveElement();
                     activeElementInDialog = this.modalDialogRef.current.contains(activeElement);
+                    this.focusTrapHandle?.destroy();
+                    this.focusTrapHandle = new FocusTrapHandle(this.modalDialogRef.current);
                 }
                 if (!activeElementInDialog) {
-                    this.modalDialogRef && this.modalDialogRef.current.focus();
+                    this.modalDialogRef?.current?.focus();
                 }
             },
             modalDialogBlur: () => {
-                this.modalDialogRef && this.modalDialogRef.current.blur();
+                this.modalDialogRef?.current.blur();
+                this.focusTrapHandle?.destroy();
             },
             prevFocusElementReFocus: () => {
                 const { prevFocusElement } = this.state;
@@ -192,7 +197,8 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
             (
                 <div className={`${cssClasses.DIALOG}-header`}>
                     {icon}
-                    <Typography.Title heading={5} className={`${cssClasses.DIALOG}-title`} id={`${cssClasses.DIALOG}-title`}>{title}</Typography.Title>
+                    <Typography.Title heading={5} className={`${cssClasses.DIALOG}-title`}
+                        id={`${cssClasses.DIALOG}-title`}>{title}</Typography.Title>
                     {closer}
                 </div>
             );
@@ -255,6 +261,7 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
                 <div
                     role="dialog"
                     ref={this.modalDialogRef}
+                    tabIndex={-1}
                     aria-modal="true"
                     aria-labelledby={`${cssClasses.DIALOG}-title`}
                     aria-describedby={`${cssClasses.DIALOG}-body`}
@@ -304,7 +311,6 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
             </div>
         );
 
-        // @ts-ignore Unreachable branch
         // eslint-disable-next-line max-len
         return containerContext && containerContext.Provider ?
             <containerContext.Provider value={containerContext.value}>{elem}</containerContext.Provider> : elem;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.11.2",
+    "version": "2.12.0-beta.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.11.2",
-        "@douyinfe/semi-animation-react": "2.11.2",
-        "@douyinfe/semi-foundation": "2.11.2",
-        "@douyinfe/semi-icons": "2.11.2",
-        "@douyinfe/semi-illustrations": "2.11.2",
-        "@douyinfe/semi-theme-default": "2.11.2",
+        "@douyinfe/semi-animation": "2.12.0-beta.1",
+        "@douyinfe/semi-animation-react": "2.12.0-beta.1",
+        "@douyinfe/semi-foundation": "2.12.0-beta.1",
+        "@douyinfe/semi-icons": "2.12.0-beta.1",
+        "@douyinfe/semi-illustrations": "2.12.0-beta.1",
+        "@douyinfe/semi-theme-default": "2.12.0-beta.1",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "6de78e58870a428a18b3b035544cf2f01f2839cf",
+    "gitHead": "65e57208ade0892136b2d31ea8983d47a9029f22",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.11.2",
+        "@douyinfe/semi-scss-compile": "2.12.0-beta.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/progress/index.tsx

@@ -239,7 +239,7 @@ class Progress extends Component<ProgressProps, ProgressState> {
         const percNumber = this.calcPercent(percentNumber);
 
         const innerStyle: Record<string, any> = {
-            backgroundColor: stroke
+            background: stroke
         };
         if (direction === strings.DEFAULT_DIRECTION) {
             innerStyle.width = `${perc}%`;

package/select/index.tsx

@@ -842,8 +842,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                     onScroll={e => this.foundation.handleListScroll(e)}
                 >
                     {innerTopSlot}
-                    {!loading ? listContent : this.renderLoading()}
-                    {isEmpty && !loading ? this.renderEmpty() : null}
+                    {loading ? this.renderLoading() : isEmpty ? this.renderEmpty() : listContent}
                     {innerBottomSlot}
                 </div>
                 {outerBottomSlot}

package/slider/index.tsx

@@ -479,7 +479,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
             };
         trackStyle = included ? trackStyle : {};
         return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-            <div className={cssClasses.TRACK} style={trackStyle} onClick={e => this.foundation.handleWrapClick(e)}>
+            <div className={cssClasses.TRACK} style={trackStyle} onClick={this.foundation.handleWrapClick}>
                 {/* {this.renderTrack} */}
             </div>
         );
@@ -501,7 +501,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                             // eslint-disable-next-line jsx-a11y/no-static-element-interactions
                             <span
                                 key={mark}
-                                onClick={e => this.foundation.handleWrapClick(e)}
+                                onClick={this.foundation.handleWrapClick}
                                 className={markClass}
                                 style={{ [stylePos]: `calc(${markPercent * 100}% - 2px)` }}
                             />
@@ -522,10 +522,12 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                         const activeResult = this.foundation.isMarkActive(Number(mark));
                         const markPercent = (Number(mark) - min) / (max - min);
                         return activeResult ? (
+                            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                             <span
                                 key={mark}
                                 className={cls(`${prefixCls}-mark${(vertical && verticalReverse) ? '-reverse' : ''}`)}
                                 style={{ [stylePos]: `${markPercent * 100}%` }}
+                                onClick={this.foundation.handleWrapClick}
                             >
                                 {marks[mark]}
                             </span>
@@ -565,7 +567,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                 {// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                     <div
                         className={`${prefixCls}-rail`}
-                        onClick={e => this.foundation.handleWrapClick(e)}
+                        onClick={this.foundation.handleWrapClick}
                         style={this.props.railStyle}
                     />
                 }