diginet-core-ui 1.3.87 → 1.3.88

package/components/popover/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
@@ -21,6 +22,7 @@ const {
   zIndex: zIndexCORE
 } = useTheme();
 const eventMap = new Map([['click', ['click']], ['hover', ['mouseenter', 'mouseleave']], ['focus', ['focus', 'blur']]]);
+
 const getArrowPosition = (anchorOrigin, transformOrigin, translate) => {
   if (anchorOrigin.horizontal === 'right' && transformOrigin.horizontal === 'left') {
     translate.left = -6;
@@ -39,25 +41,30 @@ const getArrowPosition = (anchorOrigin, transformOrigin, translate) => {
     return 'top';
   }
 };
+
 const calPosition = (position, originBounding) => {
   const {
     width,
     height
   } = originBounding;
+
   switch (position) {
     case 'bottom':
     case 'right':
       {
         return [height, width];
       }
+
     case 'center':
       {
         return [height / 2, width / 2];
       }
+
     default:
       return [0, 0];
   }
 };
+
 const getDirectionPopover = direction => {
   switch (direction) {
     case 'center':
@@ -71,6 +78,7 @@ const getDirectionPopover = direction => {
           horizontal: 'center'
         }
       };
+
     case 'top':
       return {
         anchorOrigin: {
@@ -82,6 +90,7 @@ const getDirectionPopover = direction => {
           horizontal: 'center'
         }
       };
+
     case 'left':
       return {
         anchorOrigin: {
@@ -93,6 +102,7 @@ const getDirectionPopover = direction => {
           horizontal: 'right'
         }
       };
+
     case 'right':
       return {
         anchorOrigin: {
@@ -104,6 +114,7 @@ const getDirectionPopover = direction => {
           horizontal: 'left'
         }
       };
+
     default:
       return {
         anchorOrigin: {
@@ -117,6 +128,7 @@ const getDirectionPopover = direction => {
       };
   }
 };
+
 const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   anchor,
@@ -145,18 +157,25 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const overflow = useRef(null);
   const [openState, setOpenState] = useState(open);
   const [element, setElement] = useState(null);
+
   const _PortalPopoverCSS = PortalPopoverCSS(zIndex, fullScreen);
+
   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;
@@ -164,96 +183,116 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       setOpenState(false);
     }
   };
+
   const pressESCHandler = event => {
     if (event.key === 'Escape') {
       onClosePopover();
     }
   };
+
   const onClickOutside = event => {
     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.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.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, 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;
+
     if (el instanceof Element) setElement(el);
+
     if (!ref.current) {
       window.removeEventListener('resize', updatePositionPopover);
       return;
     }
+
     let top = 0,
-      left = 0,
-      vertical = 0,
-      verticalCenter = 0,
-      horizontal = 0,
-      horizontalCenter = 0,
-      arrowPosition = {},
-      translate = {
-        left: 0,
-        top: 0
-      },
-      anchorRect = null,
-      aPosition = '',
-      newDirectionObject = null;
+        left = 0,
+        vertical = 0,
+        verticalCenter = 0,
+        horizontal = 0,
+        horizontalCenter = 0,
+        arrowPosition = {},
+        translate = {
+      left: 0,
+      top: 0
+    },
+        anchorRect = null,
+        aPosition = '',
+        newDirectionObject = null;
+
     if (transformOrigin === 'center') {
       transformOrigin = {
         vertical: 'center',
         horizontal: 'center'
       };
     }
+
     if (element || anchor) {
       if (element) anchor = element;else if (anchor && !(anchor instanceof Element)) {
         var _anchor5, _anchor$current;
+
         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 (!anchor) return;
+
       if (arrow && anchorOrigin.vertical !== anchorOrigin.horizontal && transformOrigin.vertical !== transformOrigin.horizontal) {
         aPosition = getArrowPosition(anchorOrigin, transformOrigin, translate);
       }
+
       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
+
 
-    // Calculate element positioning
     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 - popoverHeight / 2;
         break;
+
       case 'bottom':
         top = vertical - popoverHeight;
         break;
+
       default:
         top = vertical;
         break;
     }
+
     switch (transformOrigin.horizontal) {
       case 'center':
         left = horizontal - popoverWidth / 2;
         break;
+
       case 'right':
         left = horizontal - popoverWidth;
         break;
+
       default:
         left = horizontal;
         break;
-    }
+    } // Variables for check if needs shifting
+
 
-    // 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);
@@ -263,9 +302,8 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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);
+    const rightPos = ((_anchorRect4 = anchorRect) === null || _anchorRect4 === void 0 ? void 0 : _anchorRect4.left) - (popoverWidth + arrowSize); // Check if the vertical axis needs shifting
 
-    // Check if the vertical axis needs shifting
     if (top < marginThreshold) {
       if (topPos > heightThreshold) {
         top = verticalCenterPos;
@@ -286,9 +324,9 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         newDirectionObject = getDirectionPopover('top');
         aPosition = getArrowPosition(newDirectionObject.anchorOrigin, newDirectionObject.transformOrigin, translate);
       }
-    }
+    } // Check if the horizontal axis needs shifting
+
 
-    // Check if the horizontal axis needs shifting
     if (left < marginThreshold) {
       if (leftPos > widthThreshold) {
         left = horizontalCenterPos;
@@ -309,46 +347,58 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         newDirectionObject = getDirectionPopover('left');
         aPosition = getArrowPosition(newDirectionObject.anchorOrigin, newDirectionObject.transformOrigin, translate);
       }
-    }
+    } // Valid mean popover not at top-left, top-right, bottom-left, bottom-right
+
 
-    // Valid mean popover not at top-left, top-right, bottom-left, bottom-right
     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;
+    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
 
-    // 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':
           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':
           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;
       }
