@douyinfe/semi-ui 2.10.0 → 2.10.1

package/lib/cjs/tooltip/index.d.ts

@@ -164,6 +164,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     componentDidUpdate(prevProps: TooltipProps, prevState: TooltipState): void;
     renderIcon: () => any;
     handlePortalInnerClick: (e: React.MouseEvent) => void;
+    handlePortalMouseDown: (e: React.MouseEvent) => void;
     handlePortalInnerKeyDown: (e: React.KeyboardEvent) => void;
     renderContentNode: (content: TooltipProps['content']) => React.ReactNode;
     renderPortal: () => JSX.Element;

package/lib/cjs/tooltip/index.js

@@ -187,6 +187,12 @@ class Tooltip extends _baseComponent.default {
       }
     };
 
+    this.handlePortalMouseDown = e => {
+      if (this.props.stopPropagation) {
+        (0, _utils.stopPropagation)(e);
+      }
+    };
+
     this.handlePortalInnerKeyDown = e => {
       this.foundation.handleContainerKeydown(e);
     };
@@ -271,6 +277,7 @@ class Tooltip extends _baseComponent.default {
         style: portalInnerStyle,
         ref: this.setContainerEl,
         onClick: this.handlePortalInnerClick,
+        onMouseDown: this.handlePortalMouseDown,
         onKeyDown: this.handlePortalInnerKeyDown
       }, inner));
     };
@@ -498,15 +505,11 @@ class Tooltip extends _baseComponent.default {
           }
         };
 
-        document.addEventListener('mousedown', this.clickOutsideHandler, {
-          capture: true
-        });
+        window.addEventListener('mousedown', this.clickOutsideHandler);
       },
       unregisterClickOutsideHandler: () => {
         if (this.clickOutsideHandler) {
-          document.removeEventListener('mousedown', this.clickOutsideHandler, {
-            capture: true
-          });
+          window.removeEventListener('mousedown', this.clickOutsideHandler);
           this.clickOutsideHandler = null;
         }
       },

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

@@ -164,6 +164,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     componentDidUpdate(prevProps: TooltipProps, prevState: TooltipState): void;
     renderIcon: () => any;
     handlePortalInnerClick: (e: React.MouseEvent) => void;
+    handlePortalMouseDown: (e: React.MouseEvent) => void;
     handlePortalInnerKeyDown: (e: React.KeyboardEvent) => void;
     renderContentNode: (content: TooltipProps['content']) => React.ReactNode;
     renderPortal: () => JSX.Element;

package/lib/es/tooltip/index.js

@@ -138,6 +138,12 @@ export default class Tooltip extends BaseComponent {
       }
     };
 
+    this.handlePortalMouseDown = e => {
+      if (this.props.stopPropagation) {
+        stopPropagation(e);
+      }
+    };
+
     this.handlePortalInnerKeyDown = e => {
       this.foundation.handleContainerKeydown(e);
     };
@@ -225,6 +231,7 @@ export default class Tooltip extends BaseComponent {
         style: portalInnerStyle,
         ref: this.setContainerEl,
         onClick: this.handlePortalInnerClick,
+        onMouseDown: this.handlePortalMouseDown,
         onKeyDown: this.handlePortalInnerKeyDown
       }, inner));
     };
@@ -457,15 +464,11 @@ export default class Tooltip extends BaseComponent {
           }
         };
 
-        document.addEventListener('mousedown', this.clickOutsideHandler, {
-          capture: true
-        });
+        window.addEventListener('mousedown', this.clickOutsideHandler);
       },
       unregisterClickOutsideHandler: () => {
         if (this.clickOutsideHandler) {
-          document.removeEventListener('mousedown', this.clickOutsideHandler, {
-            capture: true
-          });
+          window.removeEventListener('mousedown', this.clickOutsideHandler);
           this.clickOutsideHandler = null;
         }
       },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.10.0",
