diginet-core-ui 1.3.65 → 1.3.66

package/components/popover/index.js

@@ -5,7 +5,8 @@ import React, { memo, useState, useEffect, useMemo, useRef, forwardRef, useImper
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { borderRadius4px, displayBlock, flexRow, parseWidthHeight, positionAbsolute, positionFixed, positionRelative } from '../../styles/general';
+import OptionWrapper from '../others/option-wrapper';
+import { borderRadius4px, displayBlock, flexCol, flexRow, overflowAuto, parseWidthHeight, positionAbsolute, positionRelative } from '../../styles/general';
 import theme from '../../theme/settings';
 const {
   colors: {
@@ -18,6 +19,7 @@ const {
   },
   zIndex: zIndexCORE
 } = theme;
+const eventMap = new Map([['click', ['click']], ['hover', ['mouseenter', 'mouseleave']], ['focus', ['focus', 'blur']]]);
 
 const getArrowPosition = (anchorOrigin, transformOrigin, translate) => {
   if (anchorOrigin.horizontal === 'right' && transformOrigin.horizontal === 'left') {
@@ -114,22 +116,23 @@ const getDirectionPopover = direction => {
 };
 
 const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  open,
-  pressESCToClose,
-  fullScreen,
-  arrow,
-  style,
   anchor,
   anchorOrigin,
-  transformOrigin,
+  arrow,
+  bgColor,
+  children,
+  clickOutsideToClose,
   direction,
-  width,
+  fullScreen,
   height,
-  bgColor,
   onClose,
-  zIndex,
-  children,
-  ...props
+  open,
+  pressESCToClose,
+  style,
+  transformOrigin,
+  trigger,
+  width,
+  zIndex
 }, reference) => {
   const ref = useRef(null);
   const [openState, setOpenState] = useState(open);
@@ -151,7 +154,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const onClosePopover = () => {
     if (openState) {
-      ref.current.style.opacity = 0;
+      if (ref.current) ref.current.style.opacity = 0;
       onClose && onClose();
       setOpenState(false);
     }
@@ -163,13 +166,17 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  const clickOutOfPopover = event => {
+  const onClickOutside = event => {
+    var _anchor2, _anchor2$current, _anchor3, _ref$current, _ref$current2, _ref$current2$parentN;
+
     if (!ref.current) {
-      document.removeEventListener('click', clickOutOfPopover);
+      document.removeEventListener('click', onClickOutside);
       return;
     }
 
-    if (!ref.current.contains(event.target) && (!fullScreen || ref.current.parentNode.contains(event.target)) && openState) {
+    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;
+
+    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) {
       onClosePopover();
     }
   };
@@ -295,16 +302,38 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref.current.style.opacity = 1;
   };
 
+  const handleEventTrigger = () => {
+    if (!openState) {
+      setOpenState(true);
+    } else {
+      onClose && onClose();
+      setOpenState(false);
+    }
+  };
+
   useEffect(() => {
     return () => {
       if (pressESCToClose) {
         document.removeEventListener('keydown', pressESCHandler);
       }
 
-      document.removeEventListener('click', clickOutOfPopover);
+      document.removeEventListener('click', onClickOutside);
       window.removeEventListener('resize', updatePositionPopover);
     };
   }, []);
+  useEffect(() => {
+    var _anchor4, _anchor5;
+
+    const anchorEl = ((_anchor4 = anchor) === null || _anchor4 === void 0 ? void 0 : _anchor4.element) || ((_anchor5 = anchor) === null || _anchor5 === void 0 ? void 0 : _anchor5.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 () => {
+        eventArr.forEach(evt => anchorEl.removeEventListener(evt, handleEventTrigger, false));
+      };
+    }
+  }, [trigger, openState]);
   useEffect(() => {
     if (open !== undefined) setOpenState(open);
   }, [open]);
@@ -318,7 +347,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       } // Click out popover to close popover
 
 
-      document.addEventListener('click', clickOutOfPopover); // Update position popover on resize
+      document.addEventListener('click', onClickOutside); // Update position popover on resize
 
       window.addEventListener('resize', updatePositionPopover);
       return () => {
@@ -326,42 +355,36 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           document.removeEventListener('keydown', pressESCHandler);
         }
 
-        document.removeEventListener('click', clickOutOfPopover);
+        document.removeEventListener('click', onClickOutside);
         window.removeEventListener('resize', updatePositionPopover);
       };
     } else if (!openState) {
       document.documentElement.style.overflow = 'auto';
     }
   }, [openState]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {
+  useEffect(() => {
+    clickOutsideToClose ? document.addEventListener('click', onClickOutside) : document.removeEventListener('click', onClickOutside);
+  }, [clickOutsideToClose]);
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {
       show: () => setOpenState(true),
       close: () => onClosePopover(),
       setPosition: el => updatePositionPopover(el)
-    }; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-
-    currentRef.show = () => setOpenState(true);
-
-    currentRef.close = () => onClosePopover();
-
-    currentRef.setPosition = el => updatePositionPopover(el);
-
-    return currentRef;
-  });
+    },
+    show: () => setOpenState(true),
+    close: () => onClosePopover(),
+    setPosition: el => updatePositionPopover(el)
+  }));
 
   const renderAnchor = () => {
-    var _anchor;
+    var _anchor6;
 
-    if (!((_anchor = anchor) !== null && _anchor !== void 0 && _anchor.type)) return null;
+    if (!((_anchor6 = anchor) !== null && _anchor6 !== void 0 && _anchor6.type)) return null;
     const AnchorTag = /*#__PURE__*/React.cloneElement(anchor, {
-      onClick: () => {
-        setOpenState(true);
-      },
+      // onClick: () => {
+      //     setOpenState(true);
+      // },
       ref: ref => {
         anchor = ref;
       }
@@ -372,28 +395,29 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const PopoverView = useMemo(() => {
     if (openState) {
       const node = jsx("div", {
-        className: 'DGN-UI-Portal DGN-UI-Popover',
-        css: _PortalPopoverCSS
+        css: _PortalPopoverCSS,
+        className: 'DGN-UI-Portal DGN-UI-Popover'
       }, jsx("div", {
         css: _PopoverContainerCSS,
         ref: ref,
-        ...props
+        className: 'DGN-UI-Popover-Container'
       }, jsx("div", {
         css: _PopoverRootCSS,
-        style: style
-      }, arrow && jsx("span", {
+        style: style,
+        className: 'DGN-UI-Popover-Root'
+      }, children), arrow && jsx("span", {
         css: _PopoverArrowCSS
-      }), children)));
+      })));
       return /*#__PURE__*/createPortal(node, document.body);
     }
 
     return null;
-  }, [openState, zIndex, fullScreen, style, arrow, children, width, height, bgColor]);
+  }, [openState, zIndex, fullScreen, style, arrow, children, width, height, bgColor, clickOutsideToClose]);
   return jsx(React.Fragment, null, renderAnchor(), PopoverView);
 }));
 
 const PortalPopoverCSS = (zIndex, fullScreen) => css`
-    ${positionFixed};
+    ${positionAbsolute};
     z-index: ${zIndex};
     pointer-events: ${fullScreen ? 'initial' : 'none'};
     inset: 0;
@@ -401,7 +425,7 @@ const PortalPopoverCSS = (zIndex, fullScreen) => css`
 
 const PopoverContainerCSS = (width, height) => css`
     ${flexRow};
-    ${positionFixed};
+    ${positionAbsolute};
     ${parseWidthHeight(width, height)};
     max-width: 100%;
     max-height: 100%;
@@ -412,8 +436,9 @@ const PopoverContainerCSS = (width, height) => css`
 `;
 
 const PopoverRootCSS = bgColor => css`