+
       if (arrowRef.current) {
         Object.assign(arrowRef.current.style, arrowPosition, {
           transform: translate.transform,
@@ -356,19 +406,23 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         });
       }
     }
+
     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 = e => {
     if (!openState) {
       onOpenPopover();
@@ -376,19 +430,23 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClickOutside(e);
     }
   };
+
   useEffect(() => {
     return () => {
       if (pressESCToClose) {
         document.removeEventListener('keydown', pressESCHandler);
       }
+
       document.removeEventListener('click', onClickOutside);
       window.removeEventListener('resize', updatePositionPopover);
     };
   }, []);
   useEffect(() => {
     var _anchor8, _anchor9;
+
     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) {
       eventArr.forEach(evt => anchorEl.addEventListener(evt, handleEventTrigger, false));
       return () => {
@@ -402,25 +460,27 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (openState && ref.current) {
       overflow.current = document.body.style.overflow; // store overflow of <body /> before open
-      document.body.style.overflow = 'hidden';
-      // Position's anchor
-      updatePositionPopover();
 
-      // Allow press ESC to close popup
+      document.body.style.overflow = 'hidden'; // Position's anchor
+
+      updatePositionPopover(); // Allow press ESC to close popup
+
       if (pressESCToClose) {
         document.addEventListener('keydown', pressESCHandler);
-      }
-      // Click out popover to close popover
-      document.addEventListener('click', onClickOutside);
+      } // Click out popover to close popover
+
+
+      document.addEventListener('click', onClickOutside); // Update position popover on resize
 
-      // Update position popover on resize
       window.addEventListener('resize', updatePositionPopover);
       if (trigger === 'hover') ref.current.addEventListener('mouseleave', handleEventTrigger, false);
       return () => {
         document.body.style.overflow = overflow.current; // reset overflow of <body /> before open
+
         if (pressESCToClose) {
           document.removeEventListener('keydown', pressESCHandler);
         }
+
         document.removeEventListener('click', onClickOutside);
         window.removeEventListener('resize', updatePositionPopover);
         if (trigger === 'hover' && ref.current) ref.current.removeEventListener('mouseleave', handleEventTrigger, false);
@@ -447,20 +507,28 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       setPosition: el => updatePositionPopover(el),
       ...action
     }; // methods
+
     _instance.__proto__ = {
       hide: () => onClosePopover()
     }; // hidden methods
+
     currentRef.instance = _instance;
+
     currentRef.show = el => {
       if (el) setElement(el);
       !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover();
     };
+
     currentRef.close = onClosePopover;
+
     currentRef.setPosition = el => updatePositionPopover(el);
+
     return currentRef;
   });
+
   const renderAnchor = () => {
     var _anchor10, _anchor11, _anchor11$props;
+
     if (!((_anchor10 = anchor) !== null && _anchor10 !== void 0 && _anchor10.type)) return null;
     const AnchorTag = /*#__PURE__*/React.cloneElement(anchor, {
       ref: ref => {
@@ -473,6 +541,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     });
     return AnchorTag;
   };
+
   const PopoverView = useMemo(() => {
     if (openState) {
       const node = jsx("div", {
@@ -489,16 +558,19 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }));
       return /*#__PURE__*/createPortal(node, document.body);
     }
+
     return null;
   }, [openState, arrow, bgColor, children, className, clickOutsideToClose, fullScreen, height, style, width, zIndex]);
   return jsx(React.Fragment, null, renderAnchor(), PopoverView);
 }));
+
 const PortalPopoverCSS = (zIndex, fullScreen) => css`
     ${positionFixed};
     z-index: ${zIndex};
     pointer-events: ${fullScreen ? 'initial' : 'none'};
     inset: 0;
 `;
+
 const PopoverContainerCSS = (bgColor, width, height) => css`
     ${flexCol};
     ${positionRelative};
@@ -515,6 +587,7 @@ const PopoverContainerCSS = (bgColor, width, height) => css`
     background-color: ${bgColor};
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 `;
+
 const PopoverArrowCSS = bgColor => css`
     ${displayBlock};
     ${positionAbsolute};
