@nutui/nutui-react 2.0.0-beta.0 → 2.0.0-beta.2

package/dist/esm/Popover/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/esm/Popover/style/index.js

@@ -1,2 +1,2 @@
-require('../../Icon/style')
-require('../../../packages/popover/popover.scss')
+import '../../Popup/style'
+import '../../../packages/popover/popover.scss'

package/dist/esm/Popover/style/style.css

@@ -0,0 +1 @@
+.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);-webkit-overflow-scrolling:touch}.nut-popup-title{display:flex;align-items:center;justify-content:center;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);padding:var(--nutui-popup-title-padding, 15px);font-weight:var(--nutui-font-weight-bold, 400);line-height:var(--nutui-popup-title-line-height, 18px);font-size:var(--nutui-popup-title-font-size, 18px);border-bottom:var(--nutui-popup-title-border-bottom, 0)}.nut-popup-left-icon{position:absolute;top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon{position:absolute!important;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 24px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 24px) 0 0 var(--nutui-popup-border-radius, 24px)}.nut-popup-left{top:0;left:0}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px)}@keyframes popup-scale-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popup-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.nut-popup-slide-default-enter-active{animation-fill-mode:both;animation-name:popup-scale-fade-in;animation-duration:.3s}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:.3s}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-fade-out{0%{opacity:1}to{opacity:0}}.nut-popup-slide-center-enter-active{animation-fill-mode:both;animation-name:popup-fade-in;animation-duration:.3s}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:.3s}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}}@keyframes popup-slide-top-exit{to{transform:translate3d(0,-100%,0)}}.nut-popup-slide-top-enter-active,.nut-popup-slide-top-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-top-enter;animation-duration:.3s}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:.3s}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}}@keyframes popup-slide-right-exit{to{transform:translate3d(100%,0,0)}}.nut-popup-slide-right-enter-active,.nut-popup-slide-right-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-right-enter;animation-duration:.3s}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:.3s}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}}@keyframes slide-bottom-exit{to{transform:translate3d(0,100%,0)}}.nut-popup-slide-bottom-enter-active,.nut-popup-slide-bottom-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-bottom-enter;animation-duration:.3s}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:.3s}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}}@keyframes popup-slide-left-exit{to{transform:translate3d(-100%,0,0)}}.nut-popup-slide-left-enter-active,.nut-popup-slide-left-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-left-enter;animation-duration:.3s}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{animation-fill-mode:both;animation-name:popup-slide-left-exit;animation-duration:.3s}.nut-overflow-hidden{overflow:hidden!important}.nut-popover{position:absolute;display:inline-block;word-break:normal}.nut-popover-arrow{position:absolute;width:0;height:0;border:8px solid transparent}.nut-popover-arrow-top{bottom:0;border-top-color:var(--nutui-popover-white-background-color, var(--nutui-gray-6, #ffffff));border-bottom-width:0;margin-bottom:-8px}.nut-popover-arrow-bottom{top:0px;border-bottom-color:var(--nutui-popover-white-background-color, var(--nutui-gray-6, #ffffff));border-top-width:0;margin-top:-8px}.nut-popover-arrow-bottom.nut-popover-arrow--bottom{left:50%;transform:translate(-50%)}.nut-popover-arrow-bottom.nut-popover-arrow--bottom-start{left:16px;transform:translate(0)}.nut-popover-arrow-bottom.nut-popover-arrow--bottom-end{right:16px;transform:translate(0)}.nut-popover-arrow-left{right:0px;border-left-color:var(--nutui-popover-white-background-color, var(--nutui-gray-6, #ffffff));border-right-width:0;margin-right:-8px}.nut-popover-arrow-left.nut-popover-arrow--left{top:50%;transform:translateY(-50%)}.nut-popover-arrow-left.nut-popover-arrow--left-start{top:16px;transform:translateY(0)}.nut-popover-arrow-left.nut-popover-arrow--left-end{bottom:16px;transform:translateY(0)}.nut-popover-arrow-right{left:0px;border-right-color:var(--nutui-popover-white-background-color, var(--nutui-gray-6, #ffffff));border-left-width:0;margin-left:-8px}.nut-popover-arrow-right.nut-popover-arrow--right{top:50%;transform:translateY(-50%)}.nut-popover-arrow-right.nut-popover-arrow--right-start{top:16px;transform:translateY(0)}.nut-popover-arrow-right.nut-popover-arrow--right-end{bottom:16px;transform:translateY(0)}.nut-popover .nut-popover-content{position:absolute;background-color:var(--nutui-popover-content-background-color, var(--nutui-gray-6, #ffffff));border-radius:var(--nutui-popover-border-radius, 8px);font-size:var(--nutui-popover-font-size, var(--nutui-font-size-2, 14px));font-family:PingFangSC;font-weight:400;color:var(--nutui-popover-primary-text-color, var(--nutui-gray-1, #1a1a1a));box-shadow:0 2px 12px #3232331f;max-height:initial;overflow-y:initial}.nut-popover .nut-popover-content-group{display:block;height:100%;width:100%}.nut-popover .nut-popover-content .nut-popover-menu-item{display:flex;align-items:center;padding:var(--nutui-popover-menu-item-padding, 8px);border-bottom:1px solid var(--nutui-popover-border-bottom-color, rgb(229, 229, 229))}.nut-popover .nut-popover-content .nut-popover-menu-item:last-child{margin-bottom:2px;border-bottom:none}.nut-popover .nut-popover-content .nut-popover-menu-item:hover{cursor:pointer;color:var(--nutui-popover-menu-item-hover-text-color, #1a1a1a);background-color:var(--nutui-popover-menu-item-hover-background-color, #fff)}.nut-popover .nut-popover-content .nut-popover-menu-item:hover:nth-of-type(2){border-radius:8px 8px 0 0}.nut-popover .nut-popover-content .nut-popover-menu-item:hover:last-of-type{border-radius:0 0 8px 8px}.nut-popover .nut-popover-content .nut-popover-menu-item .nut-popover-menu-item-name{width:100%;word-break:keep-all}.nut-popover .nut-popover-content .nut-popover-menu-item.nut-popover-menu-disabled{color:var(--nutui-popover-disable-color, rgb(154, 155, 157));cursor:not-allowed}.nut-popover .nut-popover-content .nut-popover-menu-item.nut-popover-menu-taroitem{display:flex}.nut-popover .nut-popover-content--top .nut-popover-arrow--top{left:50%;transform:translate(-50%)}.nut-popover .nut-popover-content--top-end{right:0}.nut-popover .nut-popover-content--top-end .nut-popover-arrow--top-end{right:16px;transform:translate(0)}.nut-popover .nut-popover-content--top-start{left:0}.nut-popover .nut-popover-content--top-start .nut-popover-arrow--top-start{left:16px;transform:translate(0)}.nut-popover .nut-popover-content--bottom-end{right:0}.nut-popover .nut-popover-content--left-end{bottom:0}.nut-popover .nut-popover-content--left-start{top:0}.nut-popover .nut-popover-content--right-end{bottom:0}.nut-popover .nut-popover-content--right-start{top:0}.nut-popover-enter-from,.nut-popover-leave-active{transform:scale(.8);opacity:0}.nut-popover-enter-active{transition-timing-function:ease-out}.nut-popover-leave-active{transition-timing-function:ease-in}.nut-popover-content-bg{position:fixed;height:100%;width:100%;top:0;left:0;background:transparent;z-index:1999}.nut-popover-wrapper{display:inline-block}.nut-popover-content-copy{position:absolute;top:-99999px}

package/dist/esm/Popover.js

@@ -1,267 +1,208 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _typeof from "@babel/runtime/helpers/typeof";
-var _excluded = ["children", "list", "theme", "location", "visible", "offset", "className", "style", "onClick", "onChoose"];
-
-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; }
-
-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; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import React__default, { useRef, useState, useEffect } from 'react';
-import Icon from './Icon.js';
-import Overlay from './Overlay.js';
-/**
- * 过滤ref
- */
-
-function fillRef(ref, node) {
-  if (typeof ref === 'function') {
-    ref(node);
-  } else if (_typeof(ref) === 'object' && ref && 'current' in ref) {
-    ref.current = node;
+var _excluded = ["children", "list", "location", "visible", "offset", "targetId", "overlay", "closeOnOutsideClick", "closeOnActionClick", "className", "showArrow", "style", "onClick", "onOpen", "onClose", "onSelect"];
+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;
 }
-/**
- * 将ref合并到一个ref函数中以支持ref传递
- */
-
-
-function composeRef() {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
-  }
-
-  return function (node) {
-    refs.forEach(function (ref) {
-      fillRef(ref, node);
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).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));
     });
-  };
-}
-
-var Trigger = /*#__PURE__*/function (_React__default$Compo) {
-  _inherits(Trigger, _React__default$Compo);
-
-  var _super = _createSuper(Trigger);
-
-  function Trigger() {
-    _classCallCheck(this, Trigger);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(Trigger, [{
-    key: "fireEvents",
-    value: function fireEvents(type, e) {
-      var childCallback = this.props.children.props[type];
-
-      if (childCallback) {
-        childCallback(e);
-      }
-
-      var callback = this.props[type];
-
-      if (callback) {
-        callback(e);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          _this$props$className = _this$props.className,
-          className = _this$props$className === void 0 ? '' : _this$props$className;
-      var child = React__default.Children.only(children);
-      var newChildProps = {
-        key: 'trigger'
-      };
-
-      if (child && child.props && child.props.className) {
-        newChildProps.className = className;
-      }
-
-      var cloneProps = _objectSpread({}, newChildProps);
-
-      cloneProps.ref = composeRef(this.props.forwardedRef, child.ref);
-      var trigger = React__default.cloneElement(child, cloneProps);
-      return trigger;
-    }
-  }]);
-
-  return Trigger;
-}(React__default.Component);
-
-var getEleAttr = function getEleAttr(ele) {
-  if (ele && ele.getBoundingClientRect) {
-    return ele.getBoundingClientRect();
   }
-
-  return null;
-};
-
-var defaultProps = {
+  return target;
+}
+import React__default, { useRef, useState, useEffect } from "react";
+import classNames from "classnames";
+import Popup from "./Popup.js";
+import { g as getRect } from "./use-client-rect.js";
+import { C as ComponentDefaults } from "./typings.js";
+import { u as useClickAway } from "./use-click-away.js";
+import "./index.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   list: [],
-  theme: 'light',
-  location: 'bottom',
+  location: "bottom",
   visible: false,
-  offset: 20,
-  className: '',
-  onClick: function onClick(e) {},
-  onChoose: function onChoose(item, index) {}
-};
-
-var Popover = function Popover(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-      children = _defaultProps$props.children,
-      list = _defaultProps$props.list,
-      theme = _defaultProps$props.theme,
-      location = _defaultProps$props.location,
-      visible = _defaultProps$props.visible,
-      offset = _defaultProps$props.offset,
-      className = _defaultProps$props.className,
-      style = _defaultProps$props.style,
-      onClick = _defaultProps$props.onClick,
-      onChoose = _defaultProps$props.onChoose,
-      reset = _objectWithoutProperties(_defaultProps$props, _excluded);
-
-  var goodItem = useRef(null);
-  setTimeout(function () {
-    if (goodItem.current && getEleAttr(goodItem.current)) {
-      setElWidth(getEleAttr(goodItem.current).width);
-      setElHeight(getEleAttr(goodItem.current).height);
+  offset: [0, 12],
+  targetId: "",
+  showArrow: true,
+  closeOnOutsideClick: true,
+  closeOnActionClick: true,
+  overlay: false,
+  onClick: function onClick() {
+  },
+  onOpen: function onOpen() {
+  },
+  onClose: function onClose() {
+  }
+});
+var classPrefix = "nut-popover";
+var Popover = function Popover2(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, list = _defaultProps$props.list, location = _defaultProps$props.location, visible = _defaultProps$props.visible, offset = _defaultProps$props.offset, targetId = _defaultProps$props.targetId, overlay = _defaultProps$props.overlay, closeOnOutsideClick = _defaultProps$props.closeOnOutsideClick, closeOnActionClick = _defaultProps$props.closeOnActionClick, className = _defaultProps$props.className, showArrow = _defaultProps$props.showArrow, style = _defaultProps$props.style, onClick2 = _defaultProps$props.onClick, onOpen2 = _defaultProps$props.onOpen, onClose2 = _defaultProps$props.onClose, onSelect = _defaultProps$props.onSelect, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var popoverRef = useRef(null);
+  var popoverContentRef = useRef(null);
+  var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), showPopup = _useState2[0], setShowPopup = _useState2[1];
+  var _useState3 = useState(0), _useState4 = _slicedToArray(_useState3, 2), elWidth = _useState4[0], setElWidth = _useState4[1];
+  var _useState5 = useState(0), _useState6 = _slicedToArray(_useState5, 2), elHeight = _useState6[0], setElHeight = _useState6[1];
+  var _useState7 = useState(), _useState8 = _slicedToArray(_useState7, 2), rootPosition = _useState8[0], setRootPosition = _useState8[1];
+  useEffect(function() {
+    setShowPopup(visible);
+    if (visible) {
+      setTimeout(function() {
+        getContentWidth();
+      }, 0);
     }
-  });
-
-  var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      classes = _useState2[0],
-      setClasses = _useState2[1];
-
-  var _useState3 = useState(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      elWidth = _useState4[0],
-      setElWidth = _useState4[1];
-
-  var _useState5 = useState(0),
-      _useState6 = _slicedToArray(_useState5, 2),
-      elHeight = _useState6[0],
-      setElHeight = _useState6[1];
-
-  var _useState7 = useState(''),
-      _useState8 = _slicedToArray(_useState7, 2),
-      popoverContent = _useState8[0],
-      setPopoverContent = _useState8[1];
-
-  var _useState9 = useState(''),
-      _useState10 = _slicedToArray(_useState9, 2),
-      popoverArrow = _useState10[0],
-      setPopoverArrow = _useState10[1];
-
-  useEffect(function () {
-    setClasses(classesSelf());
-    setPopoverContent(popoverContentSelf());
-    setPopoverArrow(popoverArrowSelf());
-  }, [list, theme]);
-
-  var getStyle = function getStyle() {
-    var offNumer = Number(offset) ? Number(offset) : 0;
-    var style = {};
-
-    if (location.includes('top')) {
-      style.bottom = "".concat(elHeight + offNumer, "px");
-    } else if (location.includes('right')) {
-      style.left = "".concat(elWidth + offNumer, "px");
-    } else if (location.includes('left')) {
-      style.right = "".concat(elWidth + offNumer, "px");
+  }, [visible]);
+  var targetSet = [targetId ? document.querySelector("#".concat(targetId)) : popoverRef.current, popoverContentRef.current];
+  useClickAway(function() {
+    props.onClick && props.onClick();
+    onClose2 && onClose2();
+  }, targetSet, "touchstart", true, visible, closeOnOutsideClick);
+  var getContentWidth = function getContentWidth2() {
+    var rect = getRect(popoverRef.current);
+    if (targetId) {
+      setTimeout(function() {
+        rect = getRect(document.querySelector("#".concat(targetId)));
+        setRootPosition({
+          width: rect.width,
+          height: rect.height,
+          left: rect.left,
+          top: rect.top,
+          right: rect.right
+        });
+        if (popoverContentRef.current) {
+          setElWidth(popoverContentRef.current.clientWidth);
+          setElHeight(popoverContentRef.current.clientHeight);
+        }
+      }, 0);
     } else {
-      style.top = "".concat(elHeight + offNumer, "px");
+      setRootPosition({
+        width: rect.width,
+        height: rect.height,
+        left: rect.left,
+        top: rect.top,
+        right: rect.right
+      });
+      if (popoverContentRef.current) {
+        setElWidth(popoverContentRef.current.clientWidth);
+        setElHeight(popoverContentRef.current.clientHeight);
+      }
     }
-
-    return style;
   };
-
-  var classesSelf = function classesSelf() {
-    var prefixCls = 'nut-popover';
-    return "".concat(prefixCls, " ").concat(theme ? "".concat(prefixCls, "--").concat(theme) : '');
+  var classes = classNames(_defineProperty({}, "".concat(classPrefix), true), className);
+  var popoverArrow = function popoverArrow2() {
+    var prefixCls = "nut-popover-arrow";
+    var loca = location;
+    var direction = loca.split("-")[0];
+    return "".concat(prefixCls, " ").concat(prefixCls, "-").concat(direction, " ").concat(prefixCls, "--").concat(loca);
   };
-
-  var popoverContentSelf = function popoverContentSelf() {
-    var prefixCls = 'popover-content';
-    return "".concat(prefixCls, "-show ").concat(prefixCls, " ").concat(location ? "".concat(prefixCls, "--").concat(location) : '');
-  };
-
-  var filter = function filter() {
-    var ms = ['top', 'bottom', 'left', 'right'];
-    return ms.filter(function (m) {
-      return location.includes(m);
-    })[0];
-  };
-
-  var popoverArrowSelf = function popoverArrowSelf() {
-    var prefixCls = 'popover-arrow';
-    return "".concat(prefixCls, " ").concat(prefixCls, "-").concat(filter(), " ").concat(location ? "".concat(prefixCls, "--").concat(location) : '');
-  };
-
-  var handleClick = function handleClick(e) {
-    if (props.onClick) {
-      props.onClick(e);
+  var getRootPosition = function getRootPosition2() {
+    var styles = {};
+    if (!rootPosition)
+      return {};
+    var contentWidth = elWidth;
+    var contentHeight = elHeight;
+    var width = rootPosition.width, height = rootPosition.height, left = rootPosition.left, top = rootPosition.top, right = rootPosition.right;
+    var direction = location.split("-")[0];
+    var skew = location.split("-")[1];
+    var cross = 0;
+    var parallel = 0;
+    if (Array.isArray(offset) && offset.length === 2) {
+      cross += +offset[1];
+      parallel += +offset[0];
     }
+    if (width) {
+      if (["bottom", "top"].includes(direction)) {
+        var h = direction === "bottom" ? height + cross : -(contentHeight + cross);
+        styles.top = "".concat(top + h, "px");
+        if (!skew) {
+          styles.left = "".concat(-(contentWidth - width) / 2 + left + parallel, "px");
+        }
+        if (skew === "start") {
+          styles.left = "".concat(left + parallel, "px");
+        }
+        if (skew === "end") {
+          styles.left = "".concat(right + parallel, "px");
+        }
+      }
+      if (["left", "right"].includes(direction)) {
+        var contentW = direction === "left" ? -(contentWidth + cross) : width + cross;
+        styles.left = "".concat(left + contentW, "px");
+        if (!skew) {
+          styles.top = "".concat(top - contentHeight / 2 + height / 2 - 4 + parallel, "px");
+        }
+        if (skew === "start") {
+          styles.top = "".concat(top + parallel, "px");
+        }
+        if (skew === "end") {
+          styles.top = "".concat(top + height + parallel, "px");
+        }
+      }
+    }
+    return styles;
   };
-
-  var handleChoose = function handleChoose(item, index) {
+  var handleSelect = function handleSelect2(item, index) {
     if (!item.disabled) {
-      onChoose(item, index);
+      onSelect && onSelect(item, index);
     }
-  };
-
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", _objectSpread({
-    className: "".concat(classes, " ").concat(className),
-    style: _objectSpread({}, style)
-  }, reset), React__default.createElement(Trigger, {
-    forwardedRef: goodItem
-  }, React__default.createElement("div", {
-    onClick: function onClick(e) {
-      return handleClick(e);
+    if (closeOnActionClick) {
+      props.onClick && props.onClick();
+      onClose2 && onClose2();
     }
-  }, Array.isArray(children) ? children[0] : children, visible ? React__default.createElement("div", {
-    className: "".concat(popoverContent),
-    style: getStyle()
-  }, React__default.createElement("div", {
-    className: "".concat(popoverArrow)
-  }), Array.isArray(children) ? children[1] : '', list.map(function (item, i) {
+  };
+  return React__default.createElement(React__default.Fragment, null, !targetId && React__default.createElement("div", {
+    className: "nut-popover-wrapper",
+    ref: popoverRef,
+    onClick: function onClick3() {
+      props.onClick && props.onClick();
+      if (!visible) {
+        onOpen2 && onOpen2();
+      } else {
+        onClose2 && onClose2();
+      }
+    },
+    style
+  }, Array.isArray(children) ? children[0] : children), React__default.createElement("div", {
+    className: classes,
+    style: getRootPosition()
+  }, React__default.createElement(Popup, _objectSpread({
+    className: "nut-popover-content nut-popover-content--".concat(location),
+    visible: showPopup,
+    overlay,
+    position: "default"
+  }, rest), React__default.createElement("div", {
+    className: "nut-popover-content-group",
+    ref: popoverContentRef
+  }, showArrow && React__default.createElement("div", {
+    className: popoverArrow()
+  }), Array.isArray(children) ? children[1] : "", list.map(function(item, index) {
     return React__default.createElement("div", {
-      key: item.name,
-      className: "popover-menu-item ".concat(item.disabled ? 'disabled' : ''),
-      onClick: function onClick() {
-        handleChoose(item, i);
+      className: classNames({
+        "nut-popover-menu-item": true,
+        "nut-popover-menu-disabled": item.disabled
+      }, item.className),
+      key: item.key,
+      onClick: function onClick3() {
+        return handleSelect(item, index);
       }
-    }, item.icon ? React__default.createElement(Icon, {
-      className: "popover-menu-item-img",
-      name: item.icon
-    }) : '', React__default.createElement("div", {
-      className: "popover-menu-item-name"
+    }, item.icon ? item.icon : null, React__default.createElement("div", {
+      className: "nut-popover-menu-item-name"
     }, item.name));
-  })) : null))), visible ? React__default.createElement(Overlay, {
-    visible: visible,
-    onClick: function onClick(e) {
-      return handleClick(e);
-    },
-    style: {
-      background: 'transparent'
-    }
-  }) : '');
+  })))));
 };
-
 Popover.defaultProps = defaultProps;
-Popover.displayName = 'NutPopover';
-export { Popover as default };
+Popover.displayName = "NutPopover";
+export {
+  Popover as default
+};

package/dist/esm/Popup/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/esm/Popup/style/index.js

@@ -1,3 +1,2 @@
-require('../../Icon/style')
-require('../../Overlay/style')
-require('../../../packages/popup/popup.scss')
+import '../../Overlay/style'
+import '../../../packages/popup/popup.scss'

package/dist/esm/Popup/style/style.css

@@ -0,0 +1 @@
+.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);-webkit-overflow-scrolling:touch}.nut-popup-title{display:flex;align-items:center;justify-content:center;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);padding:var(--nutui-popup-title-padding, 15px);font-weight:var(--nutui-font-weight-bold, 400);line-height:var(--nutui-popup-title-line-height, 18px);font-size:var(--nutui-popup-title-font-size, 18px);border-bottom:var(--nutui-popup-title-border-bottom, 0)}.nut-popup-left-icon{position:absolute;top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon{position:absolute!important;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 24px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 24px) 0 0 var(--nutui-popup-border-radius, 24px)}.nut-popup-left{top:0;left:0}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px)}@keyframes popup-scale-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popup-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.nut-popup-slide-default-enter-active{animation-fill-mode:both;animation-name:popup-scale-fade-in;animation-duration:.3s}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:.3s}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-fade-out{0%{opacity:1}to{opacity:0}}.nut-popup-slide-center-enter-active{animation-fill-mode:both;animation-name:popup-fade-in;animation-duration:.3s}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:.3s}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}}@keyframes popup-slide-top-exit{to{transform:translate3d(0,-100%,0)}}.nut-popup-slide-top-enter-active,.nut-popup-slide-top-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-top-enter;animation-duration:.3s}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:.3s}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}}@keyframes popup-slide-right-exit{to{transform:translate3d(100%,0,0)}}.nut-popup-slide-right-enter-active,.nut-popup-slide-right-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-right-enter;animation-duration:.3s}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:.3s}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}}@keyframes slide-bottom-exit{to{transform:translate3d(0,100%,0)}}.nut-popup-slide-bottom-enter-active,.nut-popup-slide-bottom-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-bottom-enter;animation-duration:.3s}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:.3s}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}}@keyframes popup-slide-left-exit{to{transform:translate3d(-100%,0,0)}}.nut-popup-slide-left-enter-active,.nut-popup-slide-left-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-left-enter;animation-duration:.3s}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{animation-fill-mode:both;animation-name:popup-slide-left-exit;animation-duration:.3s}.nut-overflow-hidden{overflow:hidden!important}