funda-ui 4.7.624 → 4.7.701

package/{publish/lib/cjs/Tooltip → Popover}/index.js

@@ -1413,30 +1413,31 @@ var __webpack_exports__ = {};
 // This entry need to be wrapped in an IIFE because it need to be in strict mode.
 (() => {
 "use strict";
+// ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(787);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var funda_root_portal__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(909);
-/* harmony import */ var funda_root_portal__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(funda_root_portal__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var funda_utils_dist_cjs_useComId__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(85);
-/* harmony import */ var funda_utils_dist_cjs_useComId__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_useComId__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var funda_utils_dist_cjs_useClickOutside__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(761);
-/* harmony import */ var funda_utils_dist_cjs_useClickOutside__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_useClickOutside__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var funda_utils_dist_cjs_getElementProperty__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(767);
-/* harmony import */ var funda_utils_dist_cjs_getElementProperty__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_getElementProperty__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(188);
-/* harmony import */ var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var funda_utils_dist_cjs_inputsCalculation__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(954);
-/* harmony import */ var funda_utils_dist_cjs_inputsCalculation__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_inputsCalculation__WEBPACK_IMPORTED_MODULE_6__);
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "PopoverClose": () => (/* reexport */ src_PopoverClose),
+  "PopoverContent": () => (/* reexport */ src_PopoverContent),
+  "PopoverTrigger": () => (/* reexport */ src_PopoverTrigger),
+  "default": () => (/* reexport */ src_Popover)
+});
+
+// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"}
+var external_root_React_commonjs2_react_commonjs_react_amd_react_ = __webpack_require__(787);
+var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__PURE__*/__webpack_require__.n(external_root_React_commonjs2_react_commonjs_react_amd_react_);
+// EXTERNAL MODULE: ../Utils/dist/cjs/useComId.js
+var useComId = __webpack_require__(85);
+var useComId_default = /*#__PURE__*/__webpack_require__.n(useComId);
+// EXTERNAL MODULE: ../Utils/dist/cjs/useClickOutside.js
+var useClickOutside = __webpack_require__(761);
+var useClickOutside_default = /*#__PURE__*/__webpack_require__.n(useClickOutside);
+// EXTERNAL MODULE: ../Utils/dist/cjs/getElementProperty.js
+var getElementProperty = __webpack_require__(767);
+// EXTERNAL MODULE: ../Utils/dist/cjs/inputsCalculation.js
+var inputsCalculation = __webpack_require__(954);
+;// CONCATENATED MODULE: ./src/Popover.tsx
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -1449,327 +1450,356 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
 
+// Context for Popover state management
 
