@douyinfe/semi-ui 2.11.1 → 2.12.0-beta.0

package/form/_story/FormSubmit/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Form, Tooltip, Button } from '@douyinfe/semi-ui';
+import { IconHelpCircle } from '@douyinfe/semi-icons';
+
+/**
+ * @description input, button may trigger submit of form
+ * 
+ * case 1: 当 form 中只有一个 input，在 input 上敲击 enter 会触发 form submit
+ * case 2: 当 form 中有 2 个 input，在任意一个 input 上敲击 enter 都不会触发 form submit
+ * case 3: 当 from 中有一个 input 和一个 button，在 input 上敲击 enter 会触发 form submit
+ * 
+ * @summary 如果不想触发 form submit，监听 input key down，如果 `e.key` 等于 `Enter` 则调用 e.preventDefault
+ * 
+ * @see https://github.com/DouyinFE/semi-design/issues/767#issuecomment-1098836675
+ */
+const App = () => {
+    const { Option } = Form.Select;
+
+    return (
+        <Form onSubmit={() => { console.log('submit');} }>
+            <Form.Select field="Role" label='角色' style={{ width:176 }}>
+                <Option value="admin">管理员</Option>
+                <Option value="user">普通用户</Option>
+                <Option value="guest">访客</Option>
+            </Form.Select>
+            <Form.Input field='UserName' label='用户名' style={{ width:80 }} onKeyDown={e => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                }
+            }} />
+            <Form.Input
+                field='Password'
+                label={{ 
+                    text: '密码',
+                    extra: <Tooltip content='详情'><IconHelpCircle style={{ color: '--semi-color-text-1' }}/></Tooltip> 
+                }}
+                style={{ width:176 }}
+            />
+            <Button>提交</Button>
+        </Form>
+    );
+};
+App.storyName = 'form submit';
+
+export default App;

package/form/_story/form.stories.js

@@ -91,6 +91,7 @@ import { SetValuesDemo, SetValuesWithArrayField } from './FormApi/setValuesDemo'
 import { SetValueUsingParentPath } from './FormApi/formApiDemo';
 import { FieldPathWithArrayDemo } from './Debug/bugDemo';
 import ChildDidMount from './Debug/childDidMount';
+export { default as FormSubmit } from './FormSubmit';
 
 export default {
   title: 'Form'
@@ -429,4 +430,4 @@ export const _ChildDidMount = () => <ChildDidMount />;
 
 _ChildDidMount.story = {
   name: 'child did mount',
-};
+};

package/lib/cjs/button/Button.d.ts

@@ -6,7 +6,7 @@ export declare type HtmlType = 'button' | 'reset' | 'submit';
 export declare type Size = 'default' | 'small' | 'large';
 export declare type Theme = 'solid' | 'borderless' | 'light';
 export declare type Type = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
-export interface ButtonProps {
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
     id?: string;
     block?: boolean;
     circle?: boolean;

package/lib/cjs/modal/Modal.js

@@ -117,7 +117,8 @@ class Modal extends _baseComponent.default {
             "aria-label": "cancel",
             onClick: this.handleCancel,
             loading: cancelLoading,
-            type: "tertiary"
+            type: "tertiary",
+            autoFocus: true
           }, this.props.cancelButtonProps), cancelText || locale.cancel);
         }
       };
