@douyinfe/semi-ui 2.23.0-beta.1 → 2.23.1

package/dist/umd/semi-ui.js

@@ -17967,6 +17967,10 @@ var isUndefined_default = /*#__PURE__*/__webpack_require__.n(isUndefined);
 var external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_ = __webpack_require__("faye");
 var external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default = /*#__PURE__*/__webpack_require__.n(external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_);
 
+// EXTERNAL MODULE: /home/runner/work/semi-design/semi-design/node_modules/lodash/isEqual.js
+var isEqual = __webpack_require__("nnRT");
+var isEqual_default = /*#__PURE__*/__webpack_require__.n(isEqual);
+
 // EXTERNAL MODULE: /home/runner/work/semi-design/semi-design/node_modules/lodash/isFunction.js
 var isFunction = __webpack_require__("2q8g");
 var isFunction_default = /*#__PURE__*/__webpack_require__.n(isFunction);
@@ -18219,6 +18223,14 @@ class foundation_Tooltip extends foundation {
       const content = this.getProp('content');
       const trigger = this.getProp('trigger');
       const clickTriggerToHide = this.getProp('clickTriggerToHide');
+      const {
+        visible
+      } = this.getStates();
+
+      if (visible) {
+        return;
+      }
+
       this.clearDelayTimer();
       /**
        * If you emit an event in setState callback, you need to place the event listener function before setState to execute.
@@ -18235,7 +18247,7 @@ class foundation_Tooltip extends foundation {
       });
 
       this._adapter.insertPortal(content, {
-        left: -9990,
+        left: -9999,
         top: -9999
       }); // offscreen rendering
 
@@ -19764,10 +19776,6 @@ const TriangleArrowVertical = props => {
   width: prop_types_default.a.number,
   height: prop_types_default.a.number
 }));
-// EXTERNAL MODULE: /home/runner/work/semi-design/semi-design/node_modules/lodash/isEqual.js
-var isEqual = __webpack_require__("nnRT");
-var isEqual_default = /*#__PURE__*/__webpack_require__.n(isEqual);
-
 // CONCATENATED MODULE: ./_cssAnimation/index.tsx
 
 
@@ -19906,6 +19914,7 @@ _cssAnimation_CSSAnimation.defaultProps = {
 
 
 
+
 var tooltip_rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
 
@@ -20173,6 +20182,10 @@ class tooltip_Tooltip extends baseComponent_BaseComponent {
       return mergedEvents;
     };
 
+    this.getPopupId = () => {
+      return this.state.id;
+    };
+
     this.state = {
       visible: false,
 
@@ -20485,7 +20498,7 @@ class tooltip_Tooltip extends baseComponent_BaseComponent {
       this.props.visible ? this.foundation.delayShow() : this.foundation.delayHide();
     }
 
-    if (prevProps.rePosKey !== this.props.rePosKey) {
+    if (!isEqual_default()(prevProps.rePosKey, this.props.rePosKey)) {
       this.rePosition();
     }
   }
@@ -43505,8 +43518,8 @@ function sortableElement(WrappedComponent) {
 
 
 
-const tagInput_SortableItem = sortableElement(props => props.item);
-const tagInput_SortableList = sortableContainer(_ref => {
+const SortableItem = sortableElement(props => props.item);
+const SortableList = sortableContainer(_ref => {
   let {
     items
   } = _ref;
@@ -43518,7 +43531,7 @@ const tagInput_SortableList = sortableContainer(_ref => {
   }, items.map((item, index) =>
   /*#__PURE__*/
   // @ts-ignore skip SortableItem type check
-  external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(tagInput_SortableItem, {
+  external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(SortableItem, {
     key: item.key,
     index: index,
     item: item.item
@@ -43907,9 +43920,11 @@ class tagInput_TagInput extends baseComponent_BaseComponent {
     }));
 
     if (active && draggable && sortableListItems.length > 0) {
+      // helperClass：add styles to the helper(item being dragged) https://github.com/clauderic/react-sortable-hoc/issues/87
       // @ts-ignore skip SortableItem type check
-      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(tagInput_SortableList, {
+      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(SortableList, {
         useDragHandle: true,
+        helperClass: "".concat(tagInput_prefixCls, "-drag-item-move"),
         items: sortableListItems,
         onSortEnd: this.onSortEnd,
         axis: "xy"
@@ -56836,7 +56851,6 @@ class yearAndMonth_YearAndMonth extends baseComponent_BaseComponent {
       disabledDate,
       yearAndMonthOpts
     } = this.props;
-    console.log('yearAndMonthOpts', yearAndMonthOpts);
 
     let transform = val => val;
 
@@ -59048,10 +59062,6 @@ class modalFoundation_ModalFoundation extends foundation {
     this.toggleDisplayNone = (displayNone, callback) => {
       this._adapter.toggleDisplayNone(displayNone, callback);
     };
-
-    this.setShouldRender = shouldRender => {
-      this._adapter.setShouldRender(shouldRender);
-    };
   }
 
   destroy() {
@@ -60014,8 +60024,6 @@ class Modal_Modal extends baseComponent_BaseComponent {
         visible
       } = this.props;
       this.foundation.toggleDisplayNone(!visible);
-      const shouldRender = this.props.visible || this.props.keepDOM && (!this.props.lazyRender || this._haveRendered);
-      this.foundation.setShouldRender(shouldRender);
     };
 
     this.renderFooter = () => {
@@ -60097,8 +60105,11 @@ class Modal_Modal extends baseComponent_BaseComponent {
       const classList = classnames_default()(className, {
         ["".concat(modal_constants_cssClasses.DIALOG, "-displayNone")]: keepDOM && this.state.displayNone
       });
+      const shouldRender = this.props.visible || this.props.keepDOM && (!this.props.lazyRender || this._haveRendered) || this.props.motion && !this.state.displayNone
+      /* When there is animation, we use displayNone to judge whether animation is ended and judge whether to unmount content */
+      ;
 
-      if (this.state.shouldRender) {
+      if (shouldRender) {
         this._haveRendered = true;
       }
 
@@ -60129,7 +60140,7 @@ class Modal_Modal extends baseComponent_BaseComponent {
             animationClassName: maskAnimationClassName,
             animationEventsNeedBind: maskAnimationEventsNeedBind
           } = _ref2;
-          return this.state.shouldRender ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(ModalContent_ModalContent, Object.assign({}, restProps, {
+          return shouldRender ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(ModalContent_ModalContent, Object.assign({}, restProps, {
             contentExtraProps: animationEventsNeedBind,
             maskExtraProps: maskAnimationEventsNeedBind,
             isFullScreen: this.state.isFullScreen,
@@ -60149,8 +60160,7 @@ class Modal_Modal extends baseComponent_BaseComponent {
 
     this.state = {
       displayNone: !props.visible,
-      isFullScreen: props.fullScreen,
-      shouldRender: this.props.visible || this.props.keepDOM && !this.props.lazyRender
+      isFullScreen: props.fullScreen
     };
     this.foundation = new modalFoundation_ModalFoundation(this.adapter);
     this.modalRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
@@ -60205,13 +60215,6 @@ class Modal_Modal extends baseComponent_BaseComponent {
             isFullScreen
           });
         }
-      },
-      setShouldRender: shouldRender => {
-        if (shouldRender !== this.state.shouldRender) {
-          this.setState({
-            shouldRender
-          });
-        }
       }
     });
   }
@@ -60257,12 +60260,6 @@ class Modal_Modal extends baseComponent_BaseComponent {
       this.foundation.beforeShow();
     }
 
-    const shouldRender = this.props.visible || this.props.keepDOM && (!this.props.lazyRender || this._haveRendered);
-
-    if (shouldRender === true && this.state.shouldRender === false) {
-      this.foundation.setShouldRender(true);
-    }
-
     if (!prevState.displayNone && this.state.displayNone) {
       this.foundation.afterHide();
     }
@@ -60412,26 +60409,39 @@ class foundation_DropdownFoundation extends foundation {
     this._adapter.setPopVisible(visible);
 
     this._adapter.notifyVisibleChange(visible);
+
+    const {
+      trigger
+    } = this.getProps();
+
+    if (visible && trigger === "click") {
+      const popupId = this._adapter.getPopupId();
+
+      this.setFocusToFirstMenuItem(popupId);
+    }
   }
 
-  getMenuItemNodes(target) {
-    const id = target.attributes['data-popupid'].value;
+  getMenuItemNodes(id) {
     const menuWrapper = document.getElementById(id); // if has dropdown item, the item must wrapped by li
 
     return menuWrapper ? Array.from(menuWrapper.getElementsByTagName('li')).filter(item => item.ariaDisabled === "false") : null;
   }
 
-  setFocusToFirstMenuItem(target) {
-    const menuItemNodes = this.getMenuItemNodes(target);
+  setFocusToFirstMenuItem(id) {
+    const menuItemNodes = this.getMenuItemNodes(id);
     menuItemNodes && setFocusToFirstItem(menuItemNodes);
   }
 
-  setFocusToLastMenuItem(target) {
-    const menuItemNodes = this.getMenuItemNodes(target);
+  setFocusToLastMenuItem(id) {
+    const menuItemNodes = this.getMenuItemNodes(id);
     menuItemNodes && setFocusToLastItem(menuItemNodes);
   }
 
   handleKeyDown(event) {
+    var _a, _b;
+
+    const id = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.attributes['data-popupid']) === null || _b === void 0 ? void 0 : _b.value;
+
     switch (event.key) {
       case ' ':
       case 'Enter':
@@ -60441,12 +60451,12 @@ class foundation_DropdownFoundation extends foundation {
         break;
 
       case 'ArrowDown':
-        this.setFocusToFirstMenuItem(event.target);
+        this.setFocusToFirstMenuItem(id);
         handlePrevent(event);
         break;
 
       case 'ArrowUp':
-        this.setFocusToLastMenuItem(event.target);
+        this.setFocusToLastMenuItem(id);
         handlePrevent(event);
         break;
 
@@ -60464,17 +60474,6 @@ class menuFoundation_DropdownMenuFoundation extends foundation {
     super(...arguments);
     this.menuItemNodes = null;
     this.firstChars = [];
-  } // if trigger is click, auto focus to the first menu item
-
-
-  autoFocus(ulElement) {
-    const trigger = this._adapter.getContext('trigger');
-
-    if (trigger === 'click') {
-      // find all non-disabled li under this menu and set focus to the first menu
-      this.menuItemNodes = [...ulElement.getElementsByTagName('li')].filter(item => item.ariaDisabled !== "true");
-      setFocusToFirstItem(this.menuItemNodes);
-    }
   }
 
   handleEscape(menu) {
@@ -60576,7 +60575,6 @@ const dropdownMenu_prefixCls = dropdown_constants_cssClasses.PREFIX;
 class dropdownMenu_DropdownMenu extends baseComponent_BaseComponent {
   constructor(props) {
     super(props);
-    this.menuRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
     this.foundation = new menuFoundation_DropdownMenuFoundation(this.adapter);
   }
 
@@ -60584,10 +60582,6 @@ class dropdownMenu_DropdownMenu extends baseComponent_BaseComponent {
     return Object.assign({}, super.adapter);
   }
 
-  componentDidMount() {
-    this.foundation.autoFocus(this.menuRef.current);
-  }
-
   render() {
     const _a = this.props,
           {
@@ -60599,8 +60593,7 @@ class dropdownMenu_DropdownMenu extends baseComponent_BaseComponent {
 
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("ul", Object.assign({
       role: "menu",
-      "aria-orientation": "vertical",
-      ref: this.menuRef
+      "aria-orientation": "vertical"
     }, rest, {
       className: classnames_default()("".concat(dropdownMenu_prefixCls, "-menu"), className),
       style: style,
@@ -60833,6 +60826,7 @@ class dropdown_Dropdown extends baseComponent_BaseComponent {
       popVisible: props.visible
     };
     this.foundation = new foundation_DropdownFoundation(this.adapter);
+    this.tooltipRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
   }
 
   get adapter() {
@@ -60840,7 +60834,8 @@ class dropdown_Dropdown extends baseComponent_BaseComponent {
       setPopVisible: popVisible => this.setState({
         popVisible
       }),
-      notifyVisibleChange: visible => this.props.onVisibleChange(visible)
+      notifyVisibleChange: visible => this.props.onVisibleChange(visible),
+      getPopupId: () => this.tooltipRef.current.getPopupId()
     });
   }
 
@@ -60997,7 +60992,8 @@ class dropdown_Dropdown extends baseComponent_BaseComponent {
       trigger: trigger,
       onVisibleChange: this.handleVisibleChange,
       showArrow: false,
-      returnFocusOnClose: true
+      returnFocusOnClose: true,
+      ref: this.tooltipRef
     }, attr), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.isValidElement(children) ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.cloneElement(children, {
       //@ts-ignore
       className: classnames_default()(get_default()(children, 'props.className'), {
@@ -72120,7 +72116,7 @@ class select_Select extends baseComponent_BaseComponent {
     } // Add isOptionChanged: There may be cases where the value is unchanged, but the optionList is updated. At this time, the label corresponding to the value may change, and the selected item needs to be updated
 
 
-    if (prevProps.value !== this.props.value || isOptionsChanged) {
+    if (!isEqual_default()(this.props.value, prevProps.value) || isOptionsChanged) {
       if ('value' in this.props) {
         this.foundation.handleValueChange(this.props.value);
       } else {
@@ -76237,10 +76233,6 @@ class sideSheetFoundation_SideSheetFoundation extends foundation {
     }
   }
 
-  setShouldRender(shouldRender) {
-    this._adapter.setShouldRender(shouldRender);
-  }
-
   onVisibleChange(visible) {
     this._adapter.notifyVisibleChange(visible);
   }
@@ -76292,14 +76284,11 @@ class sideSheet_SideSheet extends baseComponent_BaseComponent {
     };
 
     this.updateState = () => {
-      const shouldRender = this.props.visible || this.props.keepDOM;
-      this.foundation.setShouldRender(shouldRender);
       this.foundation.toggleDisplayNone(!this.props.visible);
     };
 
     this.state = {
-      displayNone: !this.props.visible,
-      shouldRender: this.props.visible
+      displayNone: !this.props.visible
     };
     this.foundation = new sideSheetFoundation_SideSheetFoundation(this.adapter);
   }
@@ -76346,13 +76335,6 @@ class sideSheet_SideSheet extends baseComponent_BaseComponent {
             displayNone: displayNone
           });
         }
-      },
-      setShouldRender: shouldRender => {
-        if (shouldRender !== this.state.shouldRender) {
-          this.setState({
-            shouldRender
-          });
-        }
       }
     });
   }
@@ -76388,12 +76370,6 @@ class sideSheet_SideSheet extends baseComponent_BaseComponent {
       this.foundation.afterHide();
     }
 
-    const shouldRender = this.props.visible || this.props.keepDOM;
-
-    if (shouldRender === true && this.state.shouldRender === false) {
-      this.foundation.setShouldRender(true);
-    }
-
     if (prevState.displayNone !== this.state.displayNone) {
       this.foundation.onVisibleChange(!this.state.displayNone);
     }
@@ -76445,7 +76421,10 @@ class sideSheet_SideSheet extends baseComponent_BaseComponent {
       width: sheetWidth,
       height: sheetHeight,
       onClose: this.handleCancel
-    }); // Since user could change animate duration , we don't know which animation end first. So we call updateState func twice.
+    });
+    const shouldRender = this.props.visible || this.props.keepDOM || this.props.motion && !this.state.displayNone
+    /* When there is animation, we use displayNone to judge whether animation is ended and judge whether to unmount content */
+    ; // Since user could change animate duration , we don't know which animation end first. So we call updateState func twice.
 
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(_cssAnimation, {
       motion: this.props.motion,
@@ -76470,7 +76449,7 @@ class sideSheet_SideSheet extends baseComponent_BaseComponent {
           animationStyle,
           animationEventsNeedBind
         } = _ref2;
-        return this.state.shouldRender ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(SideSheetContent_SideSheetContent, Object.assign({}, contentProps, {
+        return shouldRender ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(SideSheetContent_SideSheetContent, Object.assign({}, contentProps, {
           maskExtraProps: maskAnimationEventsNeedBind,
           wrapperExtraProps: animationEventsNeedBind,
           dialogClassName: animationClassName,
@@ -97232,7 +97211,30 @@ var transfer = __webpack_require__("mo0a");
 
 
 
-const transfer_prefixcls = transfer_constants_cssClasses.PREFIX;
+const transfer_prefixcls = transfer_constants_cssClasses.PREFIX; // SortableItem & SortableList should not be assigned inside of the render function
+
+const transfer_SortableItem = sortableElement(props => props.item.node);
+const transfer_SortableList = sortableContainer(_ref => {
+  let {
+    items
+  } = _ref;
+  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+    className: "".concat(transfer_prefixcls, "-right-list"),
+    role: "list",
+    "aria-label": "Selected list"
+  }, items.map((item, index) =>
+  /*#__PURE__*/
+  // @ts-ignore skip SortableItem type check
+  external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(transfer_SortableItem, {
+    key: item.label,
+    index: index,
+    item: item
+  }))) // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore see reasons: https://github.com/clauderic/react-sortable-hoc/issues/206
+  ;
+}, {
+  distance: 10
+});
 
 class transfer_Transfer extends baseComponent_BaseComponent {
   constructor(props) {
@@ -97675,34 +97677,16 @@ class transfer_Transfer extends baseComponent_BaseComponent {
   }
 
   renderRightSortableList(selectedData) {
-    // when choose some items && draggable is true
-    const SortableItem = sortableElement(props => this.renderRightItem(props.item));
-    const SortableList = sortableContainer(_ref => {
-      let {
-        items
-      } = _ref;
-      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-        className: "".concat(transfer_prefixcls, "-right-list"),
-        role: "list",
-        "aria-label": "Selected list"
-      }, items.map((item, index) =>
-      /*#__PURE__*/
-      // @ts-ignore skip SortableItem type check
-      external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(SortableItem, {
-        key: item.label,
-        index: index,
-        item: item
-      }))) // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore see reasons: https://github.com/clauderic/react-sortable-hoc/issues/206
-      ;
-    }, {
-      distance: 10
-    }); // @ts-ignore skip SortableItem type check
+    const sortableListItems = selectedData.map(item => Object.assign(Object.assign({}, item), {
+      node: this.renderRightItem(item)
+    })); // helperClass：add styles to the helper(item being dragged) https://github.com/clauderic/react-sortable-hoc/issues/87
+    // @ts-ignore skip SortableItem type check
 
-    const sortList = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(SortableList, {
+    const sortList = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(transfer_SortableList, {
       useDragHandle: true,
+      helperClass: "".concat(transfer_prefixcls, "-right-item-drag-item-move"),
       onSortEnd: this.onSortEnd,
-      items: selectedData
+      items: sortableListItems
     });
     return sortList;
   }