-// Use forwardRef to expose imperative methods
-var Tooltip = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (props, ref) {
-  var triggerClassName = props.triggerClassName,
-    wrapperClassName = props.wrapperClassName,
-    direction = props.direction,
+var PopoverContext = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.createContext)(null);
+var usePopoverContext = function usePopoverContext() {
+  var context = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(PopoverContext);
+  if (!context) {
+    throw new Error('Popover components must be used within a Popover');
+  }
+  return context;
+};
+
+// Main Popover component (container)
+
+var Popover = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.forwardRef)(function (props, ref) {
+  var direction = props.direction,
     offset = props.offset,
     exceededSidePosOffset = props.exceededSidePosOffset,
     size = props.size,
-    hoverDelay = props.hoverDelay,
-    mouseOutDelay = props.mouseOutDelay,
-    content = props.content,
-    id = props.id,
-    children = props.children,
-    controlled = props.controlled,
     popupArrowColor = props.popupArrowColor,
     popupContentStyle = props.popupContentStyle,
-    delayedClose = props.delayedClose,
-    delayedCloseTimeout = props.delayedCloseTimeout,
-    onContentMouseEnter = props.onContentMouseEnter,
-    onContentMouseLeave = props.onContentMouseLeave;
+    wrapperClassName = props.wrapperClassName,
+    id = props.id,
+    open = props.open,
+    onOpenChange = props.onOpenChange,
+    children = props.children;
   var POS_OFFSET = Number(offset) || 4;
   var EXCEEDED_SIDE_POS_OFFSET = Number(exceededSidePosOffset) || 15;
-  var uniqueID = funda_utils_dist_cjs_useComId__WEBPACK_IMPORTED_MODULE_2___default()();
+  var uniqueID = useComId_default()();
   var idRes = id || uniqueID;
-  var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  var modalRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  var HOVER_DELAY = hoverDelay ? hoverDelay : 200;
-  var MOUSE_OUT_DELAY = mouseOutDelay ? mouseOutDelay : HOVER_DELAY;
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
+  var triggerRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var contentRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
-    hasBeenShown = _useState2[0],
-    setHasBeenShown = _useState2[1];
-  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isShow = _useState4[0],
-    setIsShow = _useState4[1];
-  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({
-      x: 0,
-      y: 0
+    uncontrolledOpen = _useState2[0],
+    setUncontrolledOpen = _useState2[1];
+  var isControlled = typeof open === 'boolean';
+  var isOpen = isControlled ? !!open : uncontrolledOpen;
+  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({
+      x: '0',
+      y: '0'
     }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    position = _useState6[0],
-    setPosition = _useState6[1];
-  var popupArrowStyle = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    _useState4 = _slicedToArray(_useState3, 2),
+    position = _useState4[0],
+    setPosition = _useState4[1];
+  var setIsOpen = function setIsOpen(nextOpen) {
+    if (!isControlled) {
+      setUncontrolledOpen(nextOpen);
+    }
+    if (typeof onOpenChange === 'function') {
+      onOpenChange(nextOpen);
+    }
+  };
+  var popupArrowStyle = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
     if (typeof popupArrowColor !== 'undefined' && Array.isArray(popupArrowColor) && popupArrowColor.length === 4) {
       return {
-        '--cus-tooltip-arrow-bg-top': "url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28".concat(popupArrowColor[0], ",%20").concat(popupArrowColor[1], ",%20").concat(popupArrowColor[2], ",%20").concat(popupArrowColor[3], "%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E\") no-repeat"),
-        '--cus-tooltip-arrow-bg-bottom': "url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28".concat(popupArrowColor[0], ",%20").concat(popupArrowColor[1], ",%20").concat(popupArrowColor[2], ",%20").concat(popupArrowColor[3], "%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E\") no-repeat"),
-        '--cus-tooltip-arrow-bg-left': "url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%28".concat(popupArrowColor[0], ",%20").concat(popupArrowColor[1], ",%20").concat(popupArrowColor[2], ",%20").concat(popupArrowColor[3], "%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E\") no-repeat"),
-        '--cus-tooltip-arrow-bg-right': "url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%28".concat(popupArrowColor[0], ",%20").concat(popupArrowColor[1], ",%20").concat(popupArrowColor[2], ",%20").concat(popupArrowColor[3], "%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E\") no-repeat")
+        '--cus-popover-arrow-bg-top': "url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28".concat(popupArrowColor[0], ",%20").concat(popupArrowColor[1], ",%20").concat(popupArrowColor[2], ",%20").concat(popupArrowColor[3], "%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E\") no-repeat"),
+        '--cus-popover-arrow-bg-bottom': "url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28".concat(popupArrowColor[0], ",%20").concat(popupArrowColor[1], ",%20").concat(popupArrowColor[2], ",%20").concat(popupArrowColor[3], "%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E\") no-repeat"),
+        '--cus-popover-arrow-bg-left': "url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%28".concat(popupArrowColor[0], ",%20").concat(popupArrowColor[1], ",%20").concat(popupArrowColor[2], ",%20").concat(popupArrowColor[3], "%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E\") no-repeat"),
+        '--cus-popover-arrow-bg-right': "url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%28".concat(popupArrowColor[0], ",%20").concat(popupArrowColor[1], ",%20").concat(popupArrowColor[2], ",%20").concat(popupArrowColor[3], "%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E\") no-repeat")
       };
     }
     return undefined;
   }, [popupArrowColor]);
 
+  // Calculate position based on trigger element
+  var calculatePosition = function calculatePosition() {
+    var triggerEl = triggerRef.current;
+    if (!triggerEl) return;
+    var _getAbsolutePositionO = (0,getElementProperty.getAbsolutePositionOfStage)(triggerEl),
+      x = _getAbsolutePositionO.x,
+      y = _getAbsolutePositionO.y,
+      width = _getAbsolutePositionO.width,
+      height = _getAbsolutePositionO.height;
+    var pos = direction || 'top';
+    if (pos.indexOf('top') >= 0) {
+      setPosition({
+        x: x + width / 2 + 'px',
+        y: y - height - POS_OFFSET + 'px'
+      });
+    } else if (pos.indexOf('bottom') >= 0) {
+      setPosition({
+        x: x + width / 2 + 'px',
+        y: y + height + POS_OFFSET + 'px'
+      });
+    }
+  };
+
   // Expose show/hide methods to parent via ref
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useImperativeHandle)(ref, function () {
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useImperativeHandle)(ref, function () {
     return {
       show: function show() {
-        // Find the trigger element
-        var triggerEl = rootRef.current;
-        if (triggerEl) {
-          // Calculate position (copy from handleMouseEnter)
-          var _getAbsolutePositionO = (0,funda_utils_dist_cjs_getElementProperty__WEBPACK_IMPORTED_MODULE_4__.getAbsolutePositionOfStage)(triggerEl),
-            x = _getAbsolutePositionO.x,
-            y = _getAbsolutePositionO.y,
-            width = _getAbsolutePositionO.width,
-            height = _getAbsolutePositionO.height;
-          var pos = triggerEl.dataset.microtipPosition;
-          if (typeof pos === 'undefined') pos = 'top';
-          if (pos.indexOf('top') >= 0) {
-            setPosition({
-              x: x + width / 2 + 'px',
-              y: y - height - POS_OFFSET + 'px'
-            });
-          }
-          if (pos.indexOf('bottom') >= 0) {
-            setPosition({
-              x: x + width / 2 + 'px',
-              y: y + height + POS_OFFSET + 'px'
-            });
-          }
-        }
-        setIsShow(true);
+        calculatePosition();
+        setIsOpen(true);
       },
       hide: function hide() {
-        hideTip();
+        setIsOpen(false);
       }
     };
-  }, [POS_OFFSET]);
+  }, [direction, POS_OFFSET]);
 
-  // click outside
-  funda_utils_dist_cjs_useClickOutside__WEBPACK_IMPORTED_MODULE_3___default()({
-    enabled: isShow && rootRef.current && !controlled,
-    // Only auto-close if not controlled
+  // Click outside to close
+  useClickOutside_default()({
+    enabled: isOpen && triggerRef.current !== null,
     isOutside: function isOutside(event) {
-      // Prevent closing when clicking inside the tooltip wrapper
-      if (modalRef.current && modalRef.current.contains(event.target)) {
-        return false; // Click is inside the tooltip wrapper, do not close
+      var _triggerRef$current;
+      // Prevent closing when clicking inside the popover wrapper
+      if (contentRef.current && contentRef.current.contains(event.target)) {
+        return false;
       }
-      // close dropdown when other dropdown is opened
-      return rootRef.current !== event.target && !rootRef.current.contains(event.target);
+      return triggerRef.current !== event.target && !((_triggerRef$current = triggerRef.current) !== null && _triggerRef$current !== void 0 && _triggerRef$current.contains(event.target));
     },
-    handle: function handle(event) {
-      hideTip();
+    handle: function handle() {
+      setIsOpen(false);
     }
-  }, [isShow, rootRef, controlled]);
-
-  //timer hover
-  var timeoutHoverIdRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  var startTimerHover = function startTimerHover() {
-    timeoutHoverIdRef.current = setTimeout(function () {
-      if (!hasBeenShown) {
-        // this will render once, then fire componentDidUpdate, which will show the tip
-        setHasBeenShown(true);
-      }
-      setIsShow(true);
-    }, HOVER_DELAY);
-  };
-  var stopTimerHover = function stopTimerHover() {
-    clearTimeout(timeoutHoverIdRef.current);
-    timeoutHoverIdRef.current = null;
-  };
-
-  //timer mouseout
-  var timeoutMouseoutIdRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  var startTimerMouseout = function startTimerMouseout() {
-    timeoutMouseoutIdRef.current = setTimeout(function () {
-      hideTip();
-    }, MOUSE_OUT_DELAY);
-  };
-  var stopTimerMouseout = function stopTimerMouseout() {
-    clearTimeout(timeoutMouseoutIdRef.current);
-    timeoutMouseoutIdRef.current = null;
-  };
+  }, [isOpen]);
   var exceededOffsetInit = function exceededOffsetInit() {
     // Determine whether it exceeds the far right or left side of the screen
     //------------------
-    var _modalRef = modalRef.current;
+    var _modalRef = contentRef.current;
     if (_modalRef === null) return;
-    var _modalContent = _modalRef.querySelector('.cus-tooltip__content');
+    var _modalContent = _modalRef.querySelector('.cus-popover__content');
+    if (!_modalContent) return;
     var _modalBox = _modalContent.getBoundingClientRect();
     if (typeof _modalContent.dataset.offset === 'undefined' && _modalBox.left > 0) {
       // Adjust the coordinates due to height
       //------------------
       var triggerEl = document.querySelector("[data-overlay-id=\"".concat(_modalRef.id, "\"]"));
       if (triggerEl !== null) {
-        var pos = triggerEl.dataset.microtipPosition;
-        if (typeof pos === 'undefined') pos = 'top';
-        var _offsetY = _modalBox.height - (0,funda_utils_dist_cjs_inputsCalculation__WEBPACK_IMPORTED_MODULE_6__.getElCSS)(_modalContent, 'font-size', true) - (0,funda_utils_dist_cjs_inputsCalculation__WEBPACK_IMPORTED_MODULE_6__.getElCSS)(_modalContent, 'padding-top', true) - (0,funda_utils_dist_cjs_inputsCalculation__WEBPACK_IMPORTED_MODULE_6__.getElCSS)(_modalContent, 'padding-bottom', true);
-
-        // TOP
-        //
-        if (pos.indexOf('top') >= 0) {
+        var _pos = triggerEl.dataset.microtipPosition;
+        if (typeof _pos === 'undefined') _pos = 'top';
+        var _offsetY = _modalBox.height - (0,inputsCalculation.getElCSS)(_modalContent, 'font-size', true) - (0,inputsCalculation.getElCSS)(_modalContent, 'padding-top', true) - (0,inputsCalculation.getElCSS)(_modalContent, 'padding-bottom', true);
+        if (_pos.indexOf('top') >= 0) {
           _modalRef.style.transform = "translateY(-".concat(_offsetY, "px)");
         }
       }
 
       // 10 pixels is used to account for some bias in mobile devices
-      //------------------
       if (_modalBox.right + 10 > window.innerWidth) {
         var _modalOffsetPosition = _modalBox.right - window.innerWidth + EXCEEDED_SIDE_POS_OFFSET;
         _modalContent.dataset.offset = _modalOffsetPosition;
         _modalContent.style.marginLeft = "-".concat(_modalOffsetPosition, "px");
-        // console.log('_modalPosition: ', _modalOffsetPosition)
       }
-
       if (_modalBox.left - 10 < 0) {
         var _modalOffsetPosition2 = Math.abs(_modalBox.left) + EXCEEDED_SIDE_POS_OFFSET;
         _modalContent.dataset.offset = _modalOffsetPosition2;
         _modalContent.style.marginLeft = "".concat(_modalOffsetPosition2, "px");
-
-        // console.log('_modalPosition: ', _modalOffsetPosition)
       }
     }
   };
 
-  function handleMouseEnter(e) {
-    if (controlled) return; // Do nothing if controlled
-    stopTimerHover();
-    stopTimerMouseout();
-    startTimerHover();
+  // Update position when opening
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (isOpen) {
+      calculatePosition();
+    }
+  }, [isOpen, direction, POS_OFFSET]);
 
-    // update modal position
-    //------------------
-    var _triggerRef = e.currentTarget;
-
-    // console.log(getAbsolutePositionOfStage(_triggerRef));
-    if (_triggerRef !== null) {
-      var _getAbsolutePositionO2 = (0,funda_utils_dist_cjs_getElementProperty__WEBPACK_IMPORTED_MODULE_4__.getAbsolutePositionOfStage)(_triggerRef),
-        x = _getAbsolutePositionO2.x,
-        y = _getAbsolutePositionO2.y,
-        width = _getAbsolutePositionO2.width,
-        height = _getAbsolutePositionO2.height;
-      var pos = _triggerRef.dataset.microtipPosition;
-      if (typeof pos === 'undefined') pos = 'top';
-
-      // TOP
-      //
-      if (pos.indexOf('top') >= 0) {
-        setPosition({
-          x: x + width / 2 + 'px',
-          y: y - height - POS_OFFSET + 'px'
-        });
-      }
+  // Prevent element data from being unable to be obtained when ref is null
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    exceededOffsetInit();
+  });
+  var contextValue = {
+    isOpen: isOpen,
+    setIsOpen: setIsOpen,
+    triggerRef: triggerRef,
+    contentRef: contentRef,
+    id: idRes,
+    direction: direction,
+    offset: offset,
+    exceededSidePosOffset: exceededSidePosOffset,
+    size: size,
+    popupArrowColor: popupArrowColor,
+    popupContentStyle: popupContentStyle,
+    wrapperClassName: wrapperClassName,
+    position: position,
+    setPosition: setPosition,
+    popupArrowStyle: popupArrowStyle
+  };
+  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(PopoverContext.Provider, {
+    value: contextValue
+  }, children);
+});
+Popover.displayName = 'Popover';
+/* harmony default export */ const src_Popover = (Popover);
+// EXTERNAL MODULE: ../Utils/dist/cjs/cls.js
+var cls = __webpack_require__(188);
+;// CONCATENATED MODULE: ./src/PopoverTrigger.tsx
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 
-      // BOTTOM
-      //
-      if (pos.indexOf('bottom') >= 0) {
-        setPosition({
-          x: x + width / 2 + 'px',
-          y: y + height + POS_OFFSET + 'px'
-        });
-      }
-    }
-  }
-  function handleMouseLeave() {
-    if (controlled) return; // Do nothing if controlled
-    stopTimerHover();
-    stopTimerMouseout();
-    startTimerMouseout();
-  }
-  function hideTip() {
-    setIsShow(false);
-  }
 
