@nutui/nutui-react 1.2.2 → 1.2.3-beta.2

package/dist/esm/Address.js

@@ -1,9 +1,10 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "type", "existAddress", "selectedIcon", "defaultIcon", "isShowCustomAddress", "customAndExistTitle", "onSelected", "onClose", "onSwitchModule"],
-    _excluded2 = ["children", "type", "height", "province", "city", "country", "town", "onNextArea", "onTabClick", "onClose"],
-    _excluded3 = ["modelValue", "children", "type", "height", "customAddressTitle", "existAddress", "existAddressTitle", "province", "city", "country", "town", "isShowCustomAddress", "customAndExistTitle", "selectedIcon", "defaultIcon", "closeBtnIcon", "backBtnIcon", "onChange", "onSelected", "onClose", "closeMask", "switchModule", "onTabChecked", "style", "className"];
+    _excluded2 = ["children", "type", "modelValue", "height", "province", "city", "country", "town", "onNextArea", "onTabClick", "onClose"],
+    _excluded3 = ["modelValue", "modelSelect", "children", "type", "height", "customAddressTitle", "existAddress", "existAddressTitle", "province", "city", "country", "town", "isShowCustomAddress", "customAndExistTitle", "selectedIcon", "defaultIcon", "closeBtnIcon", "backBtnIcon", "onChange", "onSelected", "onClose", "closeMask", "switchModule", "onTabChecked", "style", "className"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -82,7 +83,8 @@ var ExistRender = function ExistRender(props) {
   }, existAddress.map(function (item, index) {
     return React__default.createElement("li", {
       className: b('exist-item'),
-      key: index,
+      key: index
+    }, React__default.createElement("div", {
       onClick: function onClick() {
         return selectedExist(item);
       }
@@ -101,7 +103,7 @@ var ExistRender = function ExistRender(props) {
       className: "exist-item-info-phone"
     }, item.phone)), React__default.createElement("div", {
       className: "exist-item-info-bottom"
-    }, React__default.createElement("div", null, item.provinceName + item.cityName + item.countyName + item.townName + item.addressDetail))));
+    }, React__default.createElement("div", null, item.provinceName + item.cityName + item.countyName + item.townName + item.addressDetail)))));
   }))), isShowCustomAddress && React__default.createElement("div", {
     className: b('choose-other'),
     onClick: switchModule
@@ -111,6 +113,7 @@ var ExistRender = function ExistRender(props) {
 };
 
 var defaultProps$1 = {
+  modelValue: [],
   type: 'custom',
   province: [],
   city: [],
@@ -126,6 +129,7 @@ var CustomRender = function CustomRender(props) {
   var _defaultProps$1$props = _objectSpread(_objectSpread({}, defaultProps$1), props),
       children = _defaultProps$1$props.children,
       type = _defaultProps$1$props.type,
+      modelValue = _defaultProps$1$props.modelValue,
       height = _defaultProps$1$props.height,
       province = _defaultProps$1$props.province,
       city = _defaultProps$1$props.city,
@@ -261,21 +265,18 @@ var CustomRender = function CustomRender(props) {
     var calBack = {
       next: '',
       value: '',
-      custom: tabName[tabIndex],
-      selectedRegion: {}
+      custom: tabName[tabIndex]
     };
-    setSelectedRegion(_objectSpread(_objectSpread({}, selectedRegion), {}, _defineProperty({}, tabName[tabIndex], item)));
-    calBack.selectedRegion = _objectSpread(_objectSpread({}, selectedRegion), {}, _defineProperty({}, tabName[tabIndex], item));
+    var bbselectedRegion = selectedRegion ? _objectSpread({}, selectedRegion) : null;
 
-    var _loop = function _loop(i) {
-      setSelectedRegion(function () {
-        return _objectSpread(_objectSpread({}, selectedRegion), {}, _defineProperty({}, tabName[i + 1], {}));
-      });
-      calBack.selectedRegion = _objectSpread(_objectSpread({}, selectedRegion), {}, _defineProperty({}, tabName[i + 1], {}));
-    };
+    if (bbselectedRegion) {
+      setSelectedRegion(_objectSpread(_objectSpread({}, bbselectedRegion), {}, _defineProperty({}, tabName[tabIndex], item)));
+      calBack.selectedRegion = _objectSpread(_objectSpread({}, bbselectedRegion), {}, _defineProperty({}, tabName[tabIndex], item));
 
-    for (var i = tabIndex; i < tabIndex - 1; i++) {
-      _loop(i);
+      for (var i = tabIndex; i < tabIndex - 1; i++) {
+        setSelectedRegion(_objectSpread(_objectSpread({}, bbselectedRegion), {}, _defineProperty({}, tabName[i + 1], null)));
+        calBack.selectedRegion = _objectSpread(_objectSpread({}, bbselectedRegion), {}, _defineProperty({}, tabName[i + 1], {}));
+      }
     }
 
     if (tabIndex < 4) {
@@ -305,6 +306,47 @@ var CustomRender = function CustomRender(props) {
     }
 
     onTabClick && onTabClick(key);
+  }; // 默认选中项
+
+
+  var initCustomSelected = function initCustomSelected() {
+    if (modelValue.length > 0) {
+      var tagIndex = 0;
+      var selectedRegionC = selectedRegion && Object.assign(selectedRegion);
+
+      for (var index = 0; index < modelValue.length; index++) {
+        if (regionList[tabName[index]].length === 0) {
+          tagIndex = index - 1;
+          setTabIndex(index - 1);
+          break;
+        } else {
+          (function () {
+            var val = modelValue[index];
+            var arr = regionList[tabName[index]];
+
+            if (privateType === 'custom') {
+              selectedRegionC[[tabName[index]]] = arr.filter(function (item) {
+                return item.id === val;
+              })[0];
+            } else if (privateType === 'custom2') {
+              var sumArr = [];
+              arr.forEach(function (item) {
+                sumArr.push.apply(sumArr, _toConsumableArray(item.list));
+              });
+              selectedRegionC[[tabName[index]]] = sumArr.filter(function (item) {
+                return item.id === val;
+              })[0];
+            }
+
+            tagIndex = index;
+            setSelectedRegion(selectedRegionC);
+          })();
+        }
+      }
+
+      setTabIndex(tagIndex);
+      lineAnimation(tagIndex);
+    }
   };
 
   var handleElevatorItem = function handleElevatorItem(key, item) {
@@ -343,11 +385,14 @@ var CustomRender = function CustomRender(props) {
       town: isCustom2() ? transformData(town) : town
     }));
   }, [town]);
+  useEffect(function () {
+    initCustomSelected();
+  }, [modelValue]);
   return React__default.createElement("div", {
     className: b('custom')
   }, React__default.createElement("div", {
     className: b('region-tab')
-  }, Object.keys(selectedRegion).map(function (key, index) {
+  }, selectedRegion && Object.keys(selectedRegion).map(function (key, index) {
     return React__default.createElement("div", {
       className: "".concat(b('tab-item'), " ").concat(index === tabIndex ? 'active' : ''),
       key: index,
@@ -369,16 +414,17 @@ var CustomRender = function CustomRender(props) {
   }, regionList[tabName[tabIndex]].map(function (item, index) {
     return React__default.createElement("li", {
       key: index,
-      className: b('region-item'),
-      onClick: function onClick(e) {
-        return nextAreaList(item);
+      className: b('region-item')
+    }, React__default.createElement("div", {
+      onClick: function onClick() {
+        nextAreaList(item);
       }
-    }, selectedRegion[tabName[tabIndex]].id === item.id && React__default.createElement(Icon, {
+    }, selectedRegion && selectedRegion[tabName[tabIndex]].id === item.id && React__default.createElement(Icon, {
       className: b('region-item--icon'),
       name: "Check",
       color: "#FA2C19",
       size: "13px"
-    }), item.name);
+    }), item.name));
   }))), privateType === 'custom2' && React__default.createElement("div", {
     className: b('elevator-group')
   }, React__default.createElement(Elevator, {
@@ -390,6 +436,7 @@ var CustomRender = function CustomRender(props) {
 
 var defaultProps = {
   modelValue: false,
+  modelSelect: [],
   type: 'custom',
   customAddressTitle: '请选择所在地区',
   province: [],
@@ -413,6 +460,7 @@ var Address = function Address(props) {
 
   var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
       modelValue = _defaultProps$props.modelValue,
+      modelSelect = _defaultProps$props.modelSelect,
       children = _defaultProps$props.children,
       type = _defaultProps$props.type,
       height = _defaultProps$props.height,
@@ -498,8 +546,7 @@ var Address = function Address(props) {
     var callbackParams = {
       next: item.next,
       value: item.value,
-      custom: item.custom,
-      selectedRegion: {}
+      custom: item.custom
     };
     setSelectedRegion(_objectSpread({}, item.selectedRegion));
     onChange && onChange(callbackParams);
@@ -507,7 +554,6 @@ var Address = function Address(props) {
 
 
   var selectedExist = function selectedExist(prevExistAdd, item, copyExistAdd) {
-    console.log(prevExistAdd, item, copyExistAdd);
     setSelectedExistAddress(item);
     onSelected && onSelected(prevExistAdd, item, copyExistAdd);
     handClose();
@@ -518,8 +564,6 @@ var Address = function Address(props) {
     for (var i = 0; i < tabName.length; i++) {
       setSelectedRegion(_objectSpread(_objectSpread({}, selectedRegion), {}, _defineProperty({}, tabName[i], {})));
     }
-
-    console.log(selectedRegion);
   }; // 关闭
 
 
@@ -530,7 +574,10 @@ var Address = function Address(props) {
     }, selectedRegion);
 
     var res = {
-      data: {},
+      data: _objectSpread({
+        addressIdStr: '',
+        addressStr: ''
+      }, selectedRegion),
       type: privateType
     };
 
@@ -605,6 +652,7 @@ var Address = function Address(props) {
     className: "".concat(b(), " ").concat(className || ''),
     style: _objectSpread({}, style)
   }, rest), headerRender(), (privateType === 'custom' || privateType === 'custom2') && React__default.createElement(CustomRender, {
+    modelValue: modelSelect,
     type: privateType,
     province: province,
     city: city,

package/dist/esm/Badge.js

@@ -27,8 +27,8 @@ var Badge = function Badge(props) {
       color = _defaultProps$props.color,
       icons = _defaultProps$props.icons;
 
-  var content = function content() {
-    if (dot) return;
+  function content() {
+    if (dot) return undefined;
     var value = props.value;
     var max = props.max;
 
@@ -37,7 +37,7 @@ var Badge = function Badge(props) {
     }
 
     return value;
-  };
+  }
 
   var getStyle = function getStyle() {
     var style = {};
@@ -50,7 +50,7 @@ var Badge = function Badge(props) {
 
   return React__default.createElement("div", {
     className: "nut-badge"
-  }, icons != '' && React__default.createElement("div", {
+  }, icons !== '' && React__default.createElement("div", {
     className: "slot-icons"
   }, React__default.createElement(Icon, {
     className: "_icon",

package/dist/esm/Col.js

@@ -17,7 +17,8 @@ var Col = function Col(props) {
   var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
       span = _defaultProps$props.span,
       offset = _defaultProps$props.offset,
-      children = _defaultProps$props.children;
+      children = _defaultProps$props.children,
+      _onClick = _defaultProps$props.onClick;
 
   var _useState = useState(''),
       _useState2 = _slicedToArray(_useState, 2),
@@ -52,7 +53,10 @@ var Col = function Col(props) {
   }, [span, offset, gutter]);
   return React__default.createElement("div", {
     className: "".concat(colName),
-    style: _objectSpread({}, colStyle)
+    style: _objectSpread({}, colStyle),
+    onClick: function onClick(e) {
+      _onClick && _onClick(e, 'col');
+    }
   }, children);
 };
 

package/dist/esm/Collapse.js

@@ -77,6 +77,7 @@ var Collapse = memo(function (props) {
       newOpenIndex.splice(removeIndex, 1);
     } else {
       // 当前状态为false，变为true，展开
+      // eslint-disable-next-line no-lonely-if
       if (accordion) {
         newOpenIndex = [name];
       } else {

package/dist/esm/CollapseItem.js

@@ -79,21 +79,22 @@ var CollapseItem = function CollapseItem(props) {
     if (node !== null) {
       setDomHeight(node.getBoundingClientRect().height);
     }
-  }, [children, update]);
+  }, [update]);
   useEffect(function () {
-    // setCurrHeight('auto')
     // 一开始content都有高度，在这里根据isOpen，改变其高度
-    if (domHeight !== -1) {
-      isOpen ? setCurrHeight("".concat(domHeight, "px")) : setCurrHeight('0px');
-    }
+    setTimeout(function () {
+      if (domHeight !== -1) {
+        isOpen ? setCurrHeight("".concat(domHeight, "px")) : setCurrHeight('0px');
+      }
 
-    var newIconStyle = isOpen ? {
-      transform: "translateY(-50%) rotate(".concat(rotate, "deg)")
-    } : {
-      transform: 'translateY(-50%)'
-    };
-    setIconStyle(newIconStyle);
-  }, [isOpen, domHeight]);
+      var newIconStyle = isOpen ? {
+        transform: "translateY(-50%) rotate(".concat(rotate, "deg)")
+      } : {
+        transform: 'translateY(-50%)'
+      };
+      setIconStyle(newIconStyle);
+    }, 10);
+  }, [isOpen, domHeight, rotate]);
   return React__default.createElement("div", _objectSpread({
     className: colBem()
   }, rest), React__default.createElement("div", {
@@ -106,13 +107,13 @@ var CollapseItem = function CollapseItem(props) {
     }
   }, React__default.createElement("div", {
     className: colBem('title')
-  }, titleIcon && titleIconPosition == 'left' && React__default.createElement("b", {
+  }, titleIcon && titleIconPosition === 'left' && React__default.createElement("b", {
     className: colBem('title-icon-left')
   }, React__default.createElement(Icon, {
     name: titleIcon,
     size: titleIconSize,
     color: disabled ? '#C2C2C2' : titleIconColor
-  })), title, titleIcon && titleIconPosition == 'right' && React__default.createElement("b", {
+  })), title, titleIcon && titleIconPosition === 'right' && React__default.createElement("b", {
     className: colBem('title-icon-right')
   }, React__default.createElement(Icon, {
     name: titleIcon,

package/dist/esm/Empty.js

@@ -80,14 +80,14 @@ var Empty = function Empty(props) {
   }, [imageSize]);
   return React__default.createElement("div", _objectSpread({
     className: "".concat(b(), " ").concat(className)
-  }, rest), React__default.createElement("div", {
+  }, rest), React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: b('image'),
     style: imgStyle
   }, imageNode), typeof description === 'string' ? React__default.createElement("div", {
     className: b('description')
   }, description) : {
     description: description
-  }, children);
+  }, children));
 };
 
 Empty.defaultProps = defaultProps;

package/dist/esm/FixedNav.js

@@ -15,8 +15,8 @@ import { useConfig } from './ConfigProvider.js';
 import '@bem-react/classname';
 var defaultProps = {
   fixednavClass: 'nut-fixednav',
-  activeText: '收起导航',
-  unActiveText: '快速导航',
+  activeText: '',
+  unActiveText: '',
   type: 'right',
   position: {
     top: 'auto',
@@ -102,7 +102,7 @@ var FixedNav = function FixedNav(props) {
     color: "#fff"
   }), React__default.createElement("div", {
     className: "text"
-  }, visible ? locale.fixednav.activeText || activeText : locale.fixednav.unActiveText || unActiveText))));
+  }, visible ? activeText || locale.fixednav.activeText : unActiveText || locale.fixednav.unActiveText))));
 };
 
 FixedNav.defaultProps = defaultProps;

package/dist/esm/Picker.js

@@ -241,12 +241,12 @@ var InternalPickerSlot = function InternalPickerSlot(props, ref) {
         transform: "rotate3d(1, 0, 0, ".concat(-rotation * (index + 1), "deg) translate3d(0px, 0px, 104px)")
       },
       key: item.value ? item.value : index
-    }, item.text ? item.text : item);
+    }, React__default.createElement(React__default.Fragment, null, item.text ? item.text : item));
   }), !threeDimensional && listData.map(function (item, index) {
     return React__default.createElement("div", {
       className: "nut-picker-roller-item-tile",
       key: item.value ? item.value : index
-    }, item.text ? item.text : item);
+    }, React__default.createElement(React__default.Fragment, null, item.text ? item.text : item));
   })), React__default.createElement("div", {
     className: "nut-picker-mask"
   }), React__default.createElement("div", {
@@ -450,8 +450,8 @@ var InternalPicker = function InternalPicker(props, ref) {
     var data = [];
     var normalData = normalListData();
     setColumnsList(normalData);
-    normalData.map(function (item) {
-      data.push(item[0].value);
+    normalData.length > 0 && normalData.map(function (item) {
+      item[0] && data.push(item[0].value);
       return item;
     });
 

package/dist/esm/Popover.js

@@ -53,14 +53,10 @@ var Trigger = /*#__PURE__*/function (_React__default$Compo) {
 
   var _super = _createSuper(Trigger);
 
-  function Trigger(props) {
+  function Trigger() {
     _classCallCheck(this, Trigger);
 
-    return _super.call(this, props); // ALL_HANDLERS.forEach((h) => {
-    //  ( this as any)[`fire${h}`] = (e: any) => {
-    //     this.fireEvents(h, e)
-    //   }
-    // })
+    return _super.apply(this, arguments);
   }
 
   _createClass(Trigger, [{
@@ -88,21 +84,7 @@ var Trigger = /*#__PURE__*/function (_React__default$Compo) {
       var child = React__default.Children.only(children);
       var newChildProps = {
         key: 'trigger'
-      }; // newChildProps.onClick = (e: any) => {
-      //   this.fireEvents('onClick', e)
-      // }
-      // newChildProps.onMouseEnter = (e: any) => {
-      //   this.fireEvents('onMouseEnter', e)
-      // }
-      // newChildProps.onMouseLeave = (e: any) => {
-      //   this.fireEvents('onMouseLeave', e)
-      // }
-      // newChildProps.onFocus = (e: any) => {
-      //   this.fireEvents('onMouseLeave', e)
-      // }
-      // newChildProps.onKeyPress = (e: any) => {
-      //   this.fireEvents('onMouseLeave', e)
-      // }
+      };
 
       if (child && child.props && child.props.className) {
         newChildProps.className = className;
@@ -122,7 +104,8 @@ var Trigger = /*#__PURE__*/function (_React__default$Compo) {
 function findDOMNode(node) {
   if (node instanceof HTMLElement) {
     return node;
-  }
+  } // eslint-disable-next-line react/no-find-dom-node
+
 
   return ReactDOM__default.findDOMNode(node);
 }
@@ -156,7 +139,8 @@ var Popover = function Popover(props) {
       onClick = _defaultProps$props.onClick,
       reset = _objectWithoutProperties(_defaultProps$props, _excluded);
 
-  var goodItem = useRef(null);
+  var goodItem = useRef(null); // eslint-disable-next-line react/no-find-dom-node
+
   var aa = goodItem.current && findDOMNode(goodItem.current);
   setTimeout(function () {
     if (aa) {
@@ -191,21 +175,21 @@ var Popover = function Popover(props) {
       setPopoverArrow = _useState10[1];
 
   useEffect(function () {
-    setClasses(classes_self());
-    setPopoverContent(popoverContent_self());
-    setPopoverArrow(popoverArrow_self());
+    setClasses(classesSelf());
+    setPopoverContent(popoverContentSelf());
+    setPopoverArrow(popoverArrowSelf());
   }, [list, theme]);
 
   var getStyle = function getStyle() {
     var style = {};
 
-    if (location == 'top') {
+    if (location === 'top') {
       style.bottom = elHeight + 20;
       style.left = 0;
-    } else if (location == 'right') {
+    } else if (location === 'right') {
       style.top = 0;
       style.right = -elWidth - 20;
-    } else if (location == 'left') {
+    } else if (location === 'left') {
       style.top = 0;
       style.left = -elWidth - 20;
     } else {
@@ -223,13 +207,13 @@ var Popover = function Popover(props) {
   var getArrowStyle = function getArrowStyle() {
     var style = {};
 
-    if (location == 'top') {
+    if (location === 'top') {
       style.bottom = -20;
       style.left = elWidth / 2;
-    } else if (location == 'right') {
+    } else if (location === 'right') {
       style.top = 20;
       style.left = -20;
-    } else if (location == 'left') {
+    } else if (location === 'left') {
       style.top = 20;
       style.right = -20;
     } else {
@@ -244,17 +228,17 @@ var Popover = function Popover(props) {
     return style;
   };
 
-  var classes_self = function classes_self() {
+  var classesSelf = function classesSelf() {
     var prefixCls = 'nut-popover';
     return "".concat(prefixCls, "\n    ").concat(theme ? "".concat(prefixCls, "--").concat(theme) : '');
   };
 
-  var popoverContent_self = function popoverContent_self() {
+  var popoverContentSelf = function popoverContentSelf() {
     var prefixCls = 'popoverContent';
     return "".concat(prefixCls, "\n    ").concat(location ? "".concat(prefixCls, "--").concat(location) : '');
   };
 
-  var popoverArrow_self = function popoverArrow_self() {
+  var popoverArrowSelf = function popoverArrowSelf() {
     var prefixCls = 'popoverArrow';
     return "".concat(prefixCls, "\n    ").concat(location ? "".concat(prefixCls, "--").concat(location) : '');
   }; // const showPopup = props.visible

package/dist/esm/Popup.js

@@ -6,6 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React__default, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import classNames from 'classnames';
 import { d as defaultOverlayProps } from './overlay-ed3eb37d.js';
@@ -23,7 +24,7 @@ var defaultProps = _objectSpread({
   closeIconPosition: 'top-right',
   closeIcon: 'close',
   destroyOnClose: true,
-  // teleport: 'body',
+  teleport: null,
   overlay: true,
   round: false,
   onOpen: function onOpen() {},
@@ -42,8 +43,10 @@ var Popup = function Popup(props) {
 
   var children = props.children,
       visible = props.visible,
+      overlay = props.overlay,
       closeOnClickOverlay = props.closeOnClickOverlay,
       overlayStyle = props.overlayStyle,
+      overlayClass = props.overlayClass,
       zIndex = props.zIndex,
       lockScroll = props.lockScroll,
       duration = props.duration,
@@ -57,6 +60,7 @@ var Popup = function Popup(props) {
       popClass = props.popClass,
       className = props.className,
       destroyOnClose = props.destroyOnClose,
+      teleport = props.teleport,
       onOpen = props.onOpen,
       onClose = props.onClose,
       onClickOverlay = props.onClickOverlay,
@@ -104,9 +108,6 @@ var Popup = function Popup(props) {
 
   var open = function open() {
     if (!innerVisible) {
-      // if(zIndex !== undefined) {
-      //   _zIndex = +zIndex;
-      // }
       setInnerVisible(true);
       setIndex(++_zIndex);
     }
@@ -155,6 +156,54 @@ var Popup = function Popup(props) {
     onClosed && onClosed(e);
   };
 
+  var resolveContainer = function resolveContainer(getContainer) {
+    var container = typeof getContainer === 'function' ? getContainer() : getContainer;
+    return container || document.body;
+  };
+
+  var renderToContainer = function renderToContainer(getContainer, node) {
+    if (getContainer) {
+      var container = resolveContainer(getContainer);
+      return createPortal(node, container);
+    }
+
+    return node;
+  };
+
+  var renderPop = function renderPop() {
+    return React__default.createElement(CSSTransition, {
+      classNames: transitionName,
+      unmountOnExit: true,
+      timeout: 500,
+      "in": innerVisible,
+      onEntered: onHandleOpened,
+      onExited: onHandleClosed
+    }, React__default.createElement("div", {
+      style: popStyles,
+      className: classes,
+      onClick: onHandleClick
+    }, showChildren ? children : '', closeable ? React__default.createElement("div", {
+      className: closeClasses,
+      onClick: onHandleClickCloseIcon
+    }, React__default.createElement(Icon, {
+      name: closeIcon,
+      size: "12px"
+    })) : ''));
+  };
+
+  var renderNode = function renderNode() {
+    return React__default.createElement(React__default.Fragment, null, overlay ? React__default.createElement(React__default.Fragment, null, React__default.createElement(Overlay, {
+      style: overlayStyles,
+      overlayClass: overlayClass,
+      visible: innerVisible,
+      closeOnClickOverlay: closeOnClickOverlay,
+      zIndex: zIndex,
+      lockScroll: lockScroll,
+      duration: duration,
+      onClick: onHandleClickOverlay
+    }), renderPop()) : React__default.createElement(React__default.Fragment, null, renderPop()));
+  };
+
   useEffect(function () {
     visible && open();
     !visible && close();
@@ -162,32 +211,7 @@ var Popup = function Popup(props) {
   useEffect(function () {
     setTransitionName(transition || "popup-slide-".concat(position));
   }, [position]);
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Overlay, {
-    style: overlayStyles,
-    visible: innerVisible,
-    closeOnClickOverlay: closeOnClickOverlay,
-    zIndex: zIndex,
-    lockScroll: lockScroll,
-    duration: duration,
-    onClick: onHandleClickOverlay
-  }), React__default.createElement(CSSTransition, {
-    classNames: transitionName,
-    unmountOnExit: true,
-    timeout: 500,
-    "in": innerVisible,
-    onEntered: onHandleOpened,
-    onExited: onHandleClosed
-  }, React__default.createElement("div", {
-    style: popStyles,
-    className: classes,
-    onClick: onHandleClick
-  }, showChildren ? children : '', closeable ? React__default.createElement("div", {
-    className: closeClasses,
-    onClick: onHandleClickCloseIcon
-  }, React__default.createElement(Icon, {
-    name: closeIcon,
-    size: "12px"
-  })) : '')));
+  return React__default.createElement(React__default.Fragment, null, renderToContainer(teleport, renderNode()));
 };
 
 Popup.defaultProps = defaultProps;