diginet-core-ui 1.3.79-beta.4 → 1.3.80-beta.1

package/components/button/index.js

@@ -1,17 +1,15 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import { CircularProgress, Icon, Typography } from "./..";
+import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Typography } from "../";
-import Icon from "../../icons";
 import { detectColor, fade, hexToRGBA, hslToRgb, isColor, isColorName, rgbaToHexA, rgbToHex } from "../../styles/color-helper";
 import * as allColors from "../../styles/colors";
 import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, cursorPointer, flexRow, inlineFlex, justifyCenter, noBorder, noMargin, noPadding, outlineNone, overflowHidden, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
 import { useColor as colors, useTheme } from "../../theme";
 import { classNames, refType as ref } from "../../utils";
-import OptionWrapper from "../others/option-wrapper";
-import CircularProgress from "../progress/circular";
 import Ripple from "./ripple-effect";
 const {
   colors: {

package/components/divider/index.js

@@ -23,6 +23,7 @@ const Divider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   style,
   width
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const _DividerRoot = DividerRoot(color, width, height);
   useImperativeHandle(reference, () => {

package/components/form-control/attachment/index.js

@@ -1,16 +1,15 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import { ButtonIcon, HelperText, Label, LinearProgress, List, ListItem, ListItemText, ModalSample, Notify, Popover, Popup, ScrollBar, Slider, SliderItem, Typography } from "../..";
+import { getGlobal } from "../../../global";
+import { Another, Compressed, Image, Pdf, Presentation, Sheet, Word } from "../../../icons";
 import PropTypes from 'prop-types';
 import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { ButtonIcon, HelperText, LinearProgress, List, ListItem, ListItemText, ModalSample, Notify, Popover, Popup, ScrollBar, Slider, SliderItem, Typography } from "../../";
-import { getGlobal } from "../../../global";
-import { Another, Compressed, Image, Pdf, Presentation, Sheet, Word } from "../../../icons";
 import { alignCenter, border, borderBox, borderRadius4px, borderRadius50, breakWord, cursorPointer, displayBlock, displayInlineBlock, displayNone, ellipsis, flexCol, flexRow, flexWrap, justifyBetween, justifyCenter, justifyStart, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, textCenter, userSelectNone } from "../../../styles/general";
 import { makeStyles, useTheme } from "../../../theme";
 import { classNames, date as moment, getFileType } from "../../../utils";
-import Label from "../label";
 const {
   colors: {
     system: {

package/components/index.js

@@ -114,7 +114,7 @@ export { default as PopoverBody } from "./popover/body";
 export { default as PopoverFooter } from "./popover/footer";
 
 // POPUP
-export { default as Popup } from "./popup";
+export { default as Popup } from "./popup/v2";
 export { default as PopupV2 } from "./popup/v2";
 export { default as DangerPopup } from "./popup/danger_popup";
 export { default as ProposalsPopup } from "./popup/proposals_popup";

package/components/popover/body.js

@@ -1,21 +1,21 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { flexCol, overflowAuto, positionRelative } from "../../styles/general";
+import { useTheme } from "../../theme";
 import { classNames } from "../../utils";
-import theme from "../../theme/settings";
 const {
   colors: {
     fill: {
-      'scrollbar-rest': scrollbarRest,
-      'scrollbar-active': scrollbarActive
+      'scrollbar-rest': fillScrollbarRest,
+      'scrollbar-active': fillScrollbarActive
     }
   },
   spacing
-} = theme;
+} = useTheme();
 const PopoverBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -54,11 +54,11 @@ const PopoverBodyCSS = css`
     &::-webkit-scrollbar-thumb {
         border-radius: 10px;
         mix-blend-mode: normal;
-        background-color: ${scrollbarRest};
+        background-color: ${fillScrollbarRest};
         background-clip: content-box;
         border: 8px solid transparent;
         :hover {
-            background-color: ${scrollbarActive};
+            background-color: ${fillScrollbarActive};
         }
     }
 `;

package/components/popover/footer.js

@@ -1,20 +1,20 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { alignCenter, borderBox, flexRow, justifyEnd, parseWidth, positionRelative } from "../../styles/general";
+import { useTheme } from "../../theme";
 import { classNames } from "../../utils";
-import theme from "../../theme/settings";
 const {
   colors: {
     system: {
-      white
+      white: systemWhite
     }
   },
   spacing
-} = theme;
+} = useTheme();
 const PopoverFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   boxShadow,
@@ -52,7 +52,7 @@ const PopoverFooterCSS = boxShadow => css`
     ${parseWidth('100%')};
     min-height: 56px;
     padding: ${spacing([4])};
-    background: ${white};
+    background: ${systemWhite};
     border-radius: 0px 0px 4px 4px;
     box-shadow: ${boxShadow ? '0px -2px 2px rgba(0, 0, 0, 0.1)' : 'none'};
     order: 3;

package/components/popover/header.js

@@ -1,22 +1,22 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { Typography } from "./..";
 import OptionWrapper from "../others/option-wrapper";
-import { Typography } from "../";
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { alignCenter, borderBox, flexRow, parseWidthHeight, positionRelative } from "../../styles/general";
+import { useTheme } from "../../theme";
 import { classNames } from "../../utils";
-import theme from "../../theme/settings";
 const {
   colors: {
     fill: {
-      headerbar
+      headerbar: fillHeaderbar
     }
   },
   spacing,
   zIndex: zIndexCORE
-} = theme;
+} = useTheme();
 const PopoverHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -58,7 +58,7 @@ const PopoverHeaderCSS = css`
     ${positionRelative};
     ${borderBox};
     ${parseWidthHeight('100%', 56)};
-    background-color: ${headerbar};
+    background-color: ${fillHeaderbar};
     padding: ${spacing([4])};
     border-radius: 4px 4px 0px 0px;
     box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);

package/components/popover/index.js

@@ -1,20 +1,17 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import React, { memo, useState, useEffect, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
-import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
-import { borderRadius4px, displayBlock, flexCol, justifyBetween, overflowAuto, parseWidthHeight, positionAbsolute, positionFixed, positionRelative } from "../../styles/general";
-import theme from "../../theme/settings";
+import PropTypes from 'prop-types';
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { borderRadius4px, displayBlock, flexCol, justifyBetween, overflowAuto, parseMaxWidthHeight, parseMinWidthHeight, parseWidthHeight, positionAbsolute, positionFixed, positionRelative } from "../../styles/general";
+import { useTheme } from "../../theme";
 import { classNames, isMobile, refType as ref } from "../../utils";
 const {
   colors: {
     system: {
-      white
-    },
-    fill: {
-      tooltip: fillTooltip
+      white: systemWhite
     }
   },
   typography: {
@@ -22,7 +19,7 @@ const {
   },
   spacing,
   zIndex: zIndexCORE
-} = theme;
+} = 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') {
@@ -120,7 +117,6 @@ const getDirectionPopover = direction => {
       };
   }
 };
-const backgroundMap = new Map([['light', white], ['dark', fillTooltip]]);
 const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   anchor,
@@ -146,6 +142,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (isMobile.any() && trigger === 'hover') trigger = 'click';
   const ref = useRef(null);
   const arrowRef = useRef(null);
+  const overflow = useRef(null);
   const [openState, setOpenState] = useState(open);
   const [element, setElement] = useState(null);
   const _PortalPopoverCSS = PortalPopoverCSS(zIndex, fullScreen);
@@ -404,6 +401,8 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [open]);
   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();
 
@@ -418,6 +417,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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);
         }
