@douyinfe/semi-ui 2.24.0-beta.1 → 2.24.0

package/dist/umd/semi-ui.js

@@ -19312,23 +19312,26 @@ class foundation_Tooltip extends foundation {
 
 
       if (this.isTB(position)) {
-        isHeightOverFlow = isViewYOverFlow && isContainerYOverFlow;
+        isHeightOverFlow = isViewYOverFlow && isContainerYOverFlow; // Related PR: https://github.com/DouyinFE/semi-design/pull/1297
+        // If clientRight or restClientRight less than 0, means that the left and right parts of the trigger are blocked
+        // Then the display of the wrapper will also be affected, make width overflow to offset the wrapper
 
         if (position === 'top' || position === 'bottom') {
-          isWidthOverFlow = isViewXOverFlowSideHalf && isContainerXOverFlowSideHalf;
+          isWidthOverFlow = isViewXOverFlowSideHalf && isContainerXOverFlowSideHalf || clientRight < 0 || restClientRight < 0;
         } else {
-          isWidthOverFlow = isViewXOverFlowSide && isContainerXOverFlowSide;
+          isWidthOverFlow = isViewXOverFlowSide && isContainerXOverFlowSide || clientRight < 0 || restClientRight < 0;
         }
       } // 左右方向 left and right
 
 
       if (this.isLR(position)) {
-        isWidthOverFlow = isViewXOverFlow && isContainerXOverFlow;
+        isWidthOverFlow = isViewXOverFlow && isContainerXOverFlow; // If clientTop or restClientTop less than 0, means that the top and bottom parts of the trigger are blocked
+        // Then the display of the wrapper will also be affected, make height overflow to offset the wrapper
 
         if (position === 'left' || position === 'right') {
-          isHeightOverFlow = isViewYOverFlowSideHalf && isContainerYOverFlowSideHalf;
+          isHeightOverFlow = isViewYOverFlowSideHalf && isContainerYOverFlowSideHalf || clientTop < 0 || restClientTop < 0;
         } else {
-          isHeightOverFlow = isViewYOverFlowSide && isContainerYOverFlowSide;
+          isHeightOverFlow = isViewYOverFlowSide && isContainerYOverFlowSide || clientTop < 0 || restClientTop < 0;
         }
       }
     }
@@ -26863,6 +26866,8 @@ class foundation_InputFoundation extends foundation {
 
 
     if (this._adapter.isEventTarget(e)) {
+      this._adapter.focusInput();
+
       this._adapter.toggleFocusing(true);
     }
   }
