diginet-core-ui 1.3.24 → 1.3.29

package/components/popup/danger_popup.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || 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); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -10,7 +8,7 @@ import Popup from './';
 import { Button } from '../';
 import { renderHTML } from '../../utils';
 import { Warning } from '../../icons';
-import theme from '../../theme/settings';
+import { typography } from '../../styles/typography';
 
 const DangerPopup = ({
   open,
@@ -52,20 +50,12 @@ const DangerPopup = ({
             margin-right: 13px;
         }
         .popup-title {
-            font-family: ${theme.typography.fontFamily};
-            font-style: normal;
-            font-weight: bold;
-            font-size: 20px;
-            line-height: 22px;
+            ${typography.heading1};
             color: inherit;
         }
     `;
   const PopupWarning = css`
-        font-family: ${theme.typography.fontFamily};
-        font-style: normal;
-        font-weight: 500;
-        font-size: 16px;
-        line-height: 22px;
+        ${typography.paragraph1};
         text-align: center;
         color: inherit;
     `;
@@ -75,8 +65,7 @@ const DangerPopup = ({
         justify-content: space-between;
         button {
             min-width: 176px;
-            font-size: 14px;
-            font-family: ${theme.typography.fontFamily};
+            ${typography.paragraph1};
             &.button-confirm {
                 &.popup-timing {
                     color: ${buttonTimingColor};
@@ -140,11 +129,12 @@ const DangerPopup = ({
       if (timer) clearInterval(timer);
     };
   }, [open]);
-  return jsx(Popup, _extends({
+  return jsx(Popup, {
     popupStyle: popupStyles,
     type: 'custom',
-    open: open
-  }, props), jsx("div", {
+    open: open,
+    ...props
+  }, jsx("div", {
     css: PopupContent
   }, jsx("div", {
     css: PopupInfo

package/components/popup/index.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || 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); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -7,15 +5,16 @@ import React, { memo, useEffect, useMemo, useRef, forwardRef, useState } from 'r
 import ReactDOM, { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css, keyframes } from '@emotion/core';
-import { Button, Typography } from '../';
-import Icon, { Info, Archive, Warning, Failed } from '../../icons';
+import { Button, ButtonIcon, Typography } from '../';
+import { Info, ApprovalFilled, Warning, Failed } from '../../icons';
 import theme from '../../theme/settings';
 import { getGlobal } from '../../global';
+import { typography } from '../../styles/typography';
 export const icons = {
   info: jsx(Info, {
     viewBox: true
   }),
-  success: jsx(Archive, {
+  success: jsx(ApprovalFilled, {
     viewBox: true
   }),
   warning: jsx(Warning, {
@@ -140,8 +139,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             color: inherit;
             text-align: center;
             align-items: center;
-            font-family: ${theme.typography.fontFamily};
-            font-size: 16px;
+            ${typography.paragraph1};
         }
     `;
   const PopupYesNo = css`
@@ -204,23 +202,23 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'popup-title'
     }, jsx(Typography, null, message))), /(yes.*?no)|(confirm)/i.test(type) && jsx("div", {
       css: PopupYesNo
-    }, jsx(Button, _extends({
+    }, jsx(Button, {
       viewType: 'filled',
       color: 'info',
       style: {
         minWidth: 104
-      }
-    }, confirmProps, {
+      },
+      ...confirmProps,
       onClick: confirmHandler
-    }), /confirm/i.test(type) ? confirmText : yesText), jsx(Button, _extends({
+    }, /confirm/i.test(type) ? confirmText : yesText), jsx(Button, {
       viewType: 'outlined',
       style: {
         minWidth: 104,
         marginLeft: 24
-      }
-    }, cancelProps, {
+      },
+      ...cancelProps,
       onClick: cancelHandler
-    }), /confirm/i.test(type) ? cancelText : noText)));
+    }, /confirm/i.test(type) ? cancelText : noText)));
     setCustom(newContent);
     setOpenState(true);
   };
@@ -323,12 +321,12 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: 'DGN-UI-Portal',
     ref: ref,
     style: style
-  }, jsx("div", _extends({
-    css: PopupFrame
-  }, props, {
+  }, jsx("div", {
+    css: PopupFrame,
+    ...props,
     style: popupStyle,
     className: 'DGN-UI-Popup ' + className
-  }), custom ? custom : /^custom$/i.test(type) ? children : jsx("div", {
+  }, custom ? custom : /^custom$/i.test(type) ? children : jsx("div", {
     css: PopupContent,
     className: 'DGN-UI-Popup-Content'
   }, jsx("div", {
@@ -339,35 +337,29 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: 'popup-title'
   }, jsx(Typography, null, title))), /(yes.*?no)|(confirm)/i.test(type) && jsx("div", {
     css: PopupYesNo
-  }, jsx(Button, _extends({
+  }, jsx(Button, {
     viewType: 'filled',
     color: 'info',
     style: {
       minWidth: 104
-    }
-  }, confirmProps, {
+    },
+    ...confirmProps,
     onClick: onConfirmHandler
-  }), /confirm/i.test(type) ? confirmText : yesText), jsx(Button, _extends({
+  }, /confirm/i.test(type) ? confirmText : yesText), jsx(Button, {
     viewType: 'outlined',
     style: {
       minWidth: 104,
       marginLeft: 24
-    }
-  }, cancelProps, {
+    },
+    ...cancelProps,
     onClick: onCancelHandler
-  }), /confirm/i.test(type) ? cancelText : noText))), (clearAble || /info/i.test(type)) && jsx("div", {
+  }, /confirm/i.test(type) ? cancelText : noText))), (clearAble || /info/i.test(type)) && jsx("div", {
     css: PopupClearIcon,
     style: clearIconStyle
-  }, jsx(Icon, {
+  }, jsx(ButtonIcon, {
+    viewType: 'ghost',
     name: 'close',
-    width: "12",
-    height: "12",
-    color: "currentColor",
-    onClick: e => onClosePopup(custom === false ? false : e),
-    style: {
-      width: '100%',
-      height: '100%'
-    }
+    onClick: e => onClosePopup(custom === false ? false : e)
   })))), document.body), [openState, custom, title, icon, type, onClose, onConfirm, onCancel]);
   return Popup;
 }));

package/components/popup/proposals_popup.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || 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); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -7,8 +5,8 @@ import { memo, useEffect, useMemo, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import theme from '../../theme/settings';
-import { Button } from '../';
-import Icon, { Close, Approval } from '../../icons';
+import { Button, ButtonIcon } from '../';
+import { Close, Approval } from '../../icons';
 import TextInput from '../form-control/text-input';
 const ProposalsPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   open,
@@ -273,25 +271,20 @@ const ProposalsPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [type, buttonText, disabled]);
   const popupClearIcon = useMemo(() => clearAble && jsx("div", {
     css: PopupClearIcon
-  }, jsx(Icon, {
+  }, jsx(ButtonIcon, {
+    viewType: 'ghost',
     name: 'Close',
-    width: "12",
-    height: "12",
-    onClick: onClosePopup,
-    style: {
-      width: '100%',
-      height: '100%'
-    }
+    onClick: onClosePopup
   })), [clearAble]);
   return jsx("div", {
     css: PopupContainer,
     ref: ref,
     style: style
-  }, jsx("div", _extends({
-    css: PopupFrame
-  }, props, {
+  }, jsx("div", {
+    css: PopupFrame,
+    ...props,
     style: popupStyle
-  }), jsx("div", {
+  }, jsx("div", {
     css: PopupContent
   }, popupInput, popupAction), popupClearIcon));
 }));

package/components/popup/v2/danger-popup.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || 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); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -8,10 +6,10 @@ import { memo, forwardRef } from 'react';
 import PopupV2 from '.';
 const DangerPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({ ...props
 }, ref) => {
-  return jsx(PopupV2, _extends({
-    ref: ref
-  }, props, {
+  return jsx(PopupV2, {
+    ref: ref,
+    ...props,
     type: 'danger'
-  }));
+  });
 }));
 export default DangerPopup;

package/components/popup/v2/index.js

@@ -1,49 +1,68 @@
-function _extends() { _extends = Object.assign || 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); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useEffect, useRef, useState, forwardRef, useImperativeHandle, Fragment } from 'react';
+import { memo, useEffect, useRef, useState, forwardRef, useImperativeHandle, Fragment, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { bool, oneOf, oneOfType, string, func, object, number, node, shape, instanceOf, elementType } from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { Button, Typography } from '../../';
-import { Close, Info, Archive, Warning, Failed } from '../../../icons';
+import { Button, ButtonIcon, Typography } from '../../';
+import { Info, ApprovalFilled, Warning, Failed } from '../../../icons';
 import { getGlobal } from '../../../global';
-import { lighten } from '../../../styles/color-helper';
-import { useTheme } from '../../../theme';
+import { hexToRGBA } from '../../../styles/color-helper';
 import { capitalize, renderIcon } from '../../../utils';
 import { animations } from '../../../styles/animation';
+import { color as colors } from '../../../styles/colors';
+import { alignCenter, border, borderBox, borderRadius4px, cursorPointer, displayBlock, ellipsis, flexCol, flexRow, justifyCenter, justifyEnd, overflowHidden, positionFixed, positionRelative } from '../../../styles/general';
 const {
-  colors
-} = useTheme();
+  system: {
+    white
+  },
+  semantic: {
+    success,
+    warning,
+    danger,
+    info
+  },
+  fill: {
+    'scrollbar-tabbar': scrollbar,
+    hover
+  }
+} = colors;
 export const icons = {
   yesno: jsx(Info, {
     viewBox: true,
     width: 40,
-    height: 40
+    height: 40,
+    color: info
   }),
   info: jsx(Info, {
     viewBox: true,
     width: 40,
-    height: 40
+    height: 40,
+    color: info
   }),
-  success: jsx(Archive, {
+  success: jsx(ApprovalFilled, {
     viewBox: true,
     width: 40,
-    height: 40
+    height: 40,
+    color: success
   }),
   warning: jsx(Warning, {
     viewBox: true,
     width: 40,
-    height: 40
+    height: 40,
+    color: warning
   }),
   danger: jsx(Failed, {
     viewBox: true,
     width: 40,
-    height: 40
+    height: 40,
+    color: danger
   })
 };
+const colorMap = new Map([['yesno', info], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
+const fadeInDown = animations.fadeInDown;
+const fadeOutUp = animations.fadeOutUp;
 const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   open,
   type,
@@ -70,16 +89,15 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [openState, setOpenState] = useState(open);
   const [custom, setCustom] = useState(null);
   const [showMoreDescription, setShowMoreDescription] = useState(false);
-  const fadeInDown = animations.fadeInDown;
-  const fadeOutUp = animations.fadeOutUp;
+  const [descriptionLines, setDescriptionLines] = useState(0);
   const PopupRoot = css`
-        display: flex;
-        position: fixed;
+        ${flexRow}
+        ${positionFixed}
+        ${justifyCenter}
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
-        justify-content: center;
         inset: 0;
         background-color: rgba(21, 26, 48, 0.5);
         opacity: 0;
@@ -87,16 +105,15 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         z-index: 9002;
         word-break: break-word;
         .DGN-UI-Popup {
-            display: flex;
-            flex-direction: column;
+            ${flexCol}
+            ${borderRadius4px}
+            ${borderBox}
             width: ${isNaN(width) ? width : width + 'px'};
             height: fit-content;
             max-width: 80%;
             max-height: 80%;
             margin: ${isNaN(top) ? top : top + 'px'} auto auto;
-            background-color: ${colors.white};
-            border-radius: 4px;
-            box-sizing: border-box;
+            background-color: ${white};
             box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
             animation: ${fadeOutUp} 0.2s ease;
             animation-fill-mode: forwards;
@@ -104,96 +121,80 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 animation-name: ${fadeInDown};
             }
             .DGN-UI-Popup-Header {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
+                ${flexRow}
+                ${alignCenter}
                 min-height: 40px;
-                padding: 0 16px;
+                padding: 0 8px 0 16px;
                 border-radius: 4px 4px 0px 0px;
                 .DGN-UI-Popup-Header-Title {
-                    display: flex;
+                    ${flexRow}
+                    ${ellipsis}
                     width: calc(100% - 24px);
-                    white-space: nowrap;
-                    overflow-x: hidden;
-                    text-overflow: ellipsis;
-                    font-weight: bold;
                 }
-                .DGN-UI-Popup-Header-Icon {
-                    display: block;
-                    width: 24px;
-                    height: 24px;
-                    cursor: pointer;
-                    transition: filter 0.1s linear;
-                    &:hover {
-                        filter: brightness(0.85);
-                    }
-                }
-                color: ${colors[type === 'yesno' ? 'info' : type]};
-                background-color: ${lighten(colors[type === 'yesno' ? 'info' : type], 0.85)};
+                color: ${colorMap.get(type)};
+                background-color: ${hexToRGBA(colorMap.get(type), 0.15)};
             }
             .DGN-UI-Popup-Body {
-                display: flex;
-                position: relative;
-                flex-direction: row;
+                ${flexRow}
+                ${positionRelative}
                 flex: 1 1 auto;
                 padding: 16px;
                 overflow: auto;
                 &::-webkit-scrollbar {
+                    ${borderRadius4px}
                     width: 24px;
                     background-color: #fff !important;
-                    border-radius: 4px;
                 }
                 &::-webkit-scrollbar-thumb {
+                    ${border(8, 'transparent')}
                     border-radius: 24px;
-                    border: 8px solid transparent;
                     mix-blend-mode: normal;
-                    background-color: ${colors.scrollbar} !important;
+                    background-color: ${scrollbar} !important;
                     background-clip: content-box;
                 }
                 &::-webkit-scrollbar-thumb:hover {
+                    ${border(8, 'transparent')}
                     border-radius: 24px;
-                    border: 8px solid transparent;
                     mix-blend-mode: normal;
-                    background-color: ${colors.scrollbarHover} !important;
+                    background-color: ${hover} !important;
                     background-clip: content-box;
                 }
                 .DGN-UI-Popup-Body-Icon {
-                    display: block;
+                    ${displayBlock}
                     width: 40px;
                     margin-right: 16px;
                     border-radius: 50%;
                 }
                 .DGN-UI-Popup-Body-Description {
-                    display: flex;
-                    position: relative;
+                    ${flexRow}
+                    ${positionRelative}
+                    ${alignCenter}
                     min-height: 40px;
                     height: max-content;
-                    align-items: center;
                     .DGN-UI-Popup-Body-Subtitle {
                         margin-bottom: ${(description === null || description === void 0 ? void 0 : description.length) > 0 ? '8px' : '0px'};
                     }
                     .DGN-UI-Popup-Body-Detail {
-                        overflow: hidden;
+                        ${overflowHidden}
                         text-overflow: ellipsis;
                         display: -webkit-box;
-                        -webkit-line-clamp: ${showMoreDescription ? 'none' : subtitle ? 1 : 3};
+                        -webkit-line-clamp: ${showMoreDescription ? 'none' : subtitle && descriptionLines > 1 ? 1 : descriptionLines > 3 ? 3 : 'none'};
                         -webkit-box-orient: vertical;
                     }
                     .DGN-More-Action {
-                        display: block;
+                        ${displayBlock}
+                        ${cursorPointer}
                         width: fit-content;
                         margin-top: 16px;
                         margin-bottom: ${type === 'yesno' ? '0px' : '8px'};
                         text-decoration: underline;
-                        color: ${colors.info};
-                        cursor: pointer;
+                        color: ${info};
                     }
                 }
             }
             .DGN-UI-Popup-Action {
-                display: flex;
-                flex-direction: row;
-                justify-content: flex-end;
+                ${flexRow}
+                ${justifyEnd}
                 padding: 8px 16px 16px 16px;
                 .DGN-UI-Button {
                     margin: 0;
@@ -247,14 +248,15 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         className: 'DGN-UI-Popup-Header ' + 'DGN-' + capitalize(newProps.type)
       }, jsx(Typography, {
         className: 'DGN-UI-Popup-Header-Title',
+        type: 'h3',
         color: 'inherit'
-      }, getTitle(newProps.title, newProps.type)), jsx("div", {
-        className: 'DGN-UI-Popup-Header-Icon',
+      }, getTitle(newProps.title, newProps.type)), jsx(ButtonIcon, {
+        circular: true,
+        viewType: 'text',
+        color: type === 'yesno' ? 'info' : type,
+        name: 'Close',
         onClick: () => onClosePopup()
-      }, jsx(Close, {
-        viewBox: true,
-        color: 'currentColor'
-      }))), jsx("div", {
+      })), jsx("div", {
         className: 'DGN-UI-Popup-Body'
       }, newProps.icon !== false && jsx("div", {
         className: 'DGN-UI-Popup-Body-Icon'
@@ -269,17 +271,19 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         type: 'p2'
       }, newProps.description))), (newProps.onConfirm || newProps.onCancel || newProps.type === 'yesno') && jsx("div", {
         className: 'DGN-UI-Popup-Action'
-      }, (newProps.onConfirm || newProps.type === 'yesno') && jsx(Button, _extends({
+      }, (newProps.onConfirm || newProps.type === 'yesno') && jsx(Button, {
         viewType: 'filled',
         label: newProps.yesText || getGlobal('ok').toUpperCase(),
         color: newProps.type,
-        onClick: newProps.onConfirm
-      }, newProps.confirmProps)), (newProps.onCancel || newProps.type === 'yesno') && jsx(Button, _extends({
+        onClick: newProps.onConfirm,
+        ...newProps.confirmProps
+      }), (newProps.onCancel || newProps.type === 'yesno') && jsx(Button, {
         viewType: 'outlined',
         label: newProps.noText || getGlobal('cancel').toUpperCase(),
         color: newProps.type,
-        onClick: newProps.onCancel
-      }, newProps.cancelProps))));
+        onClick: newProps.onCancel,
+        ...newProps.cancelProps
+      })));
       setCustom(popup);
     } else {
       setCustom(false);
@@ -290,6 +294,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const onClosePopup = (action = false) => {
     if (onClose && action) {
+      setOpenState(false);
       onClose();
     } else {
       if (ref.current) {
@@ -302,9 +307,17 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
+  const onRefChange = useCallback(node => {
+    if (node) {
+      setDescriptionLines(Math.round((node === null || node === void 0 ? void 0 : node.offsetHeight) / 18)); //18 is line-height of Typography p2
+
+      setShowMoreDescription(false);
+    }
+  }, []);
   useEffect(() => {
     if (open) {
       setOpenState(open);
+      setShowMoreDescription(true);
     } else {
       onClosePopup();
     }
@@ -322,30 +335,32 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, [openState]);
   useImperativeHandle(reference, () => {
-    const abc = ref.current || {};
-    abc.show = onShowPopup;
-    abc.close = onClosePopup;
-    return abc;
+    const currentRef = ref.current || {};
+    currentRef.show = onShowPopup;
+    currentRef.close = onClosePopup;
+    return currentRef;
   });
   return openState && /*#__PURE__*/createPortal(jsx("div", {
     css: PopupRoot,
     ref: ref,
     style: style,
     className: ('DGN-UI-Portal DGN-UI-Popup-Portal ' + className).trimRight()
-  }, jsx("div", _extends({
-    className: 'DGN-UI-Popup'
-  }, props), custom ? custom : jsx(Fragment, null, jsx("div", {
+  }, jsx("div", {
+    className: 'DGN-UI-Popup',
+    ...props
+  }, custom ? custom : jsx(Fragment, null, jsx("div", {
     className: 'DGN-UI-Popup-Header ' + 'DGN-' + capitalize(type)
   }, jsx(Typography, {
     className: 'DGN-UI-Popup-Header-Title',
+    type: 'h3',
     color: 'inherit'
-  }, getTitle(title)), jsx("div", {
-    className: 'DGN-UI-Popup-Header-Icon',
+  }, getTitle(title)), jsx(ButtonIcon, {
+    circular: true,
+    viewType: 'text',
+    color: type === 'yesno' ? 'info' : type,
+    name: 'Close',
     onClick: e => onClosePopup(custom === false ? false : e)
-  }, jsx(Close, {
-    viewBox: true,
-    color: 'currentColor'
-  }))), jsx("div", {
+  })), jsx("div", {
     className: 'DGN-UI-Popup-Body'
   }, icon !== false && jsx("div", {
     className: 'DGN-UI-Popup-Body-Icon'
@@ -362,30 +377,33 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: 'DGN-UI-Popup-Body-Subtitle',
     fullWidth: true
   }, subtitle), jsx(Typography, {
+    ref: onRefChange,
     type: 'p2',
     className: 'DGN-UI-Popup-Body-Detail'
-  }, description), description && typeof description === 'string' && (description === null || description === void 0 ? void 0 : description.length) > 62 && jsx("span", {
+  }, description), (subtitle && descriptionLines > 1 || descriptionLines > 3) && jsx("span", {
     className: 'DGN-More-Action',
     onClick: () => setShowMoreDescription(!showMoreDescription)
   }, getGlobal(showMoreDescription ? 'showLess' : 'showMore'))))), (onConfirm || onCancel || type === 'yesno') && jsx("div", {
     className: 'DGN-UI-Popup-Action'
-  }, (onConfirm || type === 'yesno') && jsx(Button, _extends({
+  }, (onConfirm || type === 'yesno') && jsx(Button, {
     viewType: 'filled',
     label: yesText || getGlobal('ok').toUpperCase(),
     color: type === 'yesno' ? 'info' : type,
     onClick: () => {
+      onClosePopup(true);
       onConfirm && onConfirm();
-      onClose();
-    }
-  }, confirmProps)), (onCancel || type === 'yesno') && jsx(Button, _extends({
+    },
+    ...confirmProps
+  }), (onCancel || type === 'yesno') && jsx(Button, {
     viewType: 'outlined',
     label: noText || getGlobal('cancel').toUpperCase(),
     color: type === 'yesno' ? 'info' : type,
     onClick: () => {
+      onClosePopup(true);
       onCancel && onCancel();
-      onClose();
-    }
-  }, cancelProps)))))), document.body);
+    },
+    ...cancelProps
+  }))))), document.body);
 }));
 Popup.defaultProps = {
   open: false,