@@ -426,7 +426,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         if (trigger === 'hover' && ref.current) ref.current.removeEventListener('mouseleave', handleEventTrigger, false);
       };
     } else if (!openState) {
-      document.documentElement.style.overflow = 'auto';
+      document.documentElement.style.overflow = overflow.current;
     }
   }, [openState]);
   useEffect(() => {
@@ -507,16 +507,13 @@ const PopoverContainerCSS = (bgColor, width, height) => css`
     ${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])});
+    ${parseMinWidthHeight(spacing([4]))};
+    ${parseMaxWidthHeight(`calc(100% - ${spacing([8])})`)};
     transition: opacity 0.3s ease;
     pointer-events: initial;
     opacity: 0;
-    background-color: ${backgroundMap.get(bgColor) || bgColor};
+    background-color: ${bgColor};
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-    ${bgColor === 'dark' && `color: ${white};`}
 `;
 const PopoverArrowCSS = bgColor => css`
     ${displayBlock};
@@ -524,7 +521,7 @@ const PopoverArrowCSS = bgColor => css`
     ${parseWidthHeight(0)};
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
-    border-bottom: 6px solid ${backgroundMap.get(bgColor) || bgColor};
+    border-bottom: 6px solid ${bgColor};
 `;
 Popover.defaultProps = {
   anchorOrigin: {
@@ -532,10 +529,10 @@ Popover.defaultProps = {
     horizontal: 'center'
   },
   arrow: false,
-  bgColor: 'light',
+  bgColor: systemWhite,
   className: '',
   clickOutsideToClose: true,
-  fullScreen: false,
+  fullScreen: true,
   height: 'max-content',
   marginThreshold: spacing(4),
   pressESCToClose: true,
@@ -566,7 +563,7 @@ Popover.propTypes = {
   /** If `true`, arrow is shown. */
   arrow: PropTypes.bool,
   /** Background color of the component. */
-  bgColor: PropTypes.oneOfType([PropTypes.oneOf(['light', 'dark']), PropTypes.string]),
+  bgColor: PropTypes.string,
   /** The content of the component. */
   children: PropTypes.node,
   /** Class for component. */

package/components/popup/v2/index.js

@@ -1,61 +1,60 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useEffect, useRef, useState, forwardRef, useImperativeHandle, Fragment, useCallback } from 'react';
-import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import useDelayUnmount from "../../../utils/useDelayUnmount";
-import Icon from "../../../icons";
-import { Button, ButtonIcon, Typography } from "../../";
+import { css, jsx } from '@emotion/core';
+import { Button, ButtonIcon, Icon, Typography } from "../..";
 import { getGlobal } from "../../../global";
-import { hexToRGBA } from "../../../styles/color-helper";
-import { capitalize } from "../../../utils";
+import PropTypes from 'prop-types';
+import { forwardRef, Fragment, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { animations } from "../../../styles/animation";
-import { alignCenter, border, borderBox, borderRadius4px, breakWord, cursorPointer, displayBlock, ellipsis, flexCol, flexRow, justifyCenter, justifyEnd, overflowAuto, overflowHidden, parseWidth, parseWidthHeight, positionFixed, positionRelative } from "../../../styles/general";
-import theme from "../../../theme/settings";
+import { hexToRGBA } from "../../../styles/color-helper";
+import { alignCenter, border, borderBox, borderRadius4px, borderRadius50, breakWord, cursorPointer, displayBlock, ellipsis, flexCol, flexRow, justifyCenter, justifyEnd, overflowAuto, overflowHidden, parseHeight, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, positionFixed, positionRelative } from "../../../styles/general";
+import { useTheme } from "../../../theme";
+import { classNames, refType as ref, useDelayUnmount } from "../../../utils";
 const {
   colors: {
     system: {
-      white
+      white: systemWhite
     },
     semantic: {
-      success,
-      warning,
-      danger,
-      info
+      success: semanticSuccess,
+      warning: semanticWarning,
+      danger: semanticDanger,
+      info: semanticInfo
     },
     fill: {
-      'scrollbar-tabbar': scrollbar,
-      hover
+      'scrollbar-tabbar': fillScrollbarTabbar,
+      hover: fillHover
     }
   },
   spacing,
   zIndex: zIndexCORE
-} = theme;
-const colorMap = new Map([['yesno', info], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
+} = useTheme();
+const colorMap = new Map([['yesno', semanticInfo], ['success', semanticSuccess], ['warning', semanticWarning], ['danger', semanticDanger], ['info', semanticInfo]]);
 const titleMap = new Map([['yesno', 'notify'], ['success', 'confirm'], ['warning', 'warning'], ['danger', 'error'], ['info', 'notify']]);
 const iconMap = new Map([['yesno', 'Info'], ['success', 'ApprovalFilled'], ['warning', 'Warning'], ['danger', 'Failed'], ['info', 'Info']]);
 const fadeInDown = animations.fadeInDown;
 const fadeOutUp = animations.fadeOutUp;
 const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  open,
-  type,
-  icon,
-  title,
-  subtitle,
-  description,
-  pressESCToClose,
+  action = {},
+  cancelProps,
   className,
-  style,
+  confirmProps,
+  description,
+  icon,
+  noText,
+  onCancel,
   onClose,
   onConfirm,
-  onCancel,
-  confirmProps,
-  cancelProps,
-  width,
+  open,
+  pressESCToClose,
+  style,
+  subtitle,
+  title,
   top,
+  type,
+  width,
   yesText,
-  noText,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -73,7 +72,6 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const onShowPopup = (options, cb) => {
     if (options && typeof options === 'object' && Object.keys(options).length) {
-      var _newProps$title;
       const newProps = {
         type: options.type !== undefined ? options.type : type,
         title: options.title !== undefined ? options.title : title,
@@ -86,19 +84,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         onCancel: cb ? () => cb(false) : options.onCancel !== undefined ? options.onCancel : onCancel,
         onConfirm: cb ? () => cb(true) : options.onConfirm !== undefined ? options.onConfirm : onConfirm
       };
-      const popup = jsx(Fragment, null, jsx("div", {
-        className: 'DGN-UI-Popup-Header ' + 'DGN-' + capitalize(newProps.type)
-      }, jsx(Typography, {
-        className: 'DGN-UI-Popup-Header-Title',
-        type: 'h3',
-        color: 'inherit'
-      }, (_newProps$title = newProps.title) !== null && _newProps$title !== void 0 ? _newProps$title : getGlobal(titleMap.get(newProps.type))), jsx(ButtonIcon, {
-        circular: true,
-        viewType: 'text',
-        color: type === 'yesno' ? 'info' : type,
-        name: 'Close',
-        onClick: () => onClosePopup('isClose')
-      })), jsx("div", {
+      const popup = jsx(Fragment, null, PopupHeaderView(newProps.title, newProps.type), jsx("div", {
         className: 'DGN-UI-Popup-Body'
       }, newProps.icon !== false && jsx("div", {
         className: 'DGN-UI-Popup-Body-Icon'
@@ -111,21 +97,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         className: 'DGN-UI-Popup-Body-Description'
       }, jsx(Typography, {
         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, {
-        viewType: 'filled',
-        label: newProps.yesText || getGlobal('ok').toUpperCase(),
-        color: newProps.type,
-        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
-      })));
+      }, newProps.description))), PopupActionView(newProps.onConfirm, newProps.confirmProps, newProps.onCancel, newProps.cancelProps, newProps.type, newProps.yesText, newProps.noText));
       setCustom(popup);
     } else {
       setCustom(false);
@@ -175,7 +147,8 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const currentRef = ref.current || {};
     const _instance = {
       show: onShowPopup,
-      close: onClosePopup
+      close: onClosePopup,
+      ...action
     }; // methods
     _instance.__proto__ = {}; // hidden methods
     currentRef.instance = _instance;
@@ -183,77 +156,86 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.close = onClosePopup;
     return currentRef;
   });
+  const PopupHeaderView = (title, type) => {
+    return jsx("div", {
+      className: 'DGN-UI-Popup-Header'
+    }, jsx(Typography, {
+      className: 'DGN-UI-Popup-Header-Title',
+      type: 'h3',
+      color: 'inherit'
+    }, title !== null && title !== void 0 ? title : getGlobal(titleMap.get(type))), jsx(ButtonIcon, {
+      circular: true,
+      viewType: 'text',
+      color: type === 'yesno' ? 'info' : type,
+      name: 'Close',
+      onClick: () => onClosePopup('isClose')
+    }));
+  };
+  const PopupBodyView = (icon, type, subtitle, description) => {
+    return jsx("div", {
+      className: 'DGN-UI-Popup-Body'
+    }, icon !== false && jsx("div", {
+      className: 'DGN-UI-Popup-Body-Icon'
+    }, jsx(Icon, {
+      name: icon === true ? iconMap.get(type) : icon,
+      width: 40,
+      height: 40,
+      color: colorMap.get(type)
+    })), jsx("div", {
+      className: 'DGN-UI-Popup-Body-Description'
+    }, jsx(Typography, {
+      type: 'p2'
+    }, subtitle && jsx(Typography, {
+      className: 'DGN-UI-Popup-Body-Subtitle',
+      fullWidth: true
+    }, subtitle), jsx(Typography, {
+      ref: onRefChange,
+      type: 'p2',
+      className: 'DGN-UI-Popup-Body-Detail'
+    }, description), (subtitle && descriptionLines > 1 || descriptionLines > 3) && jsx("span", {
+      className: 'DGN-More-Action',
+      onClick: () => setShowMoreDescription(!showMoreDescription)
+    }, getGlobal(showMoreDescription ? 'showLess' : 'showMore')))));
+  };
+  const PopupActionView = (onConfirm, confirmProps, onCancel, cancelProps, type, yesText, noText) => {
+    return onConfirm || onCancel || type === 'yesno' ? jsx("div", {
+      className: 'DGN-UI-Popup-Action'
+    }, onConfirm || type === 'yesno' ? jsx(Button, {
+      viewType: 'filled',
+      label: yesText || getGlobal('ok').toUpperCase(),
+      color: type === 'yesno' ? 'info' : type,
+      onClick: () => {
+        onClosePopup('isConfirm');
+        onConfirm && onConfirm();
+      },
+      ...confirmProps
+    }) : null, onCancel || type === 'yesno' ? jsx(Button, {
+      viewType: 'outlined',
+      label: noText || getGlobal('cancel').toUpperCase(),
+      color: type === 'yesno' ? 'info' : type,
+      onClick: () => {
+        onClosePopup('isCancel');
+        onCancel && onCancel();
+      },
+      ...cancelProps
+    }) : null) : null;
+  };
   return showPopup && /*#__PURE__*/createPortal(jsx("div", {
     css: _PopupRootCSS,
     ref: ref,
     style: style,
-    className: ['DGN-UI-Portal DGN-UI-Popup-Portal', className].join(' ').trim().replace(/\s+/g, ' ')
+    className: classNames('DGN-UI-Portal DGN-UI-Popup-Portal', className)
   }, jsx("div", {
     className: `DGN-UI-Popup ${openState ? 'DGN-Show' : 'DGN-Hide'}`,
     ...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'
-  }, title !== null && title !== void 0 ? title : getGlobal(titleMap.get(type))), jsx(ButtonIcon, {
-    circular: true,
-    viewType: 'text',
-    color: type === 'yesno' ? 'info' : type,
-    name: 'Close',
-    onClick: () => onClosePopup('isClose')
-  })), jsx("div", {
-    className: 'DGN-UI-Popup-Body'
-  }, icon !== false && jsx("div", {
-    className: 'DGN-UI-Popup-Body-Icon'
-  }, jsx(Icon, {
-    name: icon === true ? iconMap.get(type) : icon,
-    width: 40,
-    height: 40,
-    color: colorMap.get(type)
-  })), jsx("div", {
-    className: 'DGN-UI-Popup-Body-Description'
-  }, jsx(Typography, {
-    type: 'p2'
-  }, subtitle && jsx(Typography, {
-    className: 'DGN-UI-Popup-Body-Subtitle',
-    fullWidth: true
-  }, subtitle), jsx(Typography, {
-    ref: onRefChange,
-    type: 'p2',
-    className: 'DGN-UI-Popup-Body-Detail'
-  }, 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, {
-    viewType: 'filled',
-    label: yesText || getGlobal('ok'),
-    color: type === 'yesno' ? 'info' : type,
-    onClick: () => {
-      onClosePopup('isConfirm');
-      onConfirm && onConfirm();
-    },
-    ...confirmProps
-  }), (onCancel || type === 'yesno') && jsx(Button, {
-    viewType: 'outlined',
-    label: noText || getGlobal('cancel'),
-    color: type === 'yesno' ? 'info' : type,
-    onClick: () => {
-      onClosePopup('isCancel');
-      onCancel && onCancel();
-    },
-    ...cancelProps
-  }))))), document.body);
+  }, custom ? custom : jsx(Fragment, null, PopupHeaderView(title, type), PopupBodyView(icon, type, subtitle, description), PopupActionView(onConfirm, confirmProps, onCancel, cancelProps, type, yesText, noText)))), document.body);
 }));
 const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescription, descriptionLines) => css`
     ${flexRow};
     ${positionFixed};
     ${justifyCenter};
     ${breakWord};
-    ${parseWidthHeight('100%')}
+    ${parseWidthHeight('100%')};
     top: 0;
     left: 0;
     inset: 0;
@@ -263,12 +245,10 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
         ${flexCol};
         ${borderRadius4px};
         ${borderBox};
-        ${parseWidth(width)};
-        height: fit-content;
-        max-width: 80%;
-        max-height: 80%;
+        ${parseWidthHeight(width, 'fit-content')};
+        ${parseMaxWidthHeight('80%')};
         margin: ${isNaN(top) ? top : top + 'px'} auto auto;
-        background-color: ${white};
+        background-color: ${systemWhite};
         box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
         &.DGN-Show {
             animation: ${fadeInDown} 0.2s ease;
@@ -280,13 +260,13 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
         .DGN-UI-Popup-Header {
             ${flexRow};
             ${alignCenter};
-            min-height: 40px;
+            ${parseMinHeight(40)};
             padding: ${spacing([0, 2, 0, 4])};
             border-radius: 4px 4px 0px 0px;
             .DGN-UI-Popup-Header-Title {
                 ${flexRow};
                 ${ellipsis};
-                width: calc(100% - 24px);
+                ${parseWidth('calc(100% - 24px)')};
             }
             color: ${colorMap.get(type)};
             background-color: ${hexToRGBA(colorMap.get(type), 0.15)};
@@ -300,34 +280,34 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
             &::-webkit-scrollbar {
                 ${borderRadius4px};
                 ${parseWidth(24)};
-                background-color: ${white} !important;
+                background-color: ${systemWhite} !important;
             }
             &::-webkit-scrollbar-thumb {
                 ${border(8, 'transparent')};
                 border-radius: 24px;
                 mix-blend-mode: normal;
-                background-color: ${scrollbar} !important;
+                background-color: ${fillScrollbarTabbar} !important;
                 background-clip: content-box;
             }
             &::-webkit-scrollbar-thumb:hover {
                 ${border(8, 'transparent')};
                 border-radius: 24px;
                 mix-blend-mode: normal;
-                background-color: ${hover} !important;
+                background-color: ${fillHover} !important;
                 background-clip: content-box;
             }
             .DGN-UI-Popup-Body-Icon {
                 ${displayBlock};
+                ${borderRadius50};
                 ${parseWidth(40)};
                 margin-right: ${spacing([4])};
-                border-radius: 50%;
             }
             .DGN-UI-Popup-Body-Description {
                 ${flexRow};
                 ${positionRelative};
                 ${alignCenter};
-                min-height: 40px;
-                height: max-content;
+                ${parseMinHeight(40)};
+                ${parseHeight('max-content')};
                 .DGN-UI-Popup-Body-Subtitle {
                     margin-bottom: ${(description === null || description === void 0 ? void 0 : description.length) > 0 ? spacing([2]) : spacing([0])};
                 }
@@ -345,7 +325,7 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
                     margin-top: ${spacing([4])};
                     margin-bottom: ${type === 'yesno' ? spacing([0]) : spacing([2])};
                     text-decoration: underline;
-                    color: ${info};
+                    color: ${semanticInfo};
                 }
             }
         }
@@ -354,8 +334,8 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
             ${justifyEnd};
             padding: ${spacing([2, 4, 4, 4])};
             .DGN-UI-Button {
+                ${parseMinWidth(80)};
                 margin: 0;
-                min-width: 80px;
                 &.filled {
                     margin-right: ${spacing([2])};
                 }
@@ -364,14 +344,14 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
     }
 `;
 Popup.defaultProps = {
+  className: '',
+  icon: true,
   open: false,
   pressESCToClose: false,
-  icon: true,
-  width: 480,
+  style: {},
   top: 56,
   type: 'info',
-  className: '',
-  style: {}
+  width: 480
 };
 Popup.propTypes = {
   /** If `true`, the component is shown. */
@@ -383,7 +363,7 @@ Popup.propTypes = {
   /** [Props](https://core.diginet.com.vn/ui/?path=/story/button) applied to the confirm `Button`. */
   confirmProps: PropTypes.object,
   /** Details content of the component. */
-  description: PropTypes.string,
+  description: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic) display before content. */
   icon: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   /** Label of cancel button. */
@@ -422,8 +402,6 @@ Popup.propTypes = {
    *      * Callback fired after click on button (callback(true) with confirm Button and callback(false) with cancel Button). Alternate both onCancel, onConfirm methods of options
    * * close(): Close popup
    */
-  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })])
+  reference: ref
 };
 export default Popup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.79-beta.4",
+  "version": "1.3.80-beta.1",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/readme.md

@@ -38,6 +38,12 @@ npm test
 ```
 
 ## Changelog
+## 1.3.80
+- \[Changed\]: ButtonMore – Update Button More with new design
+- \[Changed\]: BABEL – Add babel-plugin-module-resolver
+- \[Changed\]: NumberInput – Add viewType none
+- \[Changed\]: CircularProgress – Allow prop size accept number value; Optimize code
+
 ## 1.3.79
 - \[Changed\]: Button – Add prop labelProps; Allow use CUI colors
 - \[Changed\]: InputBase – Add startIcon, endIcon to multiline textarea; Add viewType none; Optimize code