-    ${displayBlock};
+    ${flexCol};
     ${positionRelative};
+    ${overflowAuto};
     ${borderRadius4px};
     ${paragraph1};
     background-color: ${bgColor};
@@ -425,19 +450,19 @@ const PopoverRootCSS = bgColor => css`
 const PopoverArrowCSS = bgColor => css`
     ${displayBlock};
     ${positionAbsolute};
-    height: 0;
-    width: 0;
+    ${parseWidthHeight(0)};
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
     border-bottom: 6px solid ${bgColor};
 `;
 
 Popover.defaultProps = {
+  clickOutsideToClose: true,
   pressESCToClose: true,
-  fullScreen: true,
+  fullScreen: false,
   arrow: false,
-  width: 150,
-  height: 'auto',
+  width: 'max-content',
+  height: 'max-content',
   bgColor: white,
   zIndex: zIndexCORE(1),
   anchorOrigin: {
@@ -448,23 +473,15 @@ Popover.defaultProps = {
     vertical: 'top',
     horizontal: 'center'
   },
-  style: {}
+  style: {},
+  trigger: 'click'
 };
 Popover.propTypes = {
   /** If `true`, the component is shown. */
   open: PropTypes.bool,
 
-  /** If `true`, arrow is shown. */
-  arrow: PropTypes.bool,
-
-  /** allow close Popover when press ESC. */
-  pressESCToClose: PropTypes.bool,
-
-  /** background color of Popover. */
-  bgColor: PropTypes.string,
-
-  /** style inline of component. */
-  style: PropTypes.object,
+  /** Trigger mode of the component. Will not work if 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]),
@@ -478,14 +495,17 @@ Popover.propTypes = {
     vertical: PropTypes.oneOf(['bottom', 'center', 'top'])
   }),
 
-  /**
-   * 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'])
-  }),
+  /** If `true`, arrow is shown. */
+  arrow: PropTypes.bool,
+
+  /** Background color of the component. */
+  bgColor: PropTypes.string,
+
+  /** The content of the component. */
+  children: PropTypes.node,
+
+  /** If `true`, click outside will close component. */
+  clickOutsideToClose: PropTypes.bool,
 
   /**
    * Direction when Popover shown.
@@ -498,20 +518,32 @@ Popover.propTypes = {
    */
   direction: PropTypes.oneOf(['top', 'left', 'right', 'bottom']),
 
-  /** width of popover */
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** height of popover */
+  /** Height of the component. */
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-  /** z-index of popover */
-  zIndex: PropTypes.number,
-
   /** Callback fired when the component requests to be closed. */
   onClose: PropTypes.func,
 
-  /** The content of the component. */
-  children: PropTypes.node,
+  /** 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].
+   */
+  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*)
@@ -525,4 +557,5 @@ Popover.propTypes = {
     current: PropTypes.instanceOf(Element)
   })])
 };
-export default Popover;
+export { Popover };
+export default OptionWrapper(Popover);

package/components/popup/danger_popup.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/prop-types */
+
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -27,7 +29,7 @@ const DangerPopup = ({
   const popupActionRef = useRef(null);
   const popupStyles = {
     backgroundColor: '#FFDCD8',
-    color: "#E7000F",
+    color: '#E7000F',
     width: 486,
     height: 'max-content',
     ...popupStyle

package/components/popup/index.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import React, { memo, useEffect, useMemo, useRef, forwardRef, useState } from 'react';
-import ReactDOM, { createPortal } from 'react-dom';
+import { memo, useEffect, useMemo, useRef, forwardRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css, keyframes } from '@emotion/core';
 import { Button, ButtonIcon, Typography } from '../';

package/components/popup/proposals_popup.js

@@ -99,6 +99,7 @@ const ProposalsPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onProposals = () => {
+    // eslint-disable-next-line no-undef
     const input = PopupInputRef.current.querySelector('input');
 
     if (/^cancel$/i.test(type)) {

package/components/progress/circular.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-unused-vars */
+
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -63,8 +65,8 @@ const getDimension = size => {
     strokeWidth
   };
 };
-/**
- * Determinate circular progress
+/**
+ * Determinate circular progress
  */
 
 
@@ -113,8 +115,8 @@ const Determinate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     return angle;
   };
-  /**
-   * style
+  /**
+   * style
    */
 
 
@@ -216,8 +218,8 @@ Determinate.propTypes = {
   width: PropTypes.number
 };
 export const DeterminateCircularProgress = Determinate;
-/**
- * Indeterminate circular progress
+/**
+ * Indeterminate circular progress
  */
 
 const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -254,8 +256,8 @@ const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             stroke-dashoffset: -${r * 124 / 200};
         }
     `;
-  /**
-   * style
+  /**
+   * style
    */
 
 
@@ -286,8 +288,8 @@ const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             stroke-linecap: round;
             stroke-width: ${circleStrokeW};
         `;
-  /**
-   * component
+  /**
+   * component
    */
 
   const CircleBackgroundMemo = useMemo(() => jsx("circle", {
@@ -330,8 +332,8 @@ Indeterminate.propTypes = {
   width: PropTypes.number
 };
 export const IndeterminateCircularProgress = Indeterminate;
-/**
- * Circular progress
+/**
+ * Circular progress
  */
 
 const CircularProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({