@douyinfe/semi-ui 2.56.0-alpha.0 → 2.56.0

package/dist/umd/semi-ui.js

@@ -20518,7 +20518,10 @@ class Tooltip extends BaseComponent {
           let popupEl = this.containerEl && this.containerEl.current;
           el = external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default().findDOMNode(el);
           popupEl = external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_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();
           }
@@ -22960,9 +22963,32 @@ class Base extends external_root_React_commonjs2_react_commonjs_react_amd_react_
       if (!rows || rows < 1) {
         return false;
       }
-      const updateOverflow = rows <= 1 ? this.wrapperRef.current.scrollWidth > this.wrapperRef.current.offsetWidth : this.wrapperRef.current.scrollHeight > this.wrapperRef.current.offsetHeight;
+      const updateOverflow = rows <= 1 ? this.compareSingleRow() : this.wrapperRef.current.scrollHeight > this.wrapperRef.current.offsetHeight;
       return updateOverflow;
     };
+    /**
+     * 通过将 content 给到 Range 对象，借助 Range 的 getBoundingClientRect 拿到 content 的准确 width
+     * 不受 css ellipsis 与否的影响
+     * By giving the content to the Range object, get the exact width of the content with the help of Range's getBoundingClientRect
+     * Not affected by css ellipsis or not
+     * https://github.com/DouyinFE/semi-design/issues/1731
+     */
+    this.compareSingleRow = () => {
+      if (!(document && document.createRange)) {
+        return false;
+      }
+      const containerNode = this.wrapperRef.current;
+      const containerWidth = containerNode.getBoundingClientRect().width;
+      const childNodes = Array.from(containerNode.childNodes);
+      const range = document.createRange();
+      const contentWidth = childNodes.reduce((acc, node) => {
+        var _a;
+        range.selectNodeContents(node);
+        return acc + ((_a = range.getBoundingClientRect().width) !== null && _a !== void 0 ? _a : 0);
+      }, 0);
+      range.detach();
+      return contentWidth > containerWidth;
+    };
     this.showTooltip = () => {
       var _a, _b;
       const {
@@ -23069,14 +23095,15 @@ class Base extends external_root_React_commonjs2_react_commonjs_react_amd_react_
         expand: this.expandRef.current,
         copy: this.copyRef && this.copyRef.current
       };
-      const content = util(this.wrapperRef.current, rows,
       // Perform type conversion on children to prevent component crash due to non-string type of children
-      String(children), extraNode, ELLIPSIS_STR, suffix, pos);
+      // https://github.com/DouyinFE/semi-design/issues/2167
+      const realChildren = Array.isArray(children) ? children.join('') : String(children);
+      const content = util(this.wrapperRef.current, rows, realChildren, extraNode, ELLIPSIS_STR, suffix, pos);
       return new Promise(resolve => {
         this.setState({
           isOverflowed: false,
           ellipsisContent: content,
-          isTruncated: children !== content
+          isTruncated: realChildren !== content
         }, resolve);
       });
     });
@@ -26241,7 +26268,8 @@ class AutoComplete extends BaseComponent {
           const triggerDom = this.triggerRef && this.triggerRef.current;
           const optionsDom = external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_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);
           }
         };
@@ -28082,6 +28110,7 @@ function IconChevronUp_SvgComponent(props) {
 const IconChevronUp_IconComponent = convertIcon(IconChevronUp_SvgComponent, 'chevron_up');
 /* harmony default export */ const IconChevronUp = (IconChevronUp_IconComponent);
 ;// CONCATENATED MODULE: ./backtop/index.tsx
+
 var backtop_rest = undefined && undefined.__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];
