@douyinfe/semi-ui 2.38.0-beta.0 → 2.38.1

package/lib/cjs/autoComplete/index.js

@@ -20,6 +20,7 @@ var _trigger = _interopRequireDefault(require("../trigger"));
 var _option = _interopRequireDefault(require("./option"));
 var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/warning"));
 require("@douyinfe/semi-foundation/lib/cjs/autoComplete/autoComplete.css");
+var _reactDom = _interopRequireDefault(require("react-dom"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable @typescript-eslint/ban-types, max-len */
 
@@ -147,6 +148,24 @@ class AutoComplete extends _baseComponent.default {
         this.setState({
           rePosKey
         });
+      },
+      registerClickOutsideHandler: cb => {
+        const clickOutsideHandler = e => {
+          const optionInstance = this.optionsRef && this.optionsRef.current;
+          const triggerDom = this.triggerRef && this.triggerRef.current;
+          const optionsDom = _reactDom.default.findDOMNode(optionInstance);
+          const target = e.target;
+          if (optionsDom && (!optionsDom.contains(target) || !optionsDom.contains(target.parentNode)) && triggerDom && !triggerDom.contains(target)) {
+            cb(e);
+          }
+        };
+        this.clickOutsideHandler = clickOutsideHandler;
+        document.addEventListener('mousedown', clickOutsideHandler, false);
+      },
+      unregisterClickOutsideHandler: () => {
+        if (this.clickOutsideHandler) {
+          document.removeEventListener('mousedown', this.clickOutsideHandler, false);
+        }
       }
     });
   }

package/lib/cjs/select/index.js

@@ -539,7 +539,7 @@ class Select extends _baseComponent.default {
         key: option.key || option.label + option.value + optionIndex,
         renderOptionItem: renderOptionItem,
         inputValue: inputValue,
-        id: `${this.selectID}-option-${optionIndex}`
+        semiOptionId: `${this.selectID}-option-${optionIndex}`
       }), option.label);
     }
     return optionContent;

package/lib/cjs/select/option.js

@@ -75,9 +75,9 @@ class Option extends _react.PureComponent {
         prefixCls,
         renderOptionItem,
         inputValue,
-        id
+        semiOptionId
       } = _a,
-      rest = __rest(_a, ["children", "disabled", "value", "selected", "label", "empty", "emptyContent", "onSelect", "focused", "showTick", "className", "style", "onMouseEnter", "prefixCls", "renderOptionItem", "inputValue", "id"]);
+      rest = __rest(_a, ["children", "disabled", "value", "selected", "label", "empty", "emptyContent", "onSelect", "focused", "showTick", "className", "style", "onMouseEnter", "prefixCls", "renderOptionItem", "inputValue", "semiOptionId"]);
     const optionClassName = (0, _classnames.default)(prefixCls, {
       [`${prefixCls}-disabled`]: disabled,
       [`${prefixCls}-selected`]: selected,
@@ -136,7 +136,7 @@ class Option extends _react.PureComponent {
         },
         onMouseEnter: e => onMouseEnter && onMouseEnter(e),
         role: "option",
-        id: id,
+        id: semiOptionId,
         "aria-selected": selected ? "true" : "false",
         "aria-disabled": disabled ? "true" : "false",
         style: style

package/lib/cjs/tooltip/index.js

@@ -180,7 +180,7 @@ class Tooltip extends _baseComponent.default {
       const icon = this.renderIcon();
       const portalInnerStyle = (0, _omit2.default)(containerStyle, motion ? ['transformOrigin'] : undefined);
       const transformOrigin = (0, _get2.default)(containerStyle, 'transformOrigin');
-      const userOpacity = (0, _get2.default)(style, 'opacity');
+      const userOpacity = (0, _get2.default)(style, 'opacity', null);
       const opacity = userOpacity ? userOpacity : 1;
       const inner = /*#__PURE__*/_react.default.createElement(_cssAnimation.default, {
         fillMode: "forwards",
@@ -206,9 +206,9 @@ class Tooltip extends _baseComponent.default {
             display: "none"
           } : {}), {
             transformOrigin
-          }), style), {
+          }), style), userOpacity ? {
             opacity: isPositionUpdated ? opacity : "0"
-          })
+          } : {})
         }, portalEventSet, animationEventsNeedBind, {
           role: role,
           "x-placement": placement,

package/lib/es/autoComplete/index.js

@@ -15,6 +15,7 @@ import Trigger from '../trigger';
 import Option from './option';
 import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
 import '@douyinfe/semi-foundation/lib/es/autoComplete/autoComplete.css';
+import ReactDOM from 'react-dom';
 const prefixCls = cssClasses.PREFIX;
 const sizeSet = strings.SIZE;
 const positionSet = strings.POSITION;
@@ -139,6 +140,24 @@ class AutoComplete extends BaseComponent {
         this.setState({
           rePosKey
         });
+      },
+      registerClickOutsideHandler: cb => {
+        const clickOutsideHandler = e => {
+          const optionInstance = this.optionsRef && this.optionsRef.current;
+          const triggerDom = this.triggerRef && this.triggerRef.current;
+          const optionsDom = ReactDOM.findDOMNode(optionInstance);
+          const target = e.target;
+          if (optionsDom && (!optionsDom.contains(target) || !optionsDom.contains(target.parentNode)) && triggerDom && !triggerDom.contains(target)) {
+            cb(e);
+          }
+        };
+        this.clickOutsideHandler = clickOutsideHandler;
+        document.addEventListener('mousedown', clickOutsideHandler, false);
+      },
+      unregisterClickOutsideHandler: () => {
+        if (this.clickOutsideHandler) {
+          document.removeEventListener('mousedown', this.clickOutsideHandler, false);
+        }
       }
     });
   }