@@ -400,7 +401,7 @@ Modal.defaultProps = {
   onOk: _noop2.default,
   afterClose: _noop2.default,
   maskFixed: false,
-  closeOnEsc: false,
+  closeOnEsc: true,
   size: 'small',
   keepDOM: false,
   lazyRender: true,

package/lib/cjs/modal/ModalContent.d.ts

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { ContextValue } from '../configProvider/context';
 import BaseComponent from '../_base/baseComponent';
 import ModalContentFoundation, { ModalContentAdapter, ModalContentProps, ModalContentState } from '@douyinfe/semi-foundation/lib/cjs/modal/modalContentFoundation';
+import FocusTrapHandle from '@douyinfe/semi-foundation/lib/cjs/utils/FocusHandle';
 export interface ModalContentReactProps extends ModalContentProps {
     children?: React.ReactNode;
 }
@@ -26,6 +27,7 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
     modalDialogRef: React.MutableRefObject<HTMLDivElement>;
     foundation: ModalContentFoundation;
     context: ContextValue;
+    focusTrapHandle: FocusTrapHandle;
     constructor(props: ModalContentProps);
     get adapter(): ModalContentAdapter;
     componentDidMount(): void;

package/lib/cjs/modal/ModalContent.js

@@ -22,11 +22,11 @@ var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-j
 
 var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
 
-var _get2 = _interopRequireDefault(require("lodash/get"));
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
 
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 
-var _noop2 = _interopRequireDefault(require("lodash/noop"));
+var _get2 = _interopRequireDefault(require("lodash/get"));
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -48,7 +48,7 @@ var _modalContentFoundation = _interopRequireDefault(require("@douyinfe/semi-fou
 
 var _semiIcons = require("@douyinfe/semi-icons");
 
-var _utils = require("../_utils");
+var _FocusHandle = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/FocusHandle"));
 
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
@@ -233,6 +233,7 @@ class ModalContent extends _baseComponent.default {
       }, /*#__PURE__*/_react.default.createElement("div", {
         role: "dialog",
         ref: this.modalDialogRef,
+        tabIndex: -1,
         "aria-modal": "true",
         "aria-labelledby": "".concat(_constants.cssClasses.DIALOG, "-title"),
         "aria-describedby": "".concat(_constants.cssClasses.DIALOG, "-body"),
@@ -248,7 +249,7 @@ class ModalContent extends _baseComponent.default {
 
     this.state = {
       dialogMouseDown: false,
-      prevFocusElement: (0, _utils.getActiveElement)()
+      prevFocusElement: _FocusHandle.default.getActiveElement()
     };
     this.foundation = new _modalContentFoundation.default(this.adapter);
     this.dialogId = "dialog-".concat(uuid++);
@@ -291,19 +292,27 @@ class ModalContent extends _baseComponent.default {
       },
       getMouseState: () => this.state.dialogMouseDown,
       modalDialogFocus: () => {
+        var _a, _b, _c;
+
         let activeElementInDialog;
 
         if (this.modalDialogRef) {
-          const activeElement = (0, _utils.getActiveElement)();
+          const activeElement = _FocusHandle.default.getActiveElement();
+
           activeElementInDialog = this.modalDialogRef.current.contains(activeElement);
+          (_a = this.focusTrapHandle) === null || _a === void 0 ? void 0 : _a.destroy();
+          this.focusTrapHandle = new _FocusHandle.default(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 {
@@ -351,8 +360,7 @@ class ModalContent extends _baseComponent.default {
       className: "".concat(_constants.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.default.createElement(containerContext.Provider, {

package/lib/cjs/progress/index.js

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

package/lib/cjs/select/index.js

@@ -681,7 +681,7 @@ class Select extends _baseComponent.default {
       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/cjs/slider/index.js

@@ -273,7 +273,7 @@ class Slider extends _baseComponent.default {
         _react.default.createElement("div", {
           className: _constants.cssClasses.TRACK,
           style: trackStyle,
-          onClick: e => this.foundation.handleWrapClick(e)
+          onClick: this.foundation.handleWrapClick
         })
       );
     };
@@ -301,7 +301,7 @@ class Slider extends _baseComponent.default {
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         _react.default.createElement("span", {
           key: mark,
-          onClick: e => this.foundation.handleWrapClick(e),
+          onClick: this.foundation.handleWrapClick,
           className: markClass,
           style: {
             [stylePos]: "calc(".concat(markPercent * 100, "% - 2px)")
@@ -329,12 +329,16 @@ class Slider extends _baseComponent.default {
 
         const activeResult = this.foundation.isMarkActive(Number(mark));
         const markPercent = (Number(mark) - min) / (max - min);
-        return activeResult ? /*#__PURE__*/_react.default.createElement("span", {
+        return activeResult ?
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+        _react.default.createElement("span", {
           key: mark,
           className: (0, _classnames.default)((0, _concat.default)(_context3 = "".concat(prefixCls, "-mark")).call(_context3, vertical && verticalReverse ? '-reverse' : '')),
           style: {
             [stylePos]: "".concat(markPercent * 100, "%")
-          }
+          },
+          onClick: this.foundation.handleWrapClick
         }, marks[mark]) : null;
       })) : null;
       return labelContent;
@@ -614,7 +618,7 @@ class Slider extends _baseComponent.default {
       onMouseLeave: () => this.foundation.handleWrapperLeave()
     }, /*#__PURE__*/_react.default.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.default.createElement("div", null, this.renderHandle()), this.renderLabel(), /*#__PURE__*/_react.default.createElement("div", {
       className: boundaryClass

package/lib/cjs/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/cjs/tabs/TabBar.js

@@ -75,6 +75,10 @@ class TabBar extends _react.default.Component {
       }
     };
 
+    this.handleKeyDown = (event, itemKey, closable) => {
+      this.props.handleKeyDown(event, itemKey, closable);
+    };
+
     this.renderTabItem = panel => {
       const {
         size,
@@ -108,9 +112,12 @@ class TabBar extends _react.default.Component {
       return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
         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/cjs/tabs/TabPane.js

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

package/lib/cjs/tabs/index.js

@@ -372,7 +372,8 @@ class Tabs extends _baseComponent.default {
       tabBarExtraContent,
       tabPosition,
       type,
-      deleteTabItem: this.deleteTabItem
+      deleteTabItem: this.deleteTabItem,
+      handleKeyDown: this.foundation.handleKeyDown
     };
     const tabBar = renderTabBar ? renderTabBar(tabBarProps, _TabBar.default) : /*#__PURE__*/_react.default.createElement(_TabBar.default, (0, _assign.default)({}, tabBarProps));
     const content = keepDOM ? children : this.getActiveItem();

package/lib/cjs/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/cjs/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/cjs/tag/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context6;
+var _context8;
 
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 
@@ -31,6 +31,8 @@ var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
+var _isString2 = _interopRequireDefault(require("lodash/isString"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -43,11 +45,13 @@ var _index = _interopRequireDefault(require("../avatar/index"));
 
 var _semiIcons = require("@douyinfe/semi-icons");
 
+var _a11y = require("@douyinfe/semi-foundation/lib/cjs/utils/a11y");
+
 require("@douyinfe/semi-foundation/lib/cjs/tag/tag.css");
 
 var _interface = require("./interface");
 
-_forEachInstanceProperty(_context6 = _Object$keys(_interface)).call(_context6, function (key) {
+_forEachInstanceProperty(_context8 = _Object$keys(_interface)).call(_context8, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _interface[key]) return;
@@ -74,6 +78,8 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   }
   return t;
 };
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
 /* eslint-disable no-unused-vars */
 
 /* eslint-disable max-len */
@@ -87,13 +93,14 @@ const avatarShapeSet = _constants.strings.AVATAR_SHAPE;
 
 class Tag extends _react.Component {
   constructor(props) {
-    var _context;
+    var _context, _context2;
 
     super(props);
     this.state = {
       visible: true
     };
     this.close = (0, _bind.default)(_context = this.close).call(_context, this);
+    this.handleKeyDown = (0, _bind.default)(_context2 = this.handleKeyDown).call(_context2, this);
   } // any other way to achieve this?
 
 
@@ -130,6 +137,33 @@ class Tag extends _react.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);
+        (0, _a11y.handlePrevent)(event);
+        break;
+
+      case "Enter":
+        onClick(event);
+        (0, _a11y.handlePrevent)(event);
+        break;
+
+      case 'Escape':
+        event.target.blur();
+        break;
+
+      default:
+        break;
+    }
+  }
+
   renderAvatar() {
     const {
       avatarShape,
@@ -145,7 +179,7 @@ class Tag extends _react.Component {
   }
 
   render() {
-    var _context2, _context3, _context4, _context5;
+    var _context3, _context4, _context5, _context6, _context7;
 
     const _a = this.props,
           {
@@ -155,35 +189,49 @@ class Tag extends _react.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 = (0, _assign.default)((0, _assign.default)({}, attr), {
+      onClick,
       className: (0, _classnames.default)(prefixCls, {
         ["".concat(prefixCls, "-default")]: size === 'default',
         ["".concat(prefixCls, "-small")]: size === 'small',
         ["".concat(prefixCls, "-large")]: size === 'large',
-        [(0, _concat.default)(_context2 = "".concat(prefixCls, "-")).call(_context2, type)]: type,
-        [(0, _concat.default)(_context3 = (0, _concat.default)(_context4 = "".concat(prefixCls, "-")).call(_context4, color, "-")).call(_context3, type)]: color && type,
+        [(0, _concat.default)(_context3 = "".concat(prefixCls, "-")).call(_context3, type)]: type,
+        [(0, _concat.default)(_context4 = (0, _concat.default)(_context5 = "".concat(prefixCls, "-")).call(_context5, color, "-")).call(_context4, type)]: color && type,
         ["".concat(prefixCls, "-closable")]: closable,
         ["".concat(prefixCls, "-invisible")]: !isVisible,
-        [(0, _concat.default)(_context5 = "".concat(prefixCls, "-avatar-")).call(_context5, avatarShape)]: avatarSrc
+        [(0, _concat.default)(_context6 = "".concat(prefixCls, "-avatar-")).call(_context6, avatarShape)]: avatarSrc
       }, className)
     });
-    const closeIcon = closable ? /*#__PURE__*/_react.default.createElement("div", {
+    const wrapProps = clickable ? (0, _assign.default)((0, _assign.default)({}, baseProps), a11yProps) : baseProps;
+    const closeIcon = closable ?
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    _react.default.createElement("div", {
       className: "".concat(prefixCls, "-close"),
       onClick: e => this.close(e, children)
     }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
       size: "small"
     })) : null;
-    return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, baseProps), /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
+      "aria-label": this.props['aria-label'] || (0, _isString2.default)(children) ? (0, _concat.default)(_context7 = "".concat(closable ? 'Closable ' : '', "Tag: ")).call(_context7, children) : ''
+    }, wrapProps), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-content")
     }, avatarSrc ? this.renderAvatar() : null, children, closeIcon));
   }
@@ -215,5 +263,6 @@ Tag.propTypes = {
   style: _propTypes.default.object,
   className: _propTypes.default.string,
   avatarSrc: _propTypes.default.string,
-  avatarShape: _propTypes.default.oneOf(avatarShapeSet)
+  avatarShape: _propTypes.default.oneOf(avatarShapeSet),
+  'aria-label': _propTypes.default.string
 };

package/lib/cjs/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/cjs/tagInput/index.js

@@ -283,7 +283,7 @@ class TagInput extends _baseComponent.default {
       if ((0, _isFunction2.default)(renderTagItem)) {
         item = renderTagItem(value, index);
       } else {
-        var _context2;
+        var _context2, _context3;
 
         item = /*#__PURE__*/_react.default.createElement(_tag.default, {
           className: tagCls,
@@ -295,7 +295,8 @@ class TagInput extends _baseComponent.default {
           },
           closable: !disabled,
           key: (0, _concat.default)(_context2 = "".concat(index)).call(_context2, value),
-          visible: true
+          visible: true,
+          "aria-label": (0, _concat.default)(_context3 = "".concat(!disabled ? 'Closable ' : '', "Tag: ")).call(_context3, value)
         }, /*#__PURE__*/_react.default.createElement(_paragraph.default, {
           className: typoCls,
           ellipsis: {

package/lib/cjs/treeSelect/index.js

@@ -16,6 +16,8 @@ exports.default = void 0;
 
 var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
 
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
@@ -28,8 +30,6 @@ var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 
-var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
-
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 
 var _get2 = _interopRequireDefault(require("lodash/get"));
@@ -238,7 +238,7 @@ class TreeSelect extends _baseComponent.default {
 
       if (checkRelation === 'related') {
         renderKeys = (0, _treeUtil.normalizeKeyList)([...checkedKeys], keyEntities, leafOnly);
-      } else if (checkRelation === 'unRelated') {
+      } else if (checkRelation === 'unRelated' && (0, _keys.default)(keyEntities).length > 0) {
         renderKeys = [...realCheckedKeys];
       }
 

package/lib/es/button/Button.d.ts

@@ -6,7 +6,7 @@ export declare type HtmlType = 'button' | 'reset' | 'submit';
 export declare type Size = 'default' | 'small' | 'large';
 export declare type Theme = 'solid' | 'borderless' | 'light';
 export declare type Type = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
-export interface ButtonProps {
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
     id?: string;
     block?: boolean;
     circle?: boolean;

package/lib/es/modal/Modal.js

@@ -78,7 +78,8 @@ class Modal extends BaseComponent {
             "aria-label": "cancel",
             onClick: this.handleCancel,
             loading: cancelLoading,
-            type: "tertiary"
+            type: "tertiary",
+            autoFocus: true
           }, this.props.cancelButtonProps), cancelText || locale.cancel);
         }
       };
@@ -361,7 +362,7 @@ Modal.defaultProps = {
   onOk: _noop,
   afterClose: _noop,
   maskFixed: false,
-  closeOnEsc: false,
+  closeOnEsc: true,
   size: 'small',
   keepDOM: false,
   lazyRender: true,

package/lib/es/modal/ModalContent.d.ts

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { ContextValue } from '../configProvider/context';
 import BaseComponent from '../_base/baseComponent';
 import ModalContentFoundation, { ModalContentAdapter, ModalContentProps, ModalContentState } from '@douyinfe/semi-foundation/lib/es/modal/modalContentFoundation';
+import FocusTrapHandle from '@douyinfe/semi-foundation/lib/es/utils/FocusHandle';
 export interface ModalContentReactProps extends ModalContentProps {
     children?: React.ReactNode;
 }
@@ -26,6 +27,7 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
     modalDialogRef: React.MutableRefObject<HTMLDivElement>;
     foundation: ModalContentFoundation;
     context: ContextValue;
+    focusTrapHandle: FocusTrapHandle;
     constructor(props: ModalContentProps);
     get adapter(): ModalContentAdapter;
     componentDidMount(): void;