@@ -28111,7 +28140,9 @@ class BackTop extends BaseComponent {
     this.foundation = new BackTopFoundation(this.adapter);
   }
   componentDidMount() {
+    var _a;
     this.foundation.init();
+    this.handler = throttle_default()(this.handleClick, (_a = this.props.duration) !== null && _a !== void 0 ? _a : BackTop.defaultProps.duration);
   }
   componentWillUnmount() {
     this.foundation.destroy();
@@ -28169,7 +28200,7 @@ class BackTop extends BaseComponent {
     external_root_React_commonjs2_react_commonjs_react_amd_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;
@@ -34012,7 +34043,9 @@ class monthCalendar extends BaseComponent {
         const clickOutsideHandler = e => {
           const cardInstance = this.cardRef && this.cardRef.get(key);
           const cardDom = external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_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();
           }
         };
@@ -36711,7 +36744,7 @@ class CascaderFoundation extends foundation {
     } else if (!isEmpty_default()(keyEntities)) {
       cacheValue = this._getCacheValue(keyEntities);
     }
-    const selectedValue = !this._isControlledComponent() ? cacheValue : value;
+    const selectedValue = !this._isControlledComponent() ? cacheValue : isUndefined_default()(value) ? [] : value;
     if (util_isValid(selectedValue)) {
       this.updateSelectedKey(selectedValue, keyEntities);
     } else {
@@ -36725,10 +36758,7 @@ class CascaderFoundation extends foundation {
     const {
       keyEntities
     } = this.getStates();
-    const {
-      multiple
-    } = this.getProps();
-    !multiple && this.updateSelectedKey(value, keyEntities);
+    this.updateSelectedKey(value, keyEntities);
   }
   /**
    * When single selection, the clear objects of
@@ -46700,7 +46730,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);
           }
         };
@@ -47575,7 +47606,8 @@ class Cascader extends BaseComponent {
           const triggerDom = this.triggerRef && this.triggerRef.current;
           const optionsDom = external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_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);
           }
         };
@@ -47745,9 +47777,9 @@ class Cascader extends BaseComponent {
       }, []);
       return formatKeys;
     };
-    const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
-    const needUpdateValue = needUpdate('value') || isEmpty_default()(prevProps) && defaultValue;
     if (multiple) {
+      const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
+      const needUpdateValue = needUpdate('value') || isEmpty_default()(prevProps) && defaultValue;
       // when value and treedata need updated
       if (needUpdateTreeData || needUpdateValue) {
         // update state.keyEntities
@@ -47795,8 +47827,11 @@ class Cascader extends BaseComponent {
     this.foundation.destroy();
   }
   componentDidUpdate(prevProps) {
+    if (this.props.multiple) {
+      return;
+    }
     let isOptionsChanged = false;
-    if (!isEqual_default()(prevProps.treeData, this.props.treeData) && !this.props.multiple) {
+    if (!isEqual_default()(prevProps.treeData, this.props.treeData)) {
       isOptionsChanged = true;
       this.foundation.collectOptions();
     }
@@ -60110,15 +60145,11 @@ 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);
             }
           }
@@ -70923,9 +70954,9 @@ class Select extends BaseComponent {
           const optionInstance = this.optionsRef && this.optionsRef.current;
           const triggerDom = this.triggerRef && this.triggerRef.current;
           const optionsDom = external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_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);
           }
         };
@@ -86589,6 +86620,7 @@ class TimePicker extends BaseComponent {
     this.foundation = new timePicker_foundation(this.adapter);
     this.timePickerRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createRef();
     this.savePanelRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createRef();
+    this.useCustomTrigger = typeof this.props.triggerRender === 'function';
   }
   get adapter() {
     var _this2 = this;
@@ -86604,11 +86636,11 @@ 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);
@@ -86772,7 +86804,6 @@ class TimePicker extends BaseComponent {
       rest = TimePicker_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,
@@ -86806,7 +86837,7 @@ class TimePicker extends BaseComponent {
       onBlur: this.handleBlur
     });
     const outerProps = {};
-    if (useCustomTrigger) {
+    if (this.useCustomTrigger) {
       outerProps.onClick = this.openPanel;
     }
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", Object.assign({
@@ -86829,7 +86860,7 @@ class TimePicker extends BaseComponent {
       margin: dropdownMargin,
       autoAdjustOverflow: autoAdjustOverflow,
       stopPropagation: stopPropagation
-    }, useCustomTrigger ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(trigger, {
+    }, this.useCustomTrigger ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(trigger, {
       triggerRender: triggerRender,
       disabled: disabled,
       value: value,
@@ -90389,7 +90420,6 @@ class TreeSelectFoundation extends foundation {
     } = this.getProps();
     const realFilterProp = treeNodeFilterProp !== 'label' ? treeNodeFilterProp : get_default()(keyMaps, 'label', 'label');
     const newExpandedKeys = new Set(expandedKeys);
-    let filteredNodes = [];
     let filteredOptsKeys = [];
     let expandedOptsKeys = [];
     let newFlattenNodes = [];
@@ -90399,21 +90429,19 @@ class TreeSelectFoundation extends foundation {
       expandedOptsKeys.forEach(item => newExpandedKeys.add(item));
       newFlattenNodes = flattenTreeData(treeData, newExpandedKeys, keyMaps);
     } else {
-      const filteredOpts = Object.values(keyEntities).filter(item => {
+      filteredOptsKeys = Object.values(keyEntities).filter(item => {
         const {
           data
         } = item;
         return filter(sugInput, data, filterTreeNode, realFilterProp);
-      });
-      filteredNodes = filteredOpts.map(item => item.data);
-      filteredOptsKeys = filteredOpts.map(item => item.key);
+      }).map(item => item.key);
       expandedOptsKeys = findAncestorKeys(filteredOptsKeys, keyEntities, false);
       const shownChildKeys = findDescendantKeys(filteredOptsKeys, keyEntities, true);
       filteredShownKeys = new Set([...shownChildKeys, ...expandedOptsKeys]);
       newFlattenNodes = flattenTreeData(treeData, new Set(expandedOptsKeys), keyMaps, showFilteredOnly && filteredShownKeys);
     }
     const newFilteredExpandedKeys = new Set(expandedOptsKeys);
-    this._adapter.notifySearch(sugInput, Array.from(newFilteredExpandedKeys), filteredNodes);
+    this._adapter.notifySearch(sugInput, Array.from(newFilteredExpandedKeys));
     this._adapter.updateState({
       expandedKeys: newExpandedKeys,
       flattenNodes: newFlattenNodes,
@@ -91809,7 +91837,8 @@ class TreeSelect extends BaseComponent {
           const triggerDom = this.triggerRef && this.triggerRef.current;
           const optionsDom = external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_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);
           }
         };
@@ -91837,8 +91866,8 @@ class TreeSelect extends BaseComponent {
       notifySelect: (selectKey, bool, node) => {
         this.props.onSelect && this.props.onSelect(selectKey, bool, node);
       },
-      notifySearch: (input, filteredExpandedKeys, filteredNodes) => {
-        this.props.onSearch && this.props.onSearch(input, filteredExpandedKeys, filteredNodes);
+      notifySearch: (input, filteredExpandedKeys) => {
+        this.props.onSearch && this.props.onSearch(input, filteredExpandedKeys);
       },
       cacheFlattenNodes: bool => {
         this.setState({