diginet-core-ui 1.3.73 → 1.3.74

package/components/popover/index.js

@@ -6,8 +6,9 @@ import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
-import { borderRadius4px, displayBlock, flexCol, flexRow, overflowAuto, parseWidthHeight, positionAbsolute, positionRelative } from '../../styles/general';
+import { borderRadius4px, displayBlock, flexCol, justifyBetween, overflowAuto, parseWidthHeight, positionAbsolute, positionFixed, positionRelative } from '../../styles/general';
 import theme from '../../theme/settings';
+import { classNames, isMobile, refType as ref } from '../../utils';
 const {
   colors: {
     system: {
@@ -17,6 +18,7 @@ const {
   typography: {
     paragraph1
   },
+  spacing,
   zIndex: zIndexCORE
 } = theme;
 const eventMap = new Map([['click', ['click']], ['hover', ['mouseenter', 'mouseleave']], ['focus', ['focus', 'blur']]]);
@@ -65,6 +67,18 @@ const calPosition = (position, originBounding) => {
 
 const getDirectionPopover = direction => {
   switch (direction) {
+    case 'center':
+      return {
+        anchorOrigin: {
+          vertical: 'center',
+          horizontal: 'center'
+        },
+        transformOrigin: {
+          vertical: 'center',
+          horizontal: 'center'
+        }
+      };
+
     case 'top':
       return {
         anchorOrigin: {
@@ -116,15 +130,18 @@ const getDirectionPopover = direction => {
 };
 
 const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   anchor,
   anchorOrigin,
   arrow,
   bgColor,
   children,
+  className,
   clickOutsideToClose,
   direction,
   fullScreen,
   height,
+  marginThreshold,
   onClose,
   open,
   pressESCToClose,
@@ -134,24 +151,30 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width,
   zIndex
 }, reference) => {
+  if (isMobile.any() && trigger === 'hover') trigger = 'click';
   const ref = useRef(null);
+  const arrowRef = useRef(null);
   const [openState, setOpenState] = useState(open);
   const [element, setElement] = useState(null);
 
   const _PortalPopoverCSS = PortalPopoverCSS(zIndex, fullScreen);
 
-  const _PopoverContainerCSS = PopoverContainerCSS(width, height);
-
-  const _PopoverRootCSS = PopoverRootCSS(bgColor);
+  const _PopoverContainerCSS = PopoverContainerCSS(bgColor, width, height);
 
   const _PopoverArrowCSS = PopoverArrowCSS(bgColor);
 
+  const arrowSize = arrow ? 6 : 0;
+
   if (direction) {
     const directionObject = getDirectionPopover(direction);
     anchorOrigin = directionObject.anchorOrigin;
     transformOrigin = directionObject.transformOrigin;
   }
 
+  const onOpenPopover = () => {
+    if (!openState) setOpenState(true);
+  };
+
   const onClosePopover = () => {
     if (openState) {
       if (ref.current) ref.current.style.opacity = 0;
@@ -167,21 +190,23 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onClickOutside = event => {
-    var _anchor2, _anchor2$current, _anchor3, _ref$current, _ref$current2, _ref$current2$parentN;
+    var _anchor2, _anchor3, _anchor3$current, _anchor4, _ref$current, _ref$current2, _ref$current2$parentN;
 
     if (!ref.current) {
       document.removeEventListener('click', onClickOutside);
       return;
     }
 
-    const _anchor = ((_anchor2 = anchor) === null || _anchor2 === void 0 ? void 0 : (_anchor2$current = _anchor2.current) === null || _anchor2$current === void 0 ? void 0 : _anchor2$current.element) || ((_anchor3 = anchor) === null || _anchor3 === void 0 ? void 0 : _anchor3.current) || anchor;
+    const _anchor = ((_anchor2 = anchor) === null || _anchor2 === void 0 ? void 0 : _anchor2.element) || ((_anchor3 = anchor) === null || _anchor3 === void 0 ? void 0 : (_anchor3$current = _anchor3.current) === null || _anchor3$current === void 0 ? void 0 : _anchor3$current.element) || ((_anchor4 = anchor) === null || _anchor4 === void 0 ? void 0 : _anchor4.current) || anchor;
 
-    if (clickOutsideToClose && !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(event === null || event === void 0 ? void 0 : event.target)) && (!fullScreen || (_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && (_ref$current2$parentN = _ref$current2.parentNode) !== null && _ref$current2$parentN !== void 0 && _ref$current2$parentN.contains(event === null || event === void 0 ? void 0 : event.target)) && !(_anchor !== null && _anchor !== void 0 && _anchor.contains(event === null || event === void 0 ? void 0 : event.target)) && openState) {
+    if (clickOutsideToClose && !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains((event === null || event === void 0 ? void 0 : event.toElement) || (event === null || event === void 0 ? void 0 : event.target))) && (!fullScreen || (_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && (_ref$current2$parentN = _ref$current2.parentNode) !== null && _ref$current2$parentN !== void 0 && _ref$current2$parentN.contains(event === null || event === void 0 ? void 0 : event.target)) && !(_anchor !== null && _anchor !== void 0 && _anchor.contains((event === null || event === void 0 ? void 0 : event.toElement) || (event === null || event === void 0 ? void 0 : event.target))) && openState) {
       onClosePopover();
     }
   };
 
-  const updatePositionPopover = (el = null) => {
+  const updatePositionPopover = (el = null, cb) => {
+    var _window, _window2, _anchor6, _anchorRect, _anchorRect2, _anchor7, _anchorRect3, _anchorRect4, _anchorRect5, _anchorRect6, _anchorRect7, _anchorRect8, _anchorRect9, _anchorRect10, _anchorRect11, _anchorRect12, _newDirectionObject, _newDirectionObject$t, _transformOrigin, _newDirectionObject2, _newDirectionObject2$, _transformOrigin2;
+
     setElement(el instanceof Element ? el : null);
 
     if (!ref.current) {
@@ -192,14 +217,17 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     let top = 0,
         left = 0,
         vertical = 0,
+        verticalCenter = 0,
         horizontal = 0,
+        horizontalCenter = 0,
         arrowPosition = {},
         translate = {
       left: 0,
       top: 0
     },
-        anchorBounding = null,
-        aPosition = '';
+        anchorRect = null,
+        aPosition = '',
+        newDirectionObject = null;
 
     if (transformOrigin === 'center') {
       transformOrigin = {
@@ -210,106 +238,194 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     if (element || anchor) {
       if (element) anchor = element;else if (anchor && !(anchor instanceof Element)) {
-        var _anchor4, _anchor$current;
+        var _anchor5, _anchor$current;
 
-        anchor = ((_anchor4 = anchor) === null || _anchor4 === void 0 ? void 0 : _anchor4.element) || ((_anchor$current = anchor.current) === null || _anchor$current === void 0 ? void 0 : _anchor$current.element) || anchor.current;
-      }
-
-      if (anchorOrigin === 'center') {
-        anchorOrigin = {
-          vertical: 'center',
-          horizontal: 'center'
-        };
+        anchor = ((_anchor5 = anchor) === null || _anchor5 === void 0 ? void 0 : _anchor5.element) || ((_anchor$current = anchor.current) === null || _anchor$current === void 0 ? void 0 : _anchor$current.element) || anchor.current;
       }
 
       if (arrow && anchorOrigin.vertical !== anchorOrigin.horizontal && transformOrigin.vertical !== transformOrigin.horizontal) {
         aPosition = getArrowPosition(anchorOrigin, transformOrigin, translate);
       }
 
-      anchorBounding = anchor.getBoundingClientRect();
-      vertical = anchorBounding.y + calPosition(anchorOrigin.vertical, anchorBounding)[0] - translate.top;
-      horizontal = anchorBounding.x + calPosition(anchorOrigin.horizontal, anchorBounding)[1] - translate.left;
-    } // Position's transform
+      anchorRect = anchor.getBoundingClientRect();
+      vertical = anchorRect.y + calPosition(anchorOrigin.vertical, anchorRect)[0] - translate.top;
+      verticalCenter = anchorRect.y + calPosition('center', anchorRect)[0];
+      horizontal = anchorRect.x + calPosition(anchorOrigin.horizontal, anchorRect)[1] - translate.left;
+      horizontalCenter = anchorRect.x + calPosition('center', anchorRect)[1];
+    } // Calculate element positioning
 
 
-    const offsetHeight = ref.current.offsetHeight;
-    const offsetWidth = ref.current.offsetWidth;
+    const containerWindow = {
+      width: ((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth) || 0,
+      height: ((_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.innerHeight) || 0
+    };
+    const popoverHeight = ref.current.offsetHeight;
+    const popoverWidth = ref.current.offsetWidth;
 
     switch (transformOrigin.vertical) {
       case 'center':
-        top = vertical - offsetHeight / 2;
+        top = vertical - popoverHeight / 2;
         break;
 
       case 'bottom':
-        top = vertical - offsetHeight;
+        top = vertical - popoverHeight;
         break;
 
       default:
         top = vertical;
+        break;
     }
 
     switch (transformOrigin.horizontal) {
       case 'center':
-        left = horizontal - offsetWidth / 2;
+        left = horizontal - popoverWidth / 2;
         break;
 
       case 'right':
-        left = horizontal - offsetWidth;
+        left = horizontal - popoverWidth;
         break;
 
       default:
         left = horizontal;
-    } // Reset position if the element overflow window screen size
+        break;
+    } // Variables for check if needs shifting
+
+
+    const heightThreshold = containerWindow.height - marginThreshold;
+    const widthThreshold = containerWindow.width - marginThreshold;
+    const bottomOfAnchor = top + ((_anchor6 = anchor) === null || _anchor6 === void 0 ? void 0 : _anchor6.offsetHeight);
+    const topPos = ((_anchorRect = anchorRect) === null || _anchorRect === void 0 ? void 0 : _anchorRect.bottom) + arrowSize;
+    const verticalCenterPos = verticalCenter - popoverHeight / 2;
+    const bottomPos = ((_anchorRect2 = anchorRect) === null || _anchorRect2 === void 0 ? void 0 : _anchorRect2.top) - (popoverHeight + arrowSize);
+    const rightOfAnchor = left + ((_anchor7 = anchor) === null || _anchor7 === void 0 ? void 0 : _anchor7.offsetWidth);
+    const leftPos = ((_anchorRect3 = anchorRect) === null || _anchorRect3 === void 0 ? void 0 : _anchorRect3.right) + arrowSize;
+    const horizontalCenterPos = horizontalCenter - popoverWidth / 2;
+    const rightPos = ((_anchorRect4 = anchorRect) === null || _anchorRect4 === void 0 ? void 0 : _anchorRect4.left) - (popoverWidth + arrowSize); // Check if the vertical axis needs shifting
+
+    if (top < marginThreshold) {
+      if (topPos > heightThreshold) {
+        top = verticalCenterPos;
+        newDirectionObject = getDirectionPopover('center');
+        aPosition = '';
+      } else {
+        top = topPos;
+        newDirectionObject = getDirectionPopover('bottom');
+        aPosition = getArrowPosition(newDirectionObject.anchorOrigin, newDirectionObject.transformOrigin, translate);
+      }
+    } else if (top + popoverHeight > containerWindow.height) {
+      if (bottomPos < bottomOfAnchor && bottomPos < marginThreshold) {
+        top = verticalCenterPos;
+        newDirectionObject = getDirectionPopover('center');
+        aPosition = '';
+      } else {
+        top = bottomPos;
+        newDirectionObject = getDirectionPopover('top');
+        aPosition = getArrowPosition(newDirectionObject.anchorOrigin, newDirectionObject.transformOrigin, translate);
+      }
+    } // Check if the horizontal axis needs shifting
 
 
-    if (top < 0) {
-      top = 0;
-    } else if (top + offsetHeight > window.innerHeight) {
-      top = window.innerHeight - offsetHeight;
-    }
+    if (left < marginThreshold) {
+      if (leftPos > widthThreshold) {
+        left = horizontalCenterPos;
+        newDirectionObject = getDirectionPopover('center');
+        aPosition = '';
+      } else {
+        left = leftPos;
+        newDirectionObject = getDirectionPopover('right');
+        aPosition = getArrowPosition(newDirectionObject.anchorOrigin, newDirectionObject.transformOrigin, translate);
+      }
+    } else if (left + popoverWidth > containerWindow.width) {
+      if (rightPos < rightOfAnchor && rightPos < marginThreshold) {
+        left = horizontalCenterPos;
+        newDirectionObject = getDirectionPopover('center');
+        aPosition = '';
+      } else {
+        left = rightPos;
+        newDirectionObject = getDirectionPopover('left');
+        aPosition = getArrowPosition(newDirectionObject.anchorOrigin, newDirectionObject.transformOrigin, translate);
+      }
+    } // Valid mean popover not at top-left, top-right, bottom-left, bottom-right
 
-    if (left < 0) {
-      left = 0;
-    } else if (left + offsetWidth > window.innerWidth) {
-      left = window.innerWidth - offsetWidth;
-    } // Get arrow's position
 
+    const validVerticalArrow = left >= ((_anchorRect5 = anchorRect) === null || _anchorRect5 === void 0 ? void 0 : _anchorRect5.left) + ((_anchorRect6 = anchorRect) === null || _anchorRect6 === void 0 ? void 0 : _anchorRect6.width) / 2 - popoverWidth && left <= ((_anchorRect7 = anchorRect) === null || _anchorRect7 === void 0 ? void 0 : _anchorRect7.right) - ((_anchorRect8 = anchorRect) === null || _anchorRect8 === void 0 ? void 0 : _anchorRect8.width) / 2 + popoverWidth;
+    const validHorizontalArrow = top >= ((_anchorRect9 = anchorRect) === null || _anchorRect9 === void 0 ? void 0 : _anchorRect9.top) + ((_anchorRect10 = anchorRect) === null || _anchorRect10 === void 0 ? void 0 : _anchorRect10.height) / 2 - popoverHeight && top <= ((_anchorRect11 = anchorRect) === null || _anchorRect11 === void 0 ? void 0 : _anchorRect11.bottom) - ((_anchorRect12 = anchorRect) === null || _anchorRect12 === void 0 ? void 0 : _anchorRect12.height) / 2; // Get arrow's position
 
     if (arrow && translate) {
       switch (aPosition) {
         case 'top':
+          if (validVerticalArrow) {
+            var _anchorRect13, _anchorRect14;
+
+            arrowPosition.left = ((_anchorRect13 = anchorRect) === null || _anchorRect13 === void 0 ? void 0 : _anchorRect13.width) / 2 + ((_anchorRect14 = anchorRect) === null || _anchorRect14 === void 0 ? void 0 : _anchorRect14.left) - arrowSize + 'px';
+            arrowPosition.top = Math.round(top) - arrowSize + 'px';
+          }
+
+          break;
+
         case 'bottom':
-          arrowPosition.left = anchorBounding.width / 2 + anchorBounding.left - left - 6 + 'px';
-          arrowPosition[aPosition] = `-6px`;
+          if (validVerticalArrow) {
+            var _anchorRect15, _anchorRect16;
+
+            arrowPosition.left = ((_anchorRect15 = anchorRect) === null || _anchorRect15 === void 0 ? void 0 : _anchorRect15.width) / 2 + ((_anchorRect16 = anchorRect) === null || _anchorRect16 === void 0 ? void 0 : _anchorRect16.left) - arrowSize + 'px';
+            arrowPosition.top = Math.round(top) + popoverHeight + 'px';
+          }
+
           break;
 
         case 'left':
+          if (validHorizontalArrow) {
+            var _anchorRect17, _anchorRect18;
+
+            arrowPosition.top = ((_anchorRect17 = anchorRect) === null || _anchorRect17 === void 0 ? void 0 : _anchorRect17.height) / 2 + ((_anchorRect18 = anchorRect) === null || _anchorRect18 === void 0 ? void 0 : _anchorRect18.top) - arrowSize / 2 + 'px';
+            arrowPosition.left = Math.round(left) - 1.5 * arrowSize + 'px';
+          }
+
+          break;
+
         case 'right':
-          arrowPosition.top = Math.max(4, anchorBounding.height / 2 + anchorBounding.top - top - 2 * Math.sqrt(2)) + 'px';
-          arrowPosition[aPosition] = `-9px`;
+          if (validHorizontalArrow) {
+            var _anchorRect19, _anchorRect20;
+
+            arrowPosition.top = ((_anchorRect19 = anchorRect) === null || _anchorRect19 === void 0 ? void 0 : _anchorRect19.height) / 2 + ((_anchorRect20 = anchorRect) === null || _anchorRect20 === void 0 ? void 0 : _anchorRect20.top) - arrowSize / 2 + 'px';
+            arrowPosition.left = Math.round(left) + popoverWidth - arrowSize / 2 + 'px';
+          }
+
           break;
 
         default:
           break;
       }
 
-      Object.assign(ref.current.querySelector(`.css-${_PopoverArrowCSS.name}`).style, arrowPosition, {
-        transform: translate.transform
-      });
+      if (arrowRef.current) {
+        Object.assign(arrowRef.current.style, arrowPosition, {
+          transform: translate.transform,
+          display: newDirectionObject === 'center' || !(arrowPosition !== null && arrowPosition !== void 0 && arrowPosition.top) ? 'none' : 'block'
+        });
+      }
     }
 
-    ref.current.style.top = top + 'px';
-    ref.current.style.left = left + 'px';
-    ref.current.style.transformOrigin = `${transformOrigin.horizontal || 'left'} ${transformOrigin.vertical || 'top'}`;
+    if (top < marginThreshold) top = marginThreshold;
+    if (left < marginThreshold) left = marginThreshold;
+    const isVerticalOverFlow = left + popoverWidth > containerWindow.width;
+    ref.current.style.maxHeight = `calc(100% - ${spacing(8) + top}px)`;
+    ref.current.style.top = `${Math.round(top)}px`;
+
+    if (isVerticalOverFlow) {
+      ref.current.style.left = 0;
+      ref.current.style.margin = 'auto';
+    } else ref.current.style.left = `${Math.round(left)}px`;
+
+    ref.current.style.transformOrigin = `${((_newDirectionObject = newDirectionObject) === null || _newDirectionObject === void 0 ? void 0 : (_newDirectionObject$t = _newDirectionObject.transformOrigin) === null || _newDirectionObject$t === void 0 ? void 0 : _newDirectionObject$t.horizontal) || ((_transformOrigin = transformOrigin) === null || _transformOrigin === void 0 ? void 0 : _transformOrigin.horizontal) || 'left'} ${((_newDirectionObject2 = newDirectionObject) === null || _newDirectionObject2 === void 0 ? void 0 : (_newDirectionObject2$ = _newDirectionObject2.transformOrigin) === null || _newDirectionObject2$ === void 0 ? void 0 : _newDirectionObject2$.vertical) || ((_transformOrigin2 = transformOrigin) === null || _transformOrigin2 === void 0 ? void 0 : _transformOrigin2.vertical) || 'top'}`;
     ref.current.style.opacity = 1;
+    cb === null || cb === void 0 ? void 0 : cb();
   };
 
-  const handleEventTrigger = () => {
+  const handleEventTrigger = e => {
     if (!openState) {
-      setOpenState(true);
+      onOpenPopover();
     } else {
-      onClose && onClose();
-      setOpenState(false);
+      onClickOutside(e);
     }
   };
 
@@ -324,9 +440,9 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     };
   }, []);
   useEffect(() => {
-    var _anchor5, _anchor6;
+    var _anchor8, _anchor9;
 
-    const anchorEl = ((_anchor5 = anchor) === null || _anchor5 === void 0 ? void 0 : _anchor5.element) || ((_anchor6 = anchor) === null || _anchor6 === void 0 ? void 0 : _anchor6.current) || anchor;
+    const anchorEl = ((_anchor8 = anchor) === null || _anchor8 === void 0 ? void 0 : _anchor8.element) || ((_anchor9 = anchor) === null || _anchor9 === void 0 ? void 0 : _anchor9.current) || anchor;
     const eventArr = eventMap.get(trigger) || [];
 
     if (anchorEl && open === undefined && (eventArr === null || eventArr === void 0 ? void 0 : eventArr.length) > 0) {
@@ -352,6 +468,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       document.addEventListener('click', onClickOutside); // Update position popover on resize
 
       window.addEventListener('resize', updatePositionPopover);
+      if (trigger === 'hover') ref.current.addEventListener('mouseleave', handleEventTrigger, false);
       return () => {
         if (pressESCToClose) {
           document.removeEventListener('keydown', pressESCHandler);
@@ -359,6 +476,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
         document.removeEventListener('click', onClickOutside);
         window.removeEventListener('resize', updatePositionPopover);
+        if (trigger === 'hover' && ref.current) ref.current.removeEventListener('mouseleave', handleEventTrigger, false);
       };
     } else if (!openState) {
       document.documentElement.style.overflow = 'auto';
@@ -367,28 +485,44 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     clickOutsideToClose ? document.addEventListener('click', onClickOutside) : document.removeEventListener('click', onClickOutside);
   }, [clickOutsideToClose]);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {
-      show: () => setOpenState(true),
+  useEffect(() => {
+    updatePositionPopover();
+  }, [children]);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
+      show: el => !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover(),
       close: () => onClosePopover(),
-      setPosition: el => updatePositionPopover(el)
-    },
-    show: () => setOpenState(true),
-    close: () => onClosePopover(),
-    setPosition: el => updatePositionPopover(el)
-  }));
+      setPosition: el => updatePositionPopover(el),
+      ...action
+    }; // methods
+
+    _instance.__proto__ = {
+      hide: () => onClosePopover()
+    }; // hidden methods
+
+    currentRef.instance = _instance;
+
+    currentRef.show = el => !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover();
+
+    currentRef.close = onClosePopover;
+
+    currentRef.setPosition = el => updatePositionPopover(el);
+
+    return currentRef;
+  });
 
   const renderAnchor = () => {
-    var _anchor7;
+    var _anchor10;
 
-    if (!((_anchor7 = anchor) !== null && _anchor7 !== void 0 && _anchor7.type)) return null;
+    if (!((_anchor10 = anchor) !== null && _anchor10 !== void 0 && _anchor10.type)) return null;
     const AnchorTag = /*#__PURE__*/React.cloneElement(anchor, {
-      // onClick: () => {
-      //     setOpenState(true);
-      // },
       ref: ref => {
         anchor = ref;
+      },
+      style: {
+        cursor: 'pointer'
       }
     });
     return AnchorTag;
@@ -402,50 +536,43 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }, jsx("div", {
         css: _PopoverContainerCSS,
         ref: ref,
-        className: 'DGN-UI-Popover-Container'
-      }, jsx("div", {
-        css: _PopoverRootCSS,
         style: style,
-        className: 'DGN-UI-Popover-Root'
+        className: classNames('DGN-UI-Popover-Container', className)
       }, children), arrow && jsx("span", {
+        ref: arrowRef,
         css: _PopoverArrowCSS
-      })));
+      }));
       return /*#__PURE__*/createPortal(node, document.body);
     }
 
     return null;
-  }, [openState, zIndex, fullScreen, style, arrow, children, width, height, bgColor, clickOutsideToClose]);
+  }, [openState, arrow, bgColor, children, className, clickOutsideToClose, fullScreen, height, style, width, zIndex]);
   return jsx(React.Fragment, null, renderAnchor(), PopoverView);
 }));
 
 const PortalPopoverCSS = (zIndex, fullScreen) => css`
-    ${positionAbsolute};
+    ${positionFixed};
     z-index: ${zIndex};
     pointer-events: ${fullScreen ? 'initial' : 'none'};
     inset: 0;
 `;
 
