@douyinfe/semi-ui 2.1.0-alpha.1 → 2.1.0-alpha.2

package/lib/es/navigation/index.js

@@ -1,6 +1,3 @@
-import _isEqual from "lodash/isEqual";
-import _get from "lodash/get";
-import _noop from "lodash/noop";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -14,6 +11,7 @@ import BaseComponent from '../_base/baseComponent';
 import React, { Children } from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
+import { noop, get, isEqual } from 'lodash-es';
 import NavigationFoundation from '@douyinfe/semi-foundation/lib/es/navigation/foundation';
 import { strings, cssClasses, numbers } from '@douyinfe/semi-foundation/lib/es/navigation/constants';
 import SubNav from './SubNav';
@@ -25,13 +23,9 @@ import LocaleConsumer from '../locale/localeConsumer';
 import '@douyinfe/semi-foundation/lib/es/navigation/navigation.css';
 
 function createAddKeysFn(context, keyName) {
-  return function addKeys() {
+  return function addKeys(...keys) {
     const handleKeys = new _Set(context.state[keyName]);
 
-    for (var _len = arguments.length, keys = new Array(_len), _key = 0; _key < _len; _key++) {
-      keys[_key] = arguments[_key];
-    }
-
     _forEachInstanceProperty(keys).call(keys, key => key && handleKeys.add(key));
 
     context.setState({
@@ -41,13 +35,9 @@ function createAddKeysFn(context, keyName) {
 }
 
 function createRemoveKeysFn(context, keyName) {
-  return function removeKeys() {
+  return function removeKeys(...keys) {
     const handleKeys = new _Set(context.state[keyName]);
 
-    for (var _len2 = arguments.length, keys = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      keys[_key2] = arguments[_key2];
-    }
-
     _forEachInstanceProperty(keys).call(keys, key => key && handleKeys.delete(key));
 
     context.setState({
@@ -114,15 +104,15 @@ class Nav extends BaseComponent {
         selectedKeys
       } = this.state;
 
-      if (this.props.selectedKeys && !_isEqual(prevProps.selectedKeys, this.props.selectedKeys)) {
+      if (this.props.selectedKeys && !isEqual(prevProps.selectedKeys, this.props.selectedKeys)) {
         this.adapter.updateSelectedKeys(this.props.selectedKeys);
       }
 
-      if (this.props.openKeys && !_isEqual(prevProps.openKeys, this.props.openKeys)) {
+      if (this.props.openKeys && !isEqual(prevProps.openKeys, this.props.openKeys)) {
         this.adapter.updateOpenKeys(this.props.openKeys);
       }
 
-      if (!_isEqual(selectedKeys, prevState.selectedKeys)) {
+      if (!isEqual(selectedKeys, prevState.selectedKeys)) {
         const parentSelectKeys = this.foundation.selectLevelZeroParentKeys(null, ...selectedKeys);
         this.adapter.addSelectedKeys(...parentSelectKeys);
       }
@@ -130,21 +120,13 @@ class Nav extends BaseComponent {
   }
 
   get adapter() {
-    var _this = this;
-
     return _Object$assign(_Object$assign({}, super.adapter), {
-      notifySelect: function () {
-        return _this.props.onSelect(...arguments);
-      },
-      notifyOpenChange: function () {
-        return _this.props.onOpenChange(...arguments);
-      },
+      notifySelect: (...args) => this.props.onSelect(...args),
+      notifyOpenChange: (...args) => this.props.onOpenChange(...args),
       setIsCollapsed: isCollapsed => this.setState({
         isCollapsed
       }),
-      notifyCollapseChange: function () {
-        return _this.props.onCollapseChange(...arguments);
-      },
+      notifyCollapseChange: (...args) => this.props.onCollapseChange(...args),
       updateItems: items => this.setState({
         items: [...items]
       }),
@@ -174,9 +156,7 @@ class Nav extends BaseComponent {
    */
 
 
-  renderItems() {
-    let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  renderItems(items = [], level = 0) {
     const finalDom = /*#__PURE__*/React.createElement(React.Fragment, null, _mapInstanceProperty(items).call(items, (item, idx) => {
       if (_Array$isArray(item.items) && item.items.length) {
         return /*#__PURE__*/React.createElement(SubNav, _Object$assign({
@@ -264,14 +244,14 @@ class Nav extends BaseComponent {
       for (let i = 0; i < childrenLength; i++) {
         const child = children[i];
 
-        if (child.type === Footer || _get(child, 'type.name') === 'NavFooter') {
+        if (child.type === Footer || get(child, 'type.name') === 'NavFooter') {
           footers.push(child);
 
           _spliceInstanceProperty(children).call(children, i, 1);
 
           i--;
           childrenLength--;
-        } else if (child.type === Header || _get(child, 'type.name') === 'NavHeader') {
+        } else if (child.type === Header || get(child, 'type.name') === 'NavHeader') {
           headers.push(child);
 
           _spliceInstanceProperty(children).call(children, i, 1);
@@ -391,10 +371,10 @@ Nav.defaultProps = {
   subNavOpenDelay: numbers.DEFAULT_SUBNAV_OPEN_DELAY,
   tooltipHideDelay: numbers.DEFAULT_TOOLTIP_HIDE_DELAY,
   tooltipShowDelay: numbers.DEFAULT_TOOLTIP_SHOW_DELAY,
-  onCollapseChange: _noop,
-  onSelect: _noop,
-  onClick: _noop,
-  onOpenChange: _noop,
+  onCollapseChange: noop,
+  onSelect: noop,
+  onClick: noop,
+  onOpenChange: noop,
   toggleIconPosition: 'right',
   limitIndent: true,
   prefixCls: cssClasses.PREFIX,

package/lib/es/notification/NoticeTransition.js

@@ -2,8 +2,7 @@ import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign"
 // @ts-ignore  Currently there is no types for semi-animation-react
 import { Transition } from '@douyinfe/semi-animation-react';
 import React from 'react';
-export default function NoticeTransition() {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+export default function NoticeTransition(props = {}) {
   let {
     motion = {}
   } = props;
@@ -11,11 +10,10 @@ export default function NoticeTransition() {
     position = 'topRight'
   } = props;
 
-  const formatStyle = function formatStyle(_ref) {
-    let {
-      translate,
-      opacity
-    } = _ref;
+  const formatStyle = function formatStyle({
+    translate,
+    opacity
+  }) {
     let transform = "translateX(".concat(translate, "%)");
 
     if (position && typeof position === 'string') {

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

@@ -9,7 +9,7 @@ export { NoticeTransitionProps } from './NoticeTransition';
 export interface NoticeReactProps extends NoticeProps {
     style?: CSSProperties;
 }
-export { NoticeState, NotificationListProps, NotificationListState };
+export { NoticeState, NotificationListProps, NotificationListState, ConfigProps };
 export declare type NoticesInPosition = {
     top: NoticeInstance[];
     topLeft: NoticeInstance[];
@@ -43,7 +43,7 @@ declare class NotificationList extends BaseComponent<NotificationListProps, Noti
     static destroyAll(): void;
     static config(opts: ConfigProps): void;
     add: (noticeOpts: NoticeProps) => any;
-    remove: (id: string) => void;
+    remove: (id: string | number) => void;
     destroyAll: () => any;
     renderNoticeInPosition: (notices: NoticeInstance[], position: NoticePosition, removedItems?: NoticeInstance[]) => JSX.Element;
     setPosInStyle(noticeInstance: NoticeInstance): {};

package/lib/es/notification/index.js

@@ -31,26 +31,21 @@ const defaultConfig = {
 
 class NotificationList extends BaseComponent {
   constructor(props) {
-    var _this;
-
     super(props);
-    _this = this;
 
     this.add = noticeOpts => this.foundation.addNotice(noticeOpts);
 
     this.remove = id => {
-      this.foundation.removeNotice(id);
+      this.foundation.removeNotice(String(id));
     };
 
     this.destroyAll = () => this.foundation.destroyAll();
 
-    this.renderNoticeInPosition = function (notices, position) {
-      let removedItems = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    this.renderNoticeInPosition = (notices, position, removedItems = []) => {
       const className = cls(cssClasses.LIST); // TODO notifyOnClose
 
       if (notices.length) {
-        const style = _this.setPosInStyle(notices[0]);
-
+        const style = this.setPosInStyle(notices[0]);
         return (
           /*#__PURE__*/
           // @ts-ignore
@@ -66,11 +61,11 @@ class NotificationList extends BaseComponent {
           }, _findInstanceProperty(removedItems).call(removedItems, item => item.id === notice.id) ? null : transitionStyle => /*#__PURE__*/React.createElement(Notice, _Object$assign({}, notice, {
             style: _Object$assign(_Object$assign({}, transitionStyle), notice.style),
             key: notice.id,
-            close: _this.remove
+            close: this.remove
           }))) : /*#__PURE__*/React.createElement(Notice, _Object$assign({}, notice, {
             style: _Object$assign({}, notice.style),
             key: notice.id,
-            close: _this.remove
+            close: this.remove
           }))))
         );
       }
@@ -88,15 +83,12 @@ class NotificationList extends BaseComponent {
   }
 
   get adapter() {
-    var _this2 = this;
-
     return _Object$assign(_Object$assign({}, super.adapter), {
-      updateNotices: function (notices) {
-        let removedItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-        _this2.noticeStorage = [...notices];
-        _this2.removeItemStorage = [...removedItems]; // setState is async sometimes and react often merges state, so use "this" , make sure other code always get right data.
+      updateNotices: (notices, removedItems = []) => {
+        this.noticeStorage = [...notices];
+        this.removeItemStorage = [...removedItems]; // setState is async sometimes and react often merges state, so use "this" , make sure other code always get right data.
 
-        _this2.setState({
+        this.setState({
           notices,
           removedItems
         });

package/lib/es/notification/notice.js

@@ -1,4 +1,3 @@
-import _noop from "lodash/noop";
 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 _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
@@ -27,6 +26,7 @@ import NotificationFoundation from '@douyinfe/semi-foundation/lib/es/notificatio
 import Button from '../iconButton';
 import BaseComponent from '../_base/baseComponent';
 import { isSemiIcon } from '../_utils';
+import { noop } from 'lodash-es';
 import { IconAlertTriangle, IconInfoCircle, IconTickCircle, IconAlertCircle, IconClose } from '@douyinfe/semi-icons';
 const prefixCls = cssClasses.NOTICE;
 const {
@@ -200,10 +200,10 @@ Notice.propTypes = {
 Notice.defaultProps = {
   duration,
   id: '',
-  close: _noop,
-  onClose: _noop,
-  onClick: _noop,
-  onCloseClick: _noop,
+  close: noop,
+  onClose: noop,
+  onClick: noop,
+  onCloseClick: noop,
   content: '',
   title: '',
   showClose: true,

package/lib/es/notification/useNotification/index.js

@@ -30,12 +30,9 @@ function usePatchElement() {
       config
     }, ...originElements]);
     return id => {
-      setElements(originElements => _filterInstanceProperty(originElements).call(originElements, _ref => {
-        let {
-          config: configOfCurrentElement
-        } = _ref;
-        return configOfCurrentElement.id !== id;
-      }));
+      setElements(originElements => _filterInstanceProperty(originElements).call(originElements, ({
+        config: configOfCurrentElement
+      }) => configOfCurrentElement.id !== id));
     };
   }
 
@@ -51,11 +48,10 @@ function usePatchElement() {
       bottomRight: []
     };
 
-    _forEachInstanceProperty(elements).call(elements, _ref2 => {
-      let {
-        element,
-        config
-      } = _ref2;
+    _forEachInstanceProperty(elements).call(elements, ({
+      element,
+      config
+    }) => {
       const {
         position
       } = config;

package/lib/es/overflowList/index.js

@@ -1,7 +1,3 @@
-import _isUndefined from "lodash/isUndefined";
-import _isNull from "lodash/isNull";
-import _omit from "lodash/omit";
-import _isEqual from "lodash/isEqual";
 import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
@@ -13,6 +9,7 @@ import React from 'react';
 import cls from 'classnames';
 import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
+import { isEqual, omit, isNull, isUndefined } from 'lodash-es';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/overflowList/constants';
 import ResizeObserver from '../resizeObserver';
 import IntersectionObserver from './intersectionObserver';
@@ -25,10 +22,7 @@ const RenderMode = strings.MODE_MAP; // reference to https://github.com/palantir
 
 class OverflowList extends BaseComponent {
   constructor(props) {
-    var _this;
-
     super(props);
-    _this = this;
     this.scroller = null;
     this.spacer = null;
 
@@ -39,23 +33,21 @@ class OverflowList extends BaseComponent {
       return renderMode === RenderMode.SCROLL;
     };
 
-    this.resize = function () {
-      let entries = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-
+    this.resize = (entries = []) => {
       // if any parent is growing, assume we have more room than before
       const growing = _someInstanceProperty(entries).call(entries, entry => {
-        const previousWidth = _this.previousWidths.get(entry.target) || 0;
+        const previousWidth = this.previousWidths.get(entry.target) || 0;
         return entry.contentRect.width > previousWidth;
       });
 
-      _this.repartition(growing);
+      this.repartition(growing);
 
-      _forEachInstanceProperty(entries).call(entries, entry => _this.previousWidths.set(entry.target, entry.contentRect.width));
+      _forEachInstanceProperty(entries).call(entries, entry => this.previousWidths.set(entry.target, entry.contentRect.width));
     };
 
     this.repartition = growing => {
       // if not mounted or scroll mode, we do not
-      if (_isNull(this.spacer) || _isUndefined(this.spacer) || this.isScrollMode()) {
+      if (isNull(this.spacer) || isUndefined(this.spacer) || this.isScrollMode()) {
         return;
       } // spacer has flex-shrink and width 1px so if it's much smaller then we know to shrink
 
@@ -149,7 +141,7 @@ class OverflowList extends BaseComponent {
     newState.prevProps = props;
 
     const needUpdate = name => {
-      return !prevProps && name in props || prevProps && !_isEqual(prevProps[name], props[name]);
+      return !prevProps && name in props || prevProps && !isEqual(prevProps[name], props[name]);
     };
 
     if (needUpdate('items') || needUpdate('style')) {
@@ -189,19 +181,17 @@ class OverflowList extends BaseComponent {
     // The following statement prevents re-rendering only in the case where the state changes
     // identity (i.e. setState was called), but the state is still the same when
     // shallow-compared to the previous state.
-    const currState = _omit(this.state, 'prevProps');
-
-    const comingState = _omit(nextState, 'prevProps');
-
-    return !(currState !== comingState && _isEqual(currState, comingState));
+    const currState = omit(this.state, 'prevProps');
+    const comingState = omit(nextState, 'prevProps');
+    return !(currState !== comingState && isEqual(currState, comingState));
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if (!_isEqual(prevProps.items, this.props.items)) {
+    if (!isEqual(prevProps.items, this.props.items)) {
       this.itemRefs = {};
     }
 
-    if (!_isEqual(_omit(prevState, 'prevProps'), _omit(this.state, 'prevProps'))) {
+    if (!isEqual(omit(prevState, 'prevProps'), omit(this.state, 'prevProps'))) {
       this.repartition(false);
     }
 

package/lib/es/overflowList/intersectionObserver.js

@@ -1,10 +1,9 @@
-import _isEmpty from "lodash/isEmpty";
-import _isEqual from "lodash/isEqual";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import React from 'react';
 import PropTypes from 'prop-types';
+import { isEqual, isEmpty } from 'lodash-es';
 export default class ReactIntersectionObserver extends React.PureComponent {
   componentDidMount() {
     const {
@@ -33,7 +32,7 @@ export default class ReactIntersectionObserver extends React.PureComponent {
 
     const itemKeys = _Object$keys(items);
 
-    if (!_isEqual(this.cachedKeys, itemKeys)) {
+    if (!isEqual(this.cachedKeys, itemKeys)) {
       this.observeElement(true);
       this.cachedKeys = itemKeys;
     }
@@ -46,15 +45,14 @@ export default class ReactIntersectionObserver extends React.PureComponent {
     }
   }
 
-  observeElement() {
+  observeElement(force = false) {
     var _context;
 
-    let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     const {
       items
     } = this.props;
 
-    if (_isEmpty(items)) {
+    if (isEmpty(items)) {
       // stop everything if not defined
       this.observer.disconnect();
       return;

package/lib/es/pagination/index.js

@@ -1,4 +1,3 @@
-import _noop from "lodash/noop";
 import _bindInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/bind";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
@@ -10,6 +9,7 @@ import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { FixedSizeList as List } from 'react-window';
+import { noop } from 'lodash-es';
 import PaginationFoundation from '@douyinfe/semi-foundation/lib/es/pagination/foundation';
 import { cssClasses, numbers } from '@douyinfe/semi-foundation/lib/es/pagination/constants';
 import '@douyinfe/semi-foundation/lib/es/pagination/pagination.css';
@@ -436,9 +436,9 @@ Pagination.defaultProps = {
   pageSizeOpts: numbers.PAGE_SIZE_OPTION,
   defaultCurrentPage: 1,
   size: 'default',
-  onPageChange: _noop,
-  onPageSizeChange: _noop,
-  onChange: _noop,
+  onPageChange: noop,
+  onPageSizeChange: noop,
+  onChange: noop,
   showSizeChanger: false,
   className: '',
   hideOnSinglePage: false,

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

@@ -29,6 +29,7 @@ export interface PopconfirmProps extends PopoverProps {
     onCancel?: (e: React.MouseEvent) => void;
     onConfirm?: (e: React.MouseEvent) => void;
     onVisibleChange?: (visible: boolean) => void;
+    onClickOutSide?: (e: React.MouseEvent) => void;
 }
 export interface PopconfirmState {
     visible: boolean;
@@ -50,13 +51,14 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         cancelType: PropTypes.Requireable<string>;
         onCancel: PropTypes.Requireable<(...args: any[]) => any>;
         onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
-        zIndex: PropTypes.Requireable<number>;
+        onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
         onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         visible: PropTypes.Requireable<boolean>;
         defaultVisible: PropTypes.Requireable<boolean>;
         okButtonProps: PropTypes.Requireable<object>;
         cancelButtonProps: PropTypes.Requireable<object>;
         stopPropagation: PropTypes.Requireable<string | boolean>;
+        zIndex: PropTypes.Requireable<number>;
         trigger: PropTypes.Requireable<string>;
         position: PropTypes.Requireable<string>;
     };
@@ -72,6 +74,7 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         zIndex: number;
         onCancel: (...args: any[]) => void;
         onConfirm: (...args: any[]) => void;
+        onClickOutSide: (...args: any[]) => void;
     };
     constructor(props: PopconfirmProps);
     static getDerivedStateFromProps(props: PopconfirmProps, state: PopconfirmState): Partial<PopconfirmState>;
@@ -79,6 +82,7 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
     handleCancel: (e: React.MouseEvent) => void;
     handleConfirm: (e: React.MouseEvent) => void;
     handleVisibleChange: (visible: boolean) => void;
+    handleClickOutSide: (e: React.MouseEvent) => any;
     stopImmediatePropagation: (e: React.SyntheticEvent) => void;
     renderControls(): JSX.Element;
     renderConfirmPopCard(): JSX.Element;

package/lib/es/popconfirm/index.js

@@ -1,5 +1,3 @@
-import _get from "lodash/get";
-import _noop from "lodash/noop";
 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 _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
@@ -20,6 +18,7 @@ var __rest = this && this.__rest || function (s, e) {
 import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
+import { noop, get } from 'lodash-es';
 import { cssClasses, numbers } from '@douyinfe/semi-foundation/lib/es/popconfirm/constants';
 import PopconfirmFoundation from '@douyinfe/semi-foundation/lib/es/popconfirm/popconfirmFoundation';
 import { IconClose, IconAlertTriangle } from '@douyinfe/semi-icons';
@@ -39,6 +38,8 @@ export default class Popconfirm extends BaseComponent {
 
     this.handleVisibleChange = visible => this.foundation.handleVisibleChange(visible);
 
+    this.handleClickOutSide = e => this.foundation.handleClickOutSide(e);
+
     this.stopImmediatePropagation = e => e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation();
 
     this.state = {
@@ -67,7 +68,8 @@ export default class Popconfirm extends BaseComponent {
       }),
       notifyConfirm: e => this.props.onConfirm(e),
       notifyCancel: e => this.props.onCancel(e),
-      notifyVisibleChange: visible => this.props.onVisibleChange(visible)
+      notifyVisibleChange: visible => this.props.onVisibleChange(visible),
+      notifyClickOutSide: e => this.props.onClickOutSide(e)
     });
   }
 
@@ -85,11 +87,11 @@ export default class Popconfirm extends BaseComponent {
     }, (locale, localeCode) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _Object$assign({
       type: cancelType,
       onClick: this.handleCancel
-    }, cancelButtonProps), cancelText || _get(locale, 'cancel')), /*#__PURE__*/React.createElement(Button, _Object$assign({
+    }, cancelButtonProps), cancelText || get(locale, 'cancel')), /*#__PURE__*/React.createElement(Button, _Object$assign({
       type: okType,
       theme: "solid",
       onClick: this.handleConfirm
-    }, okButtonProps), okText || _get(locale, 'confirm'))));
+    }, okButtonProps), okText || get(locale, 'confirm'))));
   }
 
   renderConfirmPopCard() {
@@ -166,7 +168,8 @@ export default class Popconfirm extends BaseComponent {
     const popContent = this.renderConfirmPopCard();
     const popProps = {
       onVisibleChange: this.handleVisibleChange,
-      className: cssClasses.POPOVER
+      className: cssClasses.POPOVER,
+      onClickOutSide: this.handleClickOutSide
     };
 
     if (this.isControlled('visible')) {
@@ -197,13 +200,14 @@ Popconfirm.propTypes = {
   cancelType: PropTypes.string,
   onCancel: PropTypes.func,
   onConfirm: PropTypes.func,
-  zIndex: PropTypes.number,
+  onClickOutSide: PropTypes.func,
   onVisibleChange: PropTypes.func,
   visible: PropTypes.bool,
   defaultVisible: PropTypes.bool,
   okButtonProps: PropTypes.object,
   cancelButtonProps: PropTypes.object,
   stopPropagation: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  zIndex: PropTypes.number,
   // private
   trigger: PropTypes.string,
   position: PropTypes.string
@@ -212,7 +216,7 @@ Popconfirm.defaultProps = {
   stopPropagation: true,
   trigger: 'click',
   // position: 'bottomLeft',
-  onVisibleChange: _noop,
+  onVisibleChange: noop,
   disabled: false,
   icon: /*#__PURE__*/React.createElement(IconAlertTriangle, {
     size: "extra-large"
@@ -221,6 +225,7 @@ Popconfirm.defaultProps = {
   cancelType: 'tertiary',
   prefixCls: cssClasses.PREFIX,
   zIndex: numbers.DEFAULT_Z_INDEX,
-  onCancel: _noop,
-  onConfirm: _noop
+  onCancel: noop,
+  onConfirm: noop,
+  onClickOutSide: noop
 };

package/lib/es/popover/Arrow.js

@@ -1,4 +1,3 @@
-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 _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
@@ -17,11 +16,10 @@ var __rest = this && this.__rest || function (s, e) {
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { get } from 'lodash-es';
 import { numbers, cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/popover/constants';
 
-const Arrow = function () {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
+const Arrow = (props = {}) => {
   const {
     position = '',
     className,
@@ -32,12 +30,9 @@ const Arrow = function () {
 
   const isVertical = _indexOfInstanceProperty(position).call(position, 'top') === 0 || _indexOfInstanceProperty(position).call(position, 'bottom') === 0;
   const cls = classnames(className, cssClasses.ARROW);
-
-  const borderOpacity = _get(arrowStyle, 'borderOpacity', strings.DEFAULT_ARROW_STYLE.borderOpacity);
-
-  const bgColor = _get(arrowStyle, 'backgroundColor', _get(popStyle, 'backgroundColor', strings.DEFAULT_ARROW_STYLE.backgroundColor));
-
-  const borderColor = _get(arrowStyle, 'borderColor', _get(popStyle, 'borderColor', strings.DEFAULT_ARROW_STYLE.borderColor));
+  const borderOpacity = get(arrowStyle, 'borderOpacity', strings.DEFAULT_ARROW_STYLE.borderOpacity);
+  const bgColor = get(arrowStyle, 'backgroundColor', get(popStyle, 'backgroundColor', strings.DEFAULT_ARROW_STYLE.backgroundColor));
+  const borderColor = get(arrowStyle, 'borderColor', get(popStyle, 'borderColor', strings.DEFAULT_ARROW_STYLE.borderColor));
 
   const wrapProps = _Object$assign(_Object$assign({}, rest), {
     width: numbers.ARROW_BOUNDING.width,

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

@@ -22,6 +22,7 @@ export interface PopoverProps extends BaseProps {
     trigger?: Trigger;
     contentClassName?: string | any[];
     onVisibleChange?: (visible: boolean) => void;
+    onClickOutSide?: (e: React.MouseEvent) => void;
     showArrow?: boolean;
     spacing?: number;
     stopPropagation?: boolean | string;
@@ -50,6 +51,7 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         trigger: PropTypes.Validator<"hover" | "focus" | "click" | "custom">;
         contentClassName: PropTypes.Requireable<string | any[]>;
         onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
         style: PropTypes.Requireable<object>;
         spacing: PropTypes.Requireable<number>;
         zIndex: PropTypes.Requireable<number>;
@@ -79,8 +81,8 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         okText: string;
         position: string;
         prefixCls: string;
+        onClickOutSide: (...args: any[]) => void;
     };
-    constructor(props: PopoverProps);
     renderPopCard(): JSX.Element;
     render(): JSX.Element;
 }