package/lib/es/select/index.js

@@ -530,7 +530,7 @@ class Select extends BaseComponent {
         key: option.key || option.label + option.value + optionIndex,
         renderOptionItem: renderOptionItem,
         inputValue: inputValue,
-        id: `${this.selectID}-option-${optionIndex}`
+        semiOptionId: `${this.selectID}-option-${optionIndex}`
       }), option.label);
     }
     return optionContent;

package/lib/es/select/option.js

@@ -65,9 +65,9 @@ class Option extends PureComponent {
         prefixCls,
         renderOptionItem,
         inputValue,
-        id
+        semiOptionId
       } = _a,
-      rest = __rest(_a, ["children", "disabled", "value", "selected", "label", "empty", "emptyContent", "onSelect", "focused", "showTick", "className", "style", "onMouseEnter", "prefixCls", "renderOptionItem", "inputValue", "id"]);
+      rest = __rest(_a, ["children", "disabled", "value", "selected", "label", "empty", "emptyContent", "onSelect", "focused", "showTick", "className", "style", "onMouseEnter", "prefixCls", "renderOptionItem", "inputValue", "semiOptionId"]);
     const optionClassName = classNames(prefixCls, {
       [`${prefixCls}-disabled`]: disabled,
       [`${prefixCls}-selected`]: selected,
@@ -126,7 +126,7 @@ class Option extends PureComponent {
         },
         onMouseEnter: e => onMouseEnter && onMouseEnter(e),
         role: "option",
-        id: id,
+        id: semiOptionId,
         "aria-selected": selected ? "true" : "false",
         "aria-disabled": disabled ? "true" : "false",
         style: style

package/lib/es/tooltip/index.js

@@ -170,7 +170,7 @@ export default class Tooltip extends BaseComponent {
       const icon = this.renderIcon();
       const portalInnerStyle = _omit(containerStyle, motion ? ['transformOrigin'] : undefined);
       const transformOrigin = _get(containerStyle, 'transformOrigin');
-      const userOpacity = _get(style, 'opacity');
+      const userOpacity = _get(style, 'opacity', null);
       const opacity = userOpacity ? userOpacity : 1;
       const inner = /*#__PURE__*/React.createElement(CSSAnimation, {
         fillMode: "forwards",
@@ -196,9 +196,9 @@ export default class Tooltip extends BaseComponent {
             display: "none"
           } : {}), {
             transformOrigin
-          }), style), {
+          }), style), userOpacity ? {
             opacity: isPositionUpdated ? opacity : "0"
-          })
+          } : {})
         }, portalEventSet, animationEventsNeedBind, {
           role: role,
           "x-placement": placement,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.38.0-beta.0",
+    "version": "2.38.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.38.0-beta.0",
-        "@douyinfe/semi-animation-react": "2.38.0-beta.0",
-        "@douyinfe/semi-foundation": "2.38.0-beta.0",
-        "@douyinfe/semi-icons": "2.38.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.38.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.38.0-beta.0",
+        "@douyinfe/semi-animation": "2.38.1",
+        "@douyinfe/semi-animation-react": "2.38.1",
+        "@douyinfe/semi-foundation": "2.38.1",
+        "@douyinfe/semi-icons": "2.38.1",
+        "@douyinfe/semi-illustrations": "2.38.1",
+        "@douyinfe/semi-theme-default": "2.38.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,7 +69,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "f9fa7bba4ffc5635489ad1687740b336b0395948",
+    "gitHead": "aaad3c86114e9bd2d9a61c8b78260e18ffc0eec6",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",