@douyinfe/semi-ui 2.55.4 → 2.56.0-beta.0

package/lib/cjs/_base/base.css

@@ -1,7 +1,7 @@
 /* shadow */
 /* sizing */
 /* spacing */
-body {
+body, :host {
   --semi-transition_duration-slowest:0ms;
   --semi-transition_duration-slower:0ms;
   --semi-transition_duration-slow:0ms;
@@ -38,8 +38,7 @@ body {
   --semi-transform_rotate-anticlockwise360deg:rotate(-360deg);
 }
 
-body,
-body .semi-always-light {
+body, body .semi-always-light, :host, :host .semi-always-light {
   --semi-amber-0: 254,251,235;
   --semi-amber-1: 252,245,206;
   --semi-amber-2: 249,232,158;
@@ -204,8 +203,7 @@ body .semi-always-light {
   --semi-yellow-9: 83,72,0;
 }
 
-body[theme-mode=dark],
-body .semi-always-dark {
+body[theme-mode=dark], body .semi-always-dark, :host-context(body[theme-mode=dark]), :host .semi-always-dark {
   --semi-red-0: 108,9,11;
   --semi-red-1: 144,17,16;
   --semi-red-2: 180,32,25;
@@ -370,7 +368,7 @@ body .semi-always-dark {
   --semi-black: 0, 0, 0;
 }
 
-body, body[theme-mode=dark] .semi-always-light {
+body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light {
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   --semi-color-white: rgba(var(--semi-white), 1);
@@ -480,7 +478,7 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-color-data-19: rgba(188, 198, 255, 1);
 }
 
-body[theme-mode=dark], body .semi-always-dark {
+body[theme-mode=dark], body .semi-always-dark, :host-context(body[theme-mode=dark]), :host .semi-always-dark {
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   --semi-color-white: rgba(228, 231, 245, 1);

package/lib/cjs/autoComplete/index.js

@@ -154,7 +154,8 @@ class AutoComplete extends _baseComponent.default {
           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)) {
+          const path = e.composedPath && e.composedPath() || [target];
+          if (optionsDom && (!optionsDom.contains(target) || !optionsDom.contains(target.parentNode)) && triggerDom && !triggerDom.contains(target) && !(path.includes(triggerDom) || path.includes(optionsDom))) {
             cb(e);
           }
         };

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

@@ -26,6 +26,7 @@ export default class BackTop extends BaseComponent<BackTopProps, BackTopState> {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
     };
+    handler: (e: React.MouseEvent<HTMLDivElement>) => void;
     constructor(props: BackTopProps);
     componentDidMount(): void;
     componentWillUnmount(): void;

package/lib/cjs/backtop/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _throttle2 = _interopRequireDefault(require("lodash/throttle"));
 var _react = _interopRequireDefault(require("react"));
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -34,7 +35,9 @@ class BackTop extends _baseComponent.default {
     this.foundation = new _foundation.default(this.adapter);
   }
   componentDidMount() {
+    var _a;
     this.foundation.init();
+    this.handler = (0, _throttle2.default)(this.handleClick, (_a = this.props.duration) !== null && _a !== void 0 ? _a : BackTop.defaultProps.duration);
   }
   componentWillUnmount() {
     this.foundation.destroy();
@@ -92,7 +95,7 @@ class BackTop extends _baseComponent.default {
     _react.default.createElement("div", Object.assign({}, others, {
       className: preCls,
       style: style,
-      onClick: e => this.handleClick(e),
+      onClick: e => this.handler(e),
       "x-semi-prop": "children"
     }), backtopBtn) : null;
     return content;

package/lib/cjs/calendar/monthCalendar.js

@@ -287,7 +287,9 @@ class monthCalendar extends _baseComponent.default {
         const clickOutsideHandler = e => {
           const cardInstance = this.cardRef && this.cardRef.get(key);
           const cardDom = _reactDom.default.findDOMNode(cardInstance);
-          if (cardDom && !cardDom.contains(e.target)) {
+          const target = e.target;
+          const path = e.composedPath && e.composedPath() || [target];
+          if (cardDom && !cardDom.contains(target) && !path.includes(cardDom)) {
             cb();
           }
         };

package/lib/cjs/cascader/index.js

@@ -67,10 +67,10 @@ class Cascader extends _baseComponent.default {
         displayRender,
         disableStrictly
       } = this.props;
-      const isDsiabled = disabled || keyEntities[nodeKey].data.disabled || disableStrictly && disabledKeys.has(nodeKey);
       if (keyEntities[nodeKey]) {
+        const isDisabled = disabled || keyEntities[nodeKey].data.disabled || disableStrictly && disabledKeys.has(nodeKey);
         const tagCls = (0, _classnames.default)(`${prefixcls}-selection-tag`, {
-          [`${prefixcls}-selection-tag-disabled`]: isDsiabled
+          [`${prefixcls}-selection-tag-disabled`]: isDisabled
         });
         // custom render tags
         if ((0, _isFunction2.default)(displayRender)) {
@@ -570,7 +570,8 @@ class Cascader extends _baseComponent.default {
           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)) {
+          const path = e.composedPath && e.composedPath() || [target];
+          if (optionsDom && (!optionsDom.contains(target) || !optionsDom.contains(target.parentNode)) && triggerDom && !triggerDom.contains(target) && !(path.includes(triggerDom) || path.includes(optionsDom))) {
             cb(e);
           }
         };
@@ -733,7 +734,11 @@ class Cascader extends _baseComponent.default {
         formatItem.length > 0 && formatValuePath.push(formatItem);
       });
       // formatKeys is used to save key of value
-      const formatKeys = formatValuePath.map(v => (0, _util.getKeyByValuePath)(v));
+      const formatKeys = formatValuePath.reduce((acc, cur) => {
+        const key = (0, _util.getKeyByValuePath)(cur);
+        keyEntities[key] && acc.push(key);
+        return acc;
+      }, []);
       return formatKeys;
     };
     const needUpdateTreeData = needUpdate('treeData') || needUpdateData();

package/lib/cjs/datePicker/datePicker.js

@@ -274,15 +274,11 @@ class DatePicker extends _baseComponent.default {
         this.clickOutSideHandler = e => {
           const triggerEl = this.triggerElRef && this.triggerElRef.current;
           const panelEl = this.panelRef && this.panelRef.current;
-          const isInTrigger = triggerEl && triggerEl.contains(e.target);
-          const isInPanel = panelEl && panelEl.contains(e.target);
-          const clickOutSide = !isInTrigger && !isInPanel && this._mounted;
-          if (this.adapter.needConfirm()) {
-            clickOutSide && this.props.onClickOutSide();
-            return;
-          } else {
-            if (clickOutSide) {
-              this.props.onClickOutSide();
+          const target = e.target;
+          const path = e.composedPath && e.composedPath() || [target];
+          if (!(triggerEl && triggerEl.contains(target)) && !(panelEl && panelEl.contains(target)) && !(path.includes(triggerEl) || path.includes(panelEl))) {
+            this.props.onClickOutSide();
+            if (!this.adapter.needConfirm()) {
               this.foundation.closePanel(e);
             }
           }

package/lib/cjs/select/index.js

@@ -196,9 +196,9 @@ class Select extends _baseComponent.default {
           const optionInstance = this.optionsRef && this.optionsRef.current;
           const triggerDom = this.triggerRef && this.triggerRef.current;
           const optionsDom = _reactDom.default.findDOMNode(optionInstance);
-          // let isInPanel = optionsDom && optionsDom.contains(e.target);
-          // let isInTrigger = triggerDom && triggerDom.contains(e.target);
-          if (optionsDom && !optionsDom.contains(e.target) && triggerDom && !triggerDom.contains(e.target)) {
+          const target = e.target;
+          const path = e.composedPath && e.composedPath() || [target];
+          if (!(optionsDom && optionsDom.contains(target)) && !(triggerDom && triggerDom.contains(target)) && !(path.includes(triggerDom) || path.includes(optionsDom))) {
             cb(e);
           }
         };

package/lib/cjs/tagInput/index.js

@@ -270,7 +270,8 @@ class TagInput extends _baseComponent.default {
         const clickOutsideHandler = e => {
           const tagInputDom = this.tagInputRef && this.tagInputRef.current;
           const target = e.target;
-          if (tagInputDom && !tagInputDom.contains(target)) {
+          const path = e.composedPath && e.composedPath() || [target];
+          if (tagInputDom && !tagInputDom.contains(target) && !path.includes(tagInputDom)) {
             cb(e);
           }
         };

package/lib/cjs/timePicker/TimePicker.d.ts

@@ -193,6 +193,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
     foundation: TimePickerFoundation;
     timePickerRef: React.MutableRefObject<HTMLDivElement>;
     savePanelRef: React.RefObject<HTMLDivElement>;
+    useCustomTrigger: boolean;
     clickOutSideHandler: (e: MouseEvent) => void;
     constructor(props: TimePickerProps);
     get adapter(): TimePickerAdapter<TimePickerProps, TimePickerState>;

package/lib/cjs/timePicker/TimePicker.js

@@ -92,6 +92,7 @@ class TimePicker extends _baseComponent.default {
     this.foundation = new _foundation.default(this.adapter);
     this.timePickerRef = /*#__PURE__*/_react.default.createRef();
     this.savePanelRef = /*#__PURE__*/_react.default.createRef();
+    this.useCustomTrigger = typeof this.props.triggerRender === 'function';
   }
   get adapter() {
     var _this2 = this;
@@ -107,11 +108,11 @@ class TimePicker extends _baseComponent.default {
         }
         this.clickOutSideHandler = e => {
           const panel = this.savePanelRef && this.savePanelRef.current;
-          const isInPanel = e.target && panel && panel.contains(e.target);
-          const isInTimepicker = this.timePickerRef && this.timePickerRef.current && this.timePickerRef.current.contains(e.target);
-          if (!isInTimepicker && !isInPanel) {
-            const clickedOutside = true;
-            this.foundation.handlePanelClose(clickedOutside, e);
+          const trigger = this.timePickerRef && this.timePickerRef.current;
+          const target = e.target;
+          const path = e.composedPath && e.composedPath() || [target];
+          if (!(panel && panel.contains(target)) && !(trigger && trigger.contains(target)) && !(path.includes(trigger) || path.includes(panel))) {
+            this.foundation.handlePanelClose(true, e);
           }
         };
         document.addEventListener('mousedown', this.clickOutSideHandler);
@@ -275,7 +276,6 @@ class TimePicker extends _baseComponent.default {
       rest = __rest(_a, ["prefixCls", "placeholder", "disabled", "defaultValue", "dropdownMargin", "className", "popupStyle", "size", "style", "locale", "localeCode", "zIndex", "getPopupContainer", "insetLabel", "insetLabelId", "inputStyle", "showClear", "panelHeader", "panelFooter", "rangeSeparator", "onOpenChange", "onChangeWithDateFirst", "popupClassName", "hideDisabledOptions", "use12Hours", "minuteStep", "hourStep", "secondStep", "scrollItemProps", "triggerRender", "motion", "autoAdjustOverflow", "stopPropagation"]);
     const format = this.foundation.getDefaultFormatIfNeed();
     const position = this.foundation.getPosition();
-    const useCustomTrigger = typeof triggerRender === 'function';
     const {
       open,
       inputValue,
@@ -309,7 +309,7 @@ class TimePicker extends _baseComponent.default {
       onBlur: this.handleBlur
     });
     const outerProps = {};
-    if (useCustomTrigger) {
+    if (this.useCustomTrigger) {
       outerProps.onClick = this.openPanel;
     }
     return /*#__PURE__*/_react.default.createElement("div", Object.assign({
@@ -332,7 +332,7 @@ class TimePicker extends _baseComponent.default {
       margin: dropdownMargin,
       autoAdjustOverflow: autoAdjustOverflow,
       stopPropagation: stopPropagation
-    }, useCustomTrigger ? /*#__PURE__*/_react.default.createElement(_trigger.default, {
+    }, this.useCustomTrigger ? /*#__PURE__*/_react.default.createElement(_trigger.default, {
       triggerRender: triggerRender,
       disabled: disabled,
       value: value,

package/lib/cjs/tooltip/index.js

@@ -432,7 +432,10 @@ class Tooltip extends _baseComponent.default {
           let popupEl = this.containerEl && this.containerEl.current;
           el = _reactDom.default.findDOMNode(el);
           popupEl = _reactDom.default.findDOMNode(popupEl);
-          if (el && !el.contains(e.target) && popupEl && !popupEl.contains(e.target) || this.props.clickTriggerToHide && el && el.contains(e.target)) {
+          const target = e.target;
+          const path = e.composedPath && e.composedPath() || [target];
+          const isClickTriggerToHide = this.props.clickTriggerToHide ? el && el.contains(target) || path.includes(el) : false;
+          if (el && !el.contains(target) && popupEl && !popupEl.contains(target) && !(path.includes(popupEl) || path.includes(el)) || isClickTriggerToHide) {
             this.props.onClickOutSide(e);
             cb();
           }

package/lib/cjs/tree/treeNode.js

@@ -50,6 +50,7 @@ class TreeNode extends _react.PureComponent {
       onNodeExpand(e, this.props);
     };
     this.onCheck = e => {
+      var _a, _b;
       if (this.isDisabled()) {
         return;
       }
@@ -57,7 +58,7 @@ class TreeNode extends _react.PureComponent {
         onNodeCheck
       } = this.context;
       e.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
+      (_b = (_a = e.nativeEvent) === null || _a === void 0 ? void 0 : _a.stopImmediatePropagation) === null || _b === void 0 ? void 0 : _b.call(_a);
       onNodeCheck(e, this.props);
     };
     /**

package/lib/cjs/treeSelect/index.js

@@ -1114,7 +1114,8 @@ class TreeSelect extends _baseComponent.default {
           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)) {
+          const path = e.composedPath && e.composedPath() || [target];
+          if (optionsDom && (!optionsDom.contains(target) || !optionsDom.contains(target.parentNode)) && triggerDom && !triggerDom.contains(target) && !(path.includes(triggerDom) || path.includes(optionsDom))) {
             cb(e);
           }
         };

package/lib/es/_base/base.css

@@ -1,7 +1,7 @@
 /* shadow */
 /* sizing */
 /* spacing */
-body {
+body, :host {
   --semi-transition_duration-slowest:0ms;
   --semi-transition_duration-slower:0ms;
   --semi-transition_duration-slow:0ms;
@@ -38,8 +38,7 @@ body {
   --semi-transform_rotate-anticlockwise360deg:rotate(-360deg);
 }
 
-body,
-body .semi-always-light {
+body, body .semi-always-light, :host, :host .semi-always-light {
   --semi-amber-0: 254,251,235;
   --semi-amber-1: 252,245,206;
   --semi-amber-2: 249,232,158;
@@ -204,8 +203,7 @@ body .semi-always-light {
   --semi-yellow-9: 83,72,0;
 }
 
-body[theme-mode=dark],
-body .semi-always-dark {
+body[theme-mode=dark], body .semi-always-dark, :host-context(body[theme-mode=dark]), :host .semi-always-dark {
   --semi-red-0: 108,9,11;
   --semi-red-1: 144,17,16;
   --semi-red-2: 180,32,25;
@@ -370,7 +368,7 @@ body .semi-always-dark {
   --semi-black: 0, 0, 0;
 }
 
-body, body[theme-mode=dark] .semi-always-light {
+body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light {
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   --semi-color-white: rgba(var(--semi-white), 1);
@@ -480,7 +478,7 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-color-data-19: rgba(188, 198, 255, 1);
 }
 
-body[theme-mode=dark], body .semi-always-dark {
+body[theme-mode=dark], body .semi-always-dark, :host-context(body[theme-mode=dark]), :host .semi-always-dark {
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   --semi-color-white: rgba(228, 231, 245, 1);

package/lib/es/autoComplete/index.js

@@ -147,7 +147,8 @@ class AutoComplete extends BaseComponent {
           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)) {
+          const path = e.composedPath && e.composedPath() || [target];
+          if (optionsDom && (!optionsDom.contains(target) || !optionsDom.contains(target.parentNode)) && triggerDom && !triggerDom.contains(target) && !(path.includes(triggerDom) || path.includes(optionsDom))) {
             cb(e);
           }
         };

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

@@ -26,6 +26,7 @@ export default class BackTop extends BaseComponent<BackTopProps, BackTopState> {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
     };
+    handler: (e: React.MouseEvent<HTMLDivElement>) => void;
     constructor(props: BackTopProps);
     componentDidMount(): void;
     componentWillUnmount(): void;

package/lib/es/backtop/index.js

@@ -1,3 +1,4 @@
+import _throttle from "lodash/throttle";
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
@@ -27,7 +28,9 @@ export default class BackTop extends BaseComponent {
     this.foundation = new BackTopFoundation(this.adapter);
   }
   componentDidMount() {
+    var _a;
     this.foundation.init();
+    this.handler = _throttle(this.handleClick, (_a = this.props.duration) !== null && _a !== void 0 ? _a : BackTop.defaultProps.duration);
   }
   componentWillUnmount() {
     this.foundation.destroy();
@@ -85,7 +88,7 @@ export default class BackTop extends BaseComponent {
     React.createElement("div", Object.assign({}, others, {
       className: preCls,
       style: style,
-      onClick: e => this.handleClick(e),
+      onClick: e => this.handler(e),
       "x-semi-prop": "children"
     }), backtopBtn) : null;
     return content;

package/lib/es/calendar/monthCalendar.js

@@ -279,7 +279,9 @@ export default class monthCalendar extends BaseComponent {
         const clickOutsideHandler = e => {
           const cardInstance = this.cardRef && this.cardRef.get(key);
           const cardDom = ReactDOM.findDOMNode(cardInstance);
-          if (cardDom && !cardDom.contains(e.target)) {
+          const target = e.target;
+          const path = e.composedPath && e.composedPath() || [target];
+          if (cardDom && !cardDom.contains(target) && !path.includes(cardDom)) {
             cb();
           }
         };

package/lib/es/cascader/index.js

@@ -58,10 +58,10 @@ class Cascader extends BaseComponent {
         displayRender,
         disableStrictly
       } = this.props;
-      const isDsiabled = disabled || keyEntities[nodeKey].data.disabled || disableStrictly && disabledKeys.has(nodeKey);
       if (keyEntities[nodeKey]) {
+        const isDisabled = disabled || keyEntities[nodeKey].data.disabled || disableStrictly && disabledKeys.has(nodeKey);
         const tagCls = cls(`${prefixcls}-selection-tag`, {
-          [`${prefixcls}-selection-tag-disabled`]: isDsiabled
+          [`${prefixcls}-selection-tag-disabled`]: isDisabled
         });
         // custom render tags
         if (_isFunction(displayRender)) {
@@ -561,7 +561,8 @@ class Cascader extends BaseComponent {
           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)) {
+          const path = e.composedPath && e.composedPath() || [target];
+          if (optionsDom && (!optionsDom.contains(target) || !optionsDom.contains(target.parentNode)) && triggerDom && !triggerDom.contains(target) && !(path.includes(triggerDom) || path.includes(optionsDom))) {
             cb(e);
           }
         };
@@ -724,7 +725,11 @@ class Cascader extends BaseComponent {
         formatItem.length > 0 && formatValuePath.push(formatItem);
       });
       // formatKeys is used to save key of value
-      const formatKeys = formatValuePath.map(v => getKeyByValuePath(v));
+      const formatKeys = formatValuePath.reduce((acc, cur) => {
+        const key = getKeyByValuePath(cur);
+        keyEntities[key] && acc.push(key);
+        return acc;
+      }, []);
       return formatKeys;
     };
     const needUpdateTreeData = needUpdate('treeData') || needUpdateData();

package/lib/es/datePicker/datePicker.js

@@ -266,15 +266,11 @@ export default class DatePicker extends BaseComponent {
         this.clickOutSideHandler = e => {
           const triggerEl = this.triggerElRef && this.triggerElRef.current;
           const panelEl = this.panelRef && this.panelRef.current;
-          const isInTrigger = triggerEl && triggerEl.contains(e.target);
-          const isInPanel = panelEl && panelEl.contains(e.target);
-          const clickOutSide = !isInTrigger && !isInPanel && this._mounted;
-          if (this.adapter.needConfirm()) {
-            clickOutSide && this.props.onClickOutSide();
-            return;
-          } else {
-            if (clickOutSide) {
-              this.props.onClickOutSide();
+          const target = e.target;
+          const path = e.composedPath && e.composedPath() || [target];
+          if (!(triggerEl && triggerEl.contains(target)) && !(panelEl && panelEl.contains(target)) && !(path.includes(triggerEl) || path.includes(panelEl))) {
+            this.props.onClickOutSide();
+            if (!this.adapter.needConfirm()) {
               this.foundation.closePanel(e);
             }
           }

package/lib/es/select/index.js

@@ -187,9 +187,9 @@ class Select extends BaseComponent {
           const optionInstance = this.optionsRef && this.optionsRef.current;
           const triggerDom = this.triggerRef && this.triggerRef.current;
           const optionsDom = ReactDOM.findDOMNode(optionInstance);
-          // let isInPanel = optionsDom && optionsDom.contains(e.target);
-          // let isInTrigger = triggerDom && triggerDom.contains(e.target);
-          if (optionsDom && !optionsDom.contains(e.target) && triggerDom && !triggerDom.contains(e.target)) {
+          const target = e.target;
+          const path = e.composedPath && e.composedPath() || [target];
+          if (!(optionsDom && optionsDom.contains(target)) && !(triggerDom && triggerDom.contains(target)) && !(path.includes(triggerDom) || path.includes(optionsDom))) {
             cb(e);
           }
         };

package/lib/es/tagInput/index.js

@@ -263,7 +263,8 @@ class TagInput extends BaseComponent {
         const clickOutsideHandler = e => {
           const tagInputDom = this.tagInputRef && this.tagInputRef.current;
           const target = e.target;
-          if (tagInputDom && !tagInputDom.contains(target)) {
+          const path = e.composedPath && e.composedPath() || [target];
+          if (tagInputDom && !tagInputDom.contains(target) && !path.includes(tagInputDom)) {
             cb(e);
           }
         };

package/lib/es/timePicker/TimePicker.d.ts

@@ -193,6 +193,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
     foundation: TimePickerFoundation;
     timePickerRef: React.MutableRefObject<HTMLDivElement>;
     savePanelRef: React.RefObject<HTMLDivElement>;
+    useCustomTrigger: boolean;
     clickOutSideHandler: (e: MouseEvent) => void;
     constructor(props: TimePickerProps);
     get adapter(): TimePickerAdapter<TimePickerProps, TimePickerState>;

package/lib/es/timePicker/TimePicker.js

@@ -85,6 +85,7 @@ export default class TimePicker extends BaseComponent {
     this.foundation = new TimePickerFoundation(this.adapter);
     this.timePickerRef = /*#__PURE__*/React.createRef();
     this.savePanelRef = /*#__PURE__*/React.createRef();
+    this.useCustomTrigger = typeof this.props.triggerRender === 'function';
   }
   get adapter() {
     var _this2 = this;
@@ -100,11 +101,11 @@ export default class TimePicker extends BaseComponent {
         }
         this.clickOutSideHandler = e => {
           const panel = this.savePanelRef && this.savePanelRef.current;
-          const isInPanel = e.target && panel && panel.contains(e.target);
-          const isInTimepicker = this.timePickerRef && this.timePickerRef.current && this.timePickerRef.current.contains(e.target);
-          if (!isInTimepicker && !isInPanel) {
-            const clickedOutside = true;
-            this.foundation.handlePanelClose(clickedOutside, e);
+          const trigger = this.timePickerRef && this.timePickerRef.current;
+          const target = e.target;
+          const path = e.composedPath && e.composedPath() || [target];
+          if (!(panel && panel.contains(target)) && !(trigger && trigger.contains(target)) && !(path.includes(trigger) || path.includes(panel))) {
+            this.foundation.handlePanelClose(true, e);
           }
         };
         document.addEventListener('mousedown', this.clickOutSideHandler);
@@ -268,7 +269,6 @@ export default class TimePicker extends BaseComponent {
       rest = __rest(_a, ["prefixCls", "placeholder", "disabled", "defaultValue", "dropdownMargin", "className", "popupStyle", "size", "style", "locale", "localeCode", "zIndex", "getPopupContainer", "insetLabel", "insetLabelId", "inputStyle", "showClear", "panelHeader", "panelFooter", "rangeSeparator", "onOpenChange", "onChangeWithDateFirst", "popupClassName", "hideDisabledOptions", "use12Hours", "minuteStep", "hourStep", "secondStep", "scrollItemProps", "triggerRender", "motion", "autoAdjustOverflow", "stopPropagation"]);
     const format = this.foundation.getDefaultFormatIfNeed();
     const position = this.foundation.getPosition();
-    const useCustomTrigger = typeof triggerRender === 'function';
     const {
       open,
       inputValue,
@@ -302,7 +302,7 @@ export default class TimePicker extends BaseComponent {
       onBlur: this.handleBlur
     });
     const outerProps = {};
-    if (useCustomTrigger) {
+    if (this.useCustomTrigger) {
       outerProps.onClick = this.openPanel;
     }
     return /*#__PURE__*/React.createElement("div", Object.assign({
@@ -325,7 +325,7 @@ export default class TimePicker extends BaseComponent {
       margin: dropdownMargin,
       autoAdjustOverflow: autoAdjustOverflow,
       stopPropagation: stopPropagation
-    }, useCustomTrigger ? /*#__PURE__*/React.createElement(Trigger, {
+    }, this.useCustomTrigger ? /*#__PURE__*/React.createElement(Trigger, {
       triggerRender: triggerRender,
       disabled: disabled,
       value: value,

package/lib/es/tooltip/index.js

@@ -423,7 +423,10 @@ export default class Tooltip extends BaseComponent {
           let popupEl = this.containerEl && this.containerEl.current;
           el = ReactDOM.findDOMNode(el);
           popupEl = ReactDOM.findDOMNode(popupEl);
-          if (el && !el.contains(e.target) && popupEl && !popupEl.contains(e.target) || this.props.clickTriggerToHide && el && el.contains(e.target)) {
+          const target = e.target;
+          const path = e.composedPath && e.composedPath() || [target];
+          const isClickTriggerToHide = this.props.clickTriggerToHide ? el && el.contains(target) || path.includes(el) : false;
+          if (el && !el.contains(target) && popupEl && !popupEl.contains(target) && !(path.includes(popupEl) || path.includes(el)) || isClickTriggerToHide) {
             this.props.onClickOutSide(e);
             cb();
           }

package/lib/es/tree/treeNode.js

@@ -41,6 +41,7 @@ export default class TreeNode extends PureComponent {
       onNodeExpand(e, this.props);
     };
     this.onCheck = e => {
+      var _a, _b;
       if (this.isDisabled()) {
         return;
       }
@@ -48,7 +49,7 @@ export default class TreeNode extends PureComponent {
         onNodeCheck
       } = this.context;
       e.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
+      (_b = (_a = e.nativeEvent) === null || _a === void 0 ? void 0 : _a.stopImmediatePropagation) === null || _b === void 0 ? void 0 : _b.call(_a);
       onNodeCheck(e, this.props);
     };
     /**

package/lib/es/treeSelect/index.js

@@ -1105,7 +1105,8 @@ class TreeSelect extends BaseComponent {
           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)) {
+          const path = e.composedPath && e.composedPath() || [target];
+          if (optionsDom && (!optionsDom.contains(target) || !optionsDom.contains(target.parentNode)) && triggerDom && !triggerDom.contains(target) && !(path.includes(triggerDom) || path.includes(optionsDom))) {
             cb(e);
           }
         };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.55.4",
+    "version": "2.56.0-beta.0",
     "description": "A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -20,12 +20,12 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@douyinfe/semi-animation": "2.55.4",
-        "@douyinfe/semi-animation-react": "2.55.4",
-        "@douyinfe/semi-foundation": "2.55.4",
-        "@douyinfe/semi-icons": "2.55.4",
-        "@douyinfe/semi-illustrations": "2.55.4",
-        "@douyinfe/semi-theme-default": "2.55.4",
+        "@douyinfe/semi-animation": "2.56.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.56.0-beta.0",
+        "@douyinfe/semi-foundation": "2.56.0-beta.0",
+        "@douyinfe/semi-icons": "2.56.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.56.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.56.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -75,7 +75,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "b164af409e92b8165e4355e9d53e011224986f62",
+    "gitHead": "ae4502e3075a19370e9f4ed32fbfb1292acd06c2",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",