-  // Timer for delayed close
-  var delayedCloseTimerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  var DELAYED_CLOSE_TIMEOUT = typeof delayedCloseTimeout === 'number' ? delayedCloseTimeout : 1500;
-
-  // Handler for mouse leave on trigger (when delayedClose is enabled)
-  function handleTriggerMouseLeave() {
-    if (controlled) return;
-    if (delayedClose) {
-      // Start delayed close timer
-      if (delayedCloseTimerRef.current) clearTimeout(delayedCloseTimerRef.current);
-      delayedCloseTimerRef.current = setTimeout(function () {
-        hideTip();
-      }, DELAYED_CLOSE_TIMEOUT);
-    } else {
-      stopTimerHover();
-      stopTimerMouseout();
-      startTimerMouseout();
-    }
-  }
 
-  // Handler for mouse enter on wrapper (cancel delayed close)
-  function handleWrapperMouseEnter(event) {
-    if (controlled) return;
-    if (delayedClose && delayedCloseTimerRef.current) {
-      clearTimeout(delayedCloseTimerRef.current);
-      delayedCloseTimerRef.current = null;
+
+// PopoverTrigger component
+
+var PopoverTrigger = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.forwardRef)(function (props, ref) {
+  var asChild = props.asChild,
+    className = props.className,
+    children = props.children;
+  var _usePopoverContext = usePopoverContext(),
+    triggerRef = _usePopoverContext.triggerRef,
+    setIsOpen = _usePopoverContext.setIsOpen,
+    isOpen = _usePopoverContext.isOpen,
+    id = _usePopoverContext.id,
+    direction = _usePopoverContext.direction,
+    size = _usePopoverContext.size;
+  var handleClick = function handleClick(e) {
+    e.preventDefault();
+    setIsOpen(!isOpen);
+  };
+  var setRefs = function setRefs(node) {
+    if (node) {
+      triggerRef.current = node;
     }
-    // Call user-provided handler if present
-    if (onContentMouseEnter && event) {
-      onContentMouseEnter(event);
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref && node) {
+      ref.current = node;
     }
+  };
+  var triggerProps = {
+    ref: setRefs,
+    'data-overlay-id': "cus-popover__wrapper-".concat(id),
+    className: (0,cls.combinedCls)('cus-popover__trigger', (0,cls.clsWrite)(className, 'd-inline-block')),
+    'data-microtip-position': direction || 'top',
+    'data-microtip-size': size || 'auto',
+    onClick: handleClick
+  };
+  if (asChild && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().isValidElement(children)) {
+    return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().cloneElement(children, _objectSpread(_objectSpread({}, triggerProps), children.props || {}));
   }
-
-  // Handler for mouse leave on wrapper (restart delayed close timer)
-  function handleWrapperMouseLeave(event) {
-    if (controlled) return;
-    if (delayedClose) {
-      if (delayedCloseTimerRef.current) clearTimeout(delayedCloseTimerRef.current);
-      delayedCloseTimerRef.current = setTimeout(function () {
-        hideTip();
-      }, DELAYED_CLOSE_TIMEOUT);
+  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", triggerProps, children);
+});
+PopoverTrigger.displayName = 'PopoverTrigger';
+/* harmony default export */ const src_PopoverTrigger = (PopoverTrigger);
+// EXTERNAL MODULE: ../RootPortal/dist/cjs/index.js
+var cjs = __webpack_require__(909);
+var cjs_default = /*#__PURE__*/__webpack_require__.n(cjs);
+;// CONCATENATED MODULE: ./src/PopoverContent.tsx
+function PopoverContent_typeof(obj) { "@babel/helpers - typeof"; return PopoverContent_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, PopoverContent_typeof(obj); }
+function PopoverContent_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 PopoverContent_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? PopoverContent_ownKeys(Object(source), !0).forEach(function (key) { PopoverContent_defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : PopoverContent_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function PopoverContent_defineProperty(obj, key, value) { key = PopoverContent_toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function PopoverContent_toPropertyKey(arg) { var key = PopoverContent_toPrimitive(arg, "string"); return PopoverContent_typeof(key) === "symbol" ? key : String(key); }
+function PopoverContent_toPrimitive(input, hint) { if (PopoverContent_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (PopoverContent_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+
+
+
+
+
+// PopoverContent component
+
+var PopoverContent = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.forwardRef)(function (props, ref) {
+  var children = props.children,
+    className = props.className;
+  var _usePopoverContext = usePopoverContext(),
+    isOpen = _usePopoverContext.isOpen,
+    contentRef = _usePopoverContext.contentRef,
+    id = _usePopoverContext.id,
+    direction = _usePopoverContext.direction,
+    size = _usePopoverContext.size,
+    popupArrowStyle = _usePopoverContext.popupArrowStyle,
+    popupContentStyle = _usePopoverContext.popupContentStyle,
+    wrapperClassName = _usePopoverContext.wrapperClassName,
+    position = _usePopoverContext.position;
+  var wrapperRef = function wrapperRef(node) {
+    if (node) {
+      contentRef.current = node;
     }
-    // Call user-provided handler if present
-    if (onContentMouseLeave && event) {
-      onContentMouseLeave(event);
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref && node) {
+      ref.current = node;
     }
-  }
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    return function () {
-      stopTimerHover();
-      stopTimerMouseout();
-      if (delayedCloseTimerRef.current) clearTimeout(delayedCloseTimerRef.current);
-    };
-  }, []);
-
-  // Prevent element data from being unable to be obtained when ref is null
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    exceededOffsetInit();
-  });
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    ref: rootRef,
-    "data-overlay-id": "cus-tooltip__wrapper-".concat(idRes),
-    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_5__.combinedCls)('cus-tooltip__trigger', (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_5__.clsWrite)(triggerClassName, 'd-inline-block')),
-    "data-microtip-position": direction || 'top',
-    "data-microtip-size": size || 'auto',
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: delayedClose ? handleTriggerMouseLeave : handleMouseLeave
-  }, children), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((funda_root_portal__WEBPACK_IMPORTED_MODULE_1___default()), {
-    show: isShow,
-    containerClassName: "Tooltip"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    ref: modalRef,
-    id: "cus-tooltip__wrapper-".concat(idRes),
-    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_5__.combinedCls)('cus-tooltip__wrapper', wrapperClassName, 'active'),
-    role: "tooltip",
+  };
+  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((cjs_default()), {
+    show: isOpen,
+    containerClassName: "Popover"
+  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+    ref: wrapperRef,
+    id: "cus-popover__wrapper-".concat(id),
+    className: (0,cls.combinedCls)('cus-popover__wrapper', wrapperClassName, 'active'),
+    role: "popover",
     "data-microtip-position": direction || 'top',
     "data-microtip-size": size || 'auto',
-    style: _objectSpread({
+    style: PopoverContent_objectSpread({
       left: position.x,
       top: position.y,
       display: 'none'
-    }, popupArrowStyle),
-    onMouseEnter: delayedClose || onContentMouseEnter ? function (e) {
-      return handleWrapperMouseEnter(e);
-    } : undefined,
-    onMouseLeave: delayedClose || onContentMouseLeave ? function (e) {
-      return handleWrapperMouseLeave(e);
-    } : undefined
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "cus-tooltip__content",
-    style: _objectSpread({}, popupContentStyle)
-  }, content))));
+    }, popupArrowStyle)
+  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+    className: (0,cls.combinedCls)('cus-popover__content', className),
+    style: popupContentStyle
+  }, children)));
 });
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Tooltip);
+PopoverContent.displayName = 'PopoverContent';
+/* harmony default export */ const src_PopoverContent = (PopoverContent);
+;// CONCATENATED MODULE: ./src/PopoverClose.tsx
+function PopoverClose_typeof(obj) { "@babel/helpers - typeof"; return PopoverClose_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, PopoverClose_typeof(obj); }
+var _excluded = ["asChild", "className", "children", "onClick"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function PopoverClose_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 PopoverClose_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? PopoverClose_ownKeys(Object(source), !0).forEach(function (key) { PopoverClose_defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : PopoverClose_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function PopoverClose_defineProperty(obj, key, value) { key = PopoverClose_toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function PopoverClose_toPropertyKey(arg) { var key = PopoverClose_toPrimitive(arg, "string"); return PopoverClose_typeof(key) === "symbol" ? key : String(key); }
+function PopoverClose_toPrimitive(input, hint) { if (PopoverClose_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (PopoverClose_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+
+
+var PopoverClose = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.forwardRef)(function (props, ref) {
+  var asChild = props.asChild,
+    className = props.className,
+    children = props.children,
+    onClick = props.onClick,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _usePopoverContext = usePopoverContext(),
+    setIsOpen = _usePopoverContext.setIsOpen;
+  var handleClick = function handleClick(event) {
+    if (typeof onClick === 'function') {
+      onClick(event);
+    }
+    if (!event.defaultPrevented) {
+      setIsOpen(false);
+    }
+  };
+  var closeProps = PopoverClose_objectSpread({
+    ref: ref,
+    className: (0,cls.combinedCls)('cus-popover__close', className),
+    onClick: handleClick
+  }, rest);
+  if (asChild && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().isValidElement(children)) {
+    return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().cloneElement(children, PopoverClose_objectSpread(PopoverClose_objectSpread({}, closeProps), children.props || {}));
+  }
+  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("button", _extends({
+    type: "button"
+  }, closeProps), children || 'Close');
+});
+PopoverClose.displayName = 'PopoverClose';
+/* harmony default export */ const src_PopoverClose = (PopoverClose);
+;// CONCATENATED MODULE: ./src/index.tsx
+
+
+
+
 })();
 
 /******/ 	return __webpack_exports__;