+    "version": "2.10.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.10.0",
-        "@douyinfe/semi-animation-react": "2.10.0",
-        "@douyinfe/semi-foundation": "2.10.0",
-        "@douyinfe/semi-icons": "2.10.0",
-        "@douyinfe/semi-illustrations": "2.10.0",
-        "@douyinfe/semi-theme-default": "2.10.0",
+        "@douyinfe/semi-animation": "2.10.1",
+        "@douyinfe/semi-animation-react": "2.10.1",
+        "@douyinfe/semi-foundation": "2.10.1",
+        "@douyinfe/semi-icons": "2.10.1",
+        "@douyinfe/semi-illustrations": "2.10.1",
+        "@douyinfe/semi-theme-default": "2.10.1",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "0cbe3b9873aa550afa2eda0997eaa7015983fe0d",
+    "gitHead": "1c84b585ff43db35b286e8c24f8333e4170d015c",
     "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.10.0",
+        "@douyinfe/semi-scss-compile": "2.10.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/popover/_story/popover.stories.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import Popover from '../index';
 import { strings } from '@douyinfe/semi-foundation/tooltip/constants';
-import { Button, Input, Table, IconButton, Modal, Tag, Space } from '@douyinfe/semi-ui';
+import { Button, Input, Table, IconButton, Modal, Tag, Space, Select } from '@douyinfe/semi-ui';
 import SelectInPopover from './SelectInPopover';
 import BtnClose from './BtnClose';
 import PopRight from './PopRight';
@@ -10,6 +10,8 @@ import NestedPopover from './NestedPopover';
 import ArrowPointAtCenter from './ArrowPointAtCenter';
 import { IconDelete } from '@douyinfe/semi-icons';
 
+const Option = Select.Option;
+
 export default {
   title: 'Popover',
   parameters: {
@@ -645,4 +647,38 @@ export const A11yKeyboard = () => {
       </div>
   );
 };
-A11yKeyboard.storyName = "a11y keyboard and focus";
+A11yKeyboard.storyName = "a11y keyboard and focus";
+
+/**
+ * fix 嵌套 popover 的弹出层会导致外部 popover 关闭问题
+ * 
+ * @see https://github.com/DouyinFE/semi-design/issues/818
+ * @see https://github.com/facebook/react/issues/4335#issuecomment-421705171
+ */
+export const FixNestedPopover = () => {
+    return (
+        <div data-cy="fix-nested-popover" style={{ paddingLeft: 100 }}>
+            <Popover
+                content={(
+                    <div data-cy="select-in-popover" style={{ padding: 20 }}>
+                        <Select
+                            defaultValue="abc"
+                            style={{ width: 120 }}
+                        >
+                            <Option value="abc">抖音</Option>
+                            <Option value="hotsoon">火山</Option>
+                            <Option value="pipixia" disabled>
+                                皮皮虾
+                            </Option>
+                            <Option value="xigua">西瓜视频</Option>
+                        </Select>
+                    </div>
+                )}
+                trigger="click"
+                showArrow
+            >
+                <Tag>点击此处</Tag>
+            </Popover>
+        </div>
+    );
+}

package/tooltip/index.tsx

@@ -343,11 +343,11 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                         cb();
                     }
                 };
-                document.addEventListener('mousedown', this.clickOutsideHandler, { capture: true });
+                window.addEventListener('mousedown', this.clickOutsideHandler);
             },
             unregisterClickOutsideHandler: () => {
                 if (this.clickOutsideHandler) {
-                    document.removeEventListener('mousedown', this.clickOutsideHandler, { capture: true });
+                    window.removeEventListener('mousedown', this.clickOutsideHandler);
                     this.clickOutsideHandler = null;
                 }
             },
@@ -528,6 +528,12 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         }
     };
 
+    handlePortalMouseDown = (e: React.MouseEvent) => {
+        if (this.props.stopPropagation) {
+            stopPropagation(e);
+        }
+    }
+
     handlePortalInnerKeyDown = (e: React.KeyboardEvent) => {
         this.foundation.handleContainerKeydown(e);
     }
@@ -595,6 +601,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                     style={portalInnerStyle}
                     ref={this.setContainerEl}
                     onClick={this.handlePortalInnerClick}
+                    onMouseDown={this.handlePortalMouseDown}
                     onKeyDown={this.handlePortalInnerKeyDown}
                 >
                     {inner}