@@ -523,6 +596,7 @@ const PopoverArrowCSS = bgColor => css`
     border-right: 6px solid transparent;
     border-bottom: 6px solid ${bgColor};
 `;
+
 Popover.defaultProps = {
   anchorOrigin: {
     vertical: 'bottom',
@@ -548,67 +622,85 @@ Popover.defaultProps = {
 Popover.propTypes = {
   /** If `true`, the component is shown. */
   open: PropTypes.bool,
+
   /** 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, ref]),
-  /**
-   * This is the point on the anchor where the popover's anchor will attach to.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+
+  /**
+   * This is the point on the anchor where the popover's anchor will attach to.
+   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
    */
   anchorOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
     vertical: PropTypes.oneOf(['bottom', 'center', 'top'])
   }),
+
   /** If `true`, arrow is shown. */
   arrow: PropTypes.bool,
+
   /** Background color of the component. */
   bgColor: PropTypes.string,
+
   /** The content of the component. */
   children: PropTypes.node,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** If `true`, click outside will close component. */
   clickOutsideToClose: PropTypes.bool,
-  /**
-   * Direction when Popover shown.
-   * Note: This prop will overwrite anchorOrigin & transformOrigin.
-   *
-   * * 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' }
-   * * bottom: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
+
+  /**
+   * Direction when Popover shown.
+   * Note: This prop will overwrite anchorOrigin & transformOrigin.
+   *
+   * * 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' }
+   * * 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,
+
   /** If `true`, hitting escape will close component. */
   pressESCToClose: PropTypes.bool,
+
   /** Style inline of component. */
   style: PropTypes.object,
-  /**
-   * This is the point on the popover which will attach to the anchor's origin.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+
+  /**
+   * This is the point on the popover which will attach to the anchor's origin.
+   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
    */
   transformOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
     vertical: PropTypes.oneOf(['bottom', 'center', 'top'])
   }),
+
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /** Config z-index of the component. */
   zIndex: PropTypes.number,
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * show: Show popover
-   * * close: Close popover
-   * * setPosition(element): Set position of popover
-   *  * @param {element} - element
+
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * show: Show popover
+   * * close: Close popover
+   * * setPosition(element): Set position of popover
+   *  * @param {element} - element
    */
   reference: ref
 };

package/components/popup/danger_popup.js

@@ -1,5 +1,7 @@
 /* eslint-disable react/prop-types */
+
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -9,6 +11,7 @@ import { Button } from "../";
 import { renderHTML } from "../../utils";
 import { Warning } from "../../icons";
 import { typography } from "../../styles/typography";
+
 const DangerPopup = ({
   open,
   warningText,
@@ -75,14 +78,18 @@ const DangerPopup = ({
             }
         }
     `;
+
   const onConfirmHandler = () => {
     if (onConfirm) onConfirm();
   };
+
   const onCancelHandler = () => {
     if (onCancel) onCancel();
   };
+
   useEffect(() => {
     let timer = null;
+
     if (open) {
       setTimeout(() => {
         if (popupActionRef.current) {
@@ -101,12 +108,14 @@ const DangerPopup = ({
               clearInterval(timer);
               return;
             }
+
             time--;
             childNode.textContent = `${confirmText} (${time}s)`;
           }, 1000);
         }
       }, 0);
     }
+
     return () => {
       if (open && popupActionRef.current) {
         const button = popupActionRef.current.querySelector('button.button-confirm');
@@ -118,6 +127,7 @@ const DangerPopup = ({
           childNode.textContent = confirmText;
         }, 300);
       }
+
       if (timer) clearInterval(timer);
     };
   }, [open]);
@@ -155,6 +165,7 @@ const DangerPopup = ({
     onClick: onCancelHandler
   }, cancelText))));
 };
+
 DangerPopup.defaultProps = {
   warningText: 'CẢNH BÁO NGUY HIỂM',
   warningIconColor: '#E7000F',
@@ -168,20 +179,28 @@ DangerPopup.defaultProps = {
 DangerPopup.propTypes = {
   /** the title of Popup */
   warningText: PropTypes.string,
+
   /** the title of Popup */
   warningIconColor: PropTypes.string,
+
   /** the content to description for warning title */
   warningDescription: PropTypes.string,
+
   /** the content to display in confirm button */
   confirmText: PropTypes.string,
+
   /** the content to display in cancel button */
   cancelText: PropTypes.string,
+
   /** the color of button when timing */
   buttonTimingColor: PropTypes.string,
+
   /** the period to prevent click confirm button */
   timing: PropTypes.number,
+
   /** the function run when click confirm button */
   onConfirm: PropTypes.func,
+
   /** the function run when click cancel button */
   onCancel: PropTypes.func
 };