@@ -26878,6 +26883,8 @@ class foundation_InputFoundation extends foundation {
   handleClickEye(e) {
     const eyeClosed = this._adapter.getState('eyeClosed');
 
+    this._adapter.focusInput();
+
     this._adapter.toggleFocusing(true);
 
     this._adapter.setEyeClosed(!eyeClosed);
@@ -26970,6 +26977,8 @@ class foundation_InputFoundation extends foundation {
     } = this._adapter.getStates();
 
     if (!disabled && !isFocus) {
+      this._adapter.focusInput();
+
       this._adapter.toggleFocusing(true);
     }
   }
@@ -27008,6 +27017,7 @@ var input_input = __webpack_require__("RHNq");
 
 
 
+
 var input_rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
 
@@ -27112,21 +27122,17 @@ class input_Input extends baseComponent_BaseComponent {
         eyeClosed: value
       }),
       toggleFocusing: isFocus => {
+        this.setState({
+          isFocus
+        });
+      },
+      focusInput: () => {
         const {
           preventScroll
         } = this.props;
         const input = this.inputRef && this.inputRef.current;
-
-        if (isFocus) {
-          input && input.focus({
-            preventScroll
-          });
-        } else {
-          input && input.blur();
-        }
-
-        this.setState({
-          isFocus
+        input && input.focus({
+          preventScroll
         });
       },
       toggleHovering: isHovering => this.setState({
@@ -27330,6 +27336,28 @@ class input_Input extends baseComponent_BaseComponent {
     );
   }
 
+  getInputRef() {
+    const {
+      forwardRef
+    } = this.props;
+
+    if (!isUndefined_default()(forwardRef)) {
+      if (typeof forwardRef === 'function') {
+        return node => {
+          forwardRef(node);
+          this.inputRef = {
+            current: node
+          };
+        };
+      } else if (Object.prototype.toString.call(forwardRef) === '[object Object]') {
+        this.inputRef = forwardRef;
+        return forwardRef;
+      }
+    }
+
+    return this.inputRef;
+  }
+
   render() {
     const _a = this.props,
           {
@@ -27369,7 +27397,7 @@ class input_Input extends baseComponent_BaseComponent {
     } = this.state;
     const suffixAllowClear = this.showClearBtn();
     const suffixIsIcon = Object(_utils["e" /* isSemiIcon */])(suffix);
-    const ref = forwardRef || this.inputRef;
+    const ref = this.getInputRef();
     const wrapperPrefix = "".concat(input_prefixCls, "-wrapper");
     const wrapperCls = classnames_default()(wrapperPrefix, className, {
       ["".concat(input_prefixCls, "-wrapper__with-prefix")]: prefix || insetLabel,
@@ -63263,7 +63291,9 @@ class foundation_InputNumberFoundation extends foundation {
   _preventDefault(event) {
     const keepFocus = this._adapter.getProp('keepFocus');
 
-    if (keepFocus) {
+    const innerButtons = this._adapter.getProp('innerButtons');
+
+    if (keepFocus || innerButtons) {
       event.preventDefault();
     }
   }
@@ -86934,7 +86964,6 @@ class TabBar_TabBar extends external_root_React_commonjs2_react_commonjs_react_a
     this.renderTabComponents = list => list.map(panel => this.renderTabItem(panel));
 
     this.handleArrowClick = (items, pos) => {
-      const inline = pos === 'start' ? 'end' : 'start';
       const lastItem = pos === 'start' ? items.pop() : items.shift();
 
       if (!lastItem) {
@@ -86948,7 +86977,7 @@ class TabBar_TabBar extends external_root_React_commonjs2_react_commonjs_react_a
       tabItem.scrollIntoView({
         behavior: 'smooth',
         block: 'nearest',
-        inline
+        inline: 'nearest'
       });
     };
 
@@ -93666,7 +93695,9 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
         maxTagCount,
         checkRelation,
         showRestTagsPopover,
-        restTagsPopoverProps
+        restTagsPopoverProps,
+        searchPosition,
+        filterTreeNode
       } = this.props;
       const {
         keyEntities,
@@ -93680,8 +93711,16 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
         keyList = normalizeKeyList(checkedKeys, keyEntities, leafOnly);
       } else if (checkRelation === 'unRelated') {
         keyList = [...realCheckedKeys];
-      }
+      } // auto focus search input divide into two parts
+      // 1. filterTreeNode && searchPosition === strings.SEARCH_POSITION_TRIGGER
+      //    Implemented by passing autofocus to the underlying input's autofocus
+      // 2. filterTreeNode && searchPosition === strings.SEARCH_POSITION_DROPDOWN
+      //    Due to the off-screen rendering in the tooltip implementation mechanism, if it is implemented through the 
+      //    autofocus of the input, when the option panel is opened, the page will scroll to top, so it is necessary 
+      //    to call the focus method through ref in the onVisibleChange callback of the Popover to achieve focus
+
 
+      const autoFocus = filterTreeNode && searchPosition === treeSelect_constants_strings.SEARCH_POSITION_TRIGGER ? searchAutoFocus : undefined;
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(tagInput_0, {
         maxTagCount: maxTagCount,
         disabled: disabled,
@@ -93694,7 +93733,7 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
         showRestTagsPopover: showRestTagsPopover,
         restTagsPopoverProps: restTagsPopoverProps,
         // eslint-disable-next-line jsx-a11y/no-autofocus
-        autoFocus: searchAutoFocus,
+        autoFocus: autoFocus,
         renderTagItem: (itemKey, index) => this.renderTagItem(itemKey, index),
         onRemove: itemKey => this.removeTag(itemKey),
         expandRestTagsOnClick: false
@@ -93730,6 +93769,7 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
         prefix: /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconSearch, null)
       };
       const inputTriggerProps = {
+        autofocus: searchAutoFocus,
         onFocus: e => this.foundation.handleInputTriggerFocus(),
         onBlur: e => this.foundation.handleInputTriggerBlur(),
         disabled
@@ -93761,7 +93801,6 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
         return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(input_0, Object.assign({
           "aria-label": 'Filter TreeSelect item',
           ref: this.inputRef,
-          autofocus: searchAutoFocus,
           placeholder: placeholder
         }, baseInputProps, realInputProps));
       }));
@@ -93835,12 +93874,18 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
 
     this.handlePopoverClose = isVisible => {
       const {
-        filterTreeNode
+        filterTreeNode,
+        searchAutoFocus,
+        searchPosition
       } = this.props;
 
       if (isVisible === false && Boolean(filterTreeNode)) {
         this.foundation.clearInput();
       }
+
+      if (filterTreeNode && searchPosition === treeSelect_constants_strings.SEARCH_POSITION_DROPDOWN && isVisible && searchAutoFocus) {
+        this.foundation.focusInput(true);
+      }
     };
 
     this.renderTreeNode = (treeNode, ind, style) => {
@@ -94304,7 +94349,25 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
           isHovering: bool
         });
       },
-      updateInputFocus: bool => {} // eslint-disable-line
+      updateInputFocus: bool => {
+        if (bool) {
+          if (this.inputRef && this.inputRef.current) {
+            this.inputRef.current.focus();
+          }
+
+          if (this.tagInputRef && this.tagInputRef.current) {
+            this.tagInputRef.current.focus();
+          }
+        } else {
+          if (this.inputRef && this.inputRef.current) {
+            this.inputRef.current.blur();
+          }
+
+          if (this.tagInputRef && this.tagInputRef.current) {
+            this.tagInputRef.current.blur();
+          }
+        }
+      } // eslint-disable-line
 
     });
   }
@@ -103108,7 +103171,7 @@ class preview_Preview extends baseComponent_BaseComponent {
     const finalSrcList = [...srcArr, ...srcListInChildren];
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(PreviewContext.Provider, {
       value: {
-        isGroup: finalSrcList.length > 1,
+        isGroup: true,
         previewSrc: finalSrcList,
         titles: titles,
         currentIndex,