-const PopoverContainerCSS = (width, height) => css`
-    ${flexRow};
-    ${positionAbsolute};
-    ${parseWidthHeight(width, height)};
-    max-width: 100%;
-    max-height: 100%;
-    z-index: ${zIndexCORE()};
-    transition: opacity 0.3s ease;
-    pointer-events: initial;
-    opacity: 0;
-`;
-
-const PopoverRootCSS = bgColor => css`
+const PopoverContainerCSS = (bgColor, width, height) => css`
     ${flexCol};
     ${positionRelative};
+    ${justifyBetween};
     ${overflowAuto};
     ${borderRadius4px};
     ${paragraph1};
+    ${parseWidthHeight(width, height)};
+    min-width: ${spacing([4])};
+    min-height: ${spacing([4])};
+    max-width: calc(100% - ${spacing([8])});
+    max-height: calc(100% - ${spacing([8])});
+    transition: opacity 0.3s ease;
+    pointer-events: initial;
+    opacity: 0;
     background-color: ${bgColor};
-    width: 100%;
-    height: 100%;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 `;
 
@@ -459,34 +586,36 @@ const PopoverArrowCSS = bgColor => css`
 `;
 
 Popover.defaultProps = {
-  clickOutsideToClose: true,
-  pressESCToClose: true,
-  fullScreen: false,
-  arrow: false,
-  width: 'max-content',
-  height: 'max-content',
-  bgColor: white,
-  zIndex: zIndexCORE(1),
   anchorOrigin: {
     vertical: 'bottom',
     horizontal: 'center'
   },
+  arrow: false,
+  bgColor: white,
+  className: '',
+  clickOutsideToClose: true,
+  fullScreen: false,
+  height: 'max-content',
+  marginThreshold: spacing(4),
+  pressESCToClose: true,
+  style: {},
   transformOrigin: {
     vertical: 'top',
     horizontal: 'center'
   },
-  style: {},
-  trigger: 'click'
+  trigger: 'click',
+  width: 'max-content',
+  zIndex: zIndexCORE(1)
 };
 Popover.propTypes = {
   /** If `true`, the component is shown. */
   open: PropTypes.bool,
 
-  /** Trigger mode of the component. Will not work if use with `open` prop. */
+  /** Trigger mode of the component. Will not work when use with `open` prop. */
   trigger: PropTypes.oneOf(['click', 'hover', 'focus']),
 
   /** An HTML element, or a function that returns one. It's used to set the position of the popover. */
-  anchor: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.func, PropTypes.object, PropTypes.node]),
+  anchor: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.func, PropTypes.object, PropTypes.node, ref]),
 
   /**
    * This is the point on the anchor where the popover's anchor will attach to.
@@ -506,6 +635,9 @@ Popover.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
 
+  /** Class for component. */
+  className: PropTypes.string,
+
   /** If `true`, click outside will close component. */
   clickOutsideToClose: PropTypes.bool,
 
@@ -516,13 +648,16 @@ Popover.propTypes = {
    * * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
    * * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
    * * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
-   * * right: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
+   * * bottom: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
    */
   direction: PropTypes.oneOf(['top', 'left', 'right', 'bottom']),
 
   /** Height of the component. */
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
+  /** Specifies how close to the edge of the window the popover can appear. */
+  marginThreshold: PropTypes.number,
+
   /** Callback fired when the component requests to be closed. */
   onClose: PropTypes.func,
 
@@ -555,9 +690,7 @@ Popover.propTypes = {
    * * setPosition(element): Set position of popover
    *  * @param {element} - element
    */
-  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })])
+  reference: ref
 };
 export { Popover };
 export default OptionWrapper(Popover);

package/components/status/index.js

@@ -31,6 +31,7 @@ const iconSizeMap = new Map([['small', '16px'], ['medium', '20px'], ['large', '2
 const typographySizeMap = new Map([['small', 'p3'], ['medium', 'p2'], ['large', 'p1']]);
 const filledPaddingSizeMap = new Map([['small', '2px 8px'], ['medium', '2px 12px'], ['large', '2px 12px']]);
 const Status = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   className,
   color,
   icon,
@@ -50,10 +51,17 @@ const Status = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _StatusRoot = StatusRoot(iconSize, _color, size, outlinedPaddingSize);
 
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   const StatusIcon = typeof icon === 'string' ? jsx(Icon, {
     name: icon,
     width: iconSize,