diginet-core-ui 1.3.86-beta.1 → 1.3.87-beta.1

package/components/avatar/index.js

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import AvatarDefault from "../../assets/avatar/default.svg";
-import { ButtonIcon, Image, ModalSample, Popover, Popup, Typography } from "./..";
+import { ButtonIcon, Image, ModalSample, Notify, Popover, Typography } from "./..";
 import OptionWrapper from "../others/option-wrapper";
 import { getGlobal } from "../../global";
 import PropTypes from 'prop-types';
@@ -66,7 +66,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   const inputRef = useRef(null);
   const avatarRef = useRef(null);
-  const popupRef = useRef(null);
+  const notifyRef = useRef(null);
   const [viewAvatar, setViewAvatar] = useState(false);
   const [viewMoreInfo, setViewMoreInfo] = useState(false);
   const [srcState, setSrcState] = useState(src);
@@ -89,16 +89,12 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const reader = new FileReader();
     if (!checkFileType(file.type, matchType)) {
       input.target.value = '';
-      popupRef.current.instance.show({
-        description: wrongTypeError
-      });
+      notifyRef.current.instance.show(wrongTypeError);
       return;
     }
     if (+maxSize && file.size > maxSize * 1024 ** 2) {
       input.target.value = '';
-      popupRef.current.instance.show({
-        description: maxSizeError
-      });
+      notifyRef.current.instance.show(maxSizeError);
       return;
     }
     reader.onload = e => {
@@ -237,10 +233,12 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       direction: direction
     }, jsx("div", {
       css: MoreInfoCSS
-    }, typeof data === 'function' ? data() : renderData())) : null, !disabled && !readOnly ? jsx(Popup, {
-      ref: popupRef,
-      type: 'danger'
-    }) : null);
+    }, typeof data === 'function' ? data() : renderData())) : null, jsx(Notify, {
+      ref: notifyRef,
+      progressing: true,
+      autoDisappear: true,
+      color: 'danger'
+    }));
   }, [actionIconHeight, actionIconWidth, allowEdit, clearAble, data, defaultSrc, direction, disabled, height, hoverAble, lazyLoading, matchType, maxSize, maxSizeError, outlined, readOnly, width, srcState, viewAvatar, viewMoreInfo]);
 }));
 const ActionIconCSS = actionIconWidth => css`

package/components/form-control/input-base/index.js

@@ -134,7 +134,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const defaultHeight = 24;
     if (valueProp !== undefined) {
       valueArray.current.push(valueProp);
-      inputRefProp.current.value = valueProp;
+      inputRef.current.value = valueProp;
       if (multiline && !/\d+/.test(rows)) {
         inputRef.current.style.height = 0;
         inputRef.current.style.height = Math.max(defaultHeight, inputRef.current.scrollHeight) + 'px';
@@ -155,7 +155,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   /* End handler */
 
   useImperativeHandle(reference, () => {
-    const currentRef = inputRefProp.current || {};
+    const currentRef = inputRef.current || {};
     const _instance = {
       ...action
     }; // methods
@@ -170,14 +170,14 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     styleInputBase.current = style;
   };
   const dynamicWidth = e => {
-    if (!autoWidth || !inputRefProp.current) return;
-    if (!canvas || !styleInputBase.current || !inputRefProp.current) return;
+    if (!autoWidth || !inputRef.current) return;
+    if (!canvas || !styleInputBase.current || !inputRef.current) return;
     const context = canvas.getContext('2d');
     context.font = styleInputBase.current.font;
     const {
       width
     } = context.measureText(e.target.value);
-    inputRefProp.current.style.width = `${Math.max(width, widthInit.current)}px`;
+    inputRef.current.style.width = `${Math.max(width, widthInit.current)}px`;
   };
 
   /* Start component */

package/components/form-control/number-input/index2.js

@@ -1,16 +1,12 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { HelperText, InputBase, Label } from "../..";
 import locale from "../../../locale";
-import { cursorNotAllowed, displayBlock, positionRelative } from "../../../styles/general";
-import { useTheme } from "../../../theme";
+import PropTypes from 'prop-types';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { cursorNotAllowed, displayBlock, mgb, positionRelative } from "../../../styles/general";
 import { classNames, onValidate, refType as ref } from "../../../utils";
-const {
-  spacing
-} = useTheme();
 const regexValidNumber = /[^0-9.,-]/g;
 const regexNumber = /[^0-9]/g;
 const regexThousandNumber = /(\d)(?=(\d{3})+\b)/g;
@@ -33,7 +29,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   fixedDecimalDigit,
   helperTextProps,
   inputProps,
-  inputRef,
+  inputRef: inputRefProp,
   inputStyle,
   label,
   labelProps,
@@ -58,10 +54,12 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   value: valueProps,
   viewType
 }, reference) => {
-  inputRef = inputRef || useRef(null);
+  if (!reference) reference = useRef(null);
+  if (!inputRefProp) inputRefProp = useRef(null);
   const pos = useRef(null);
   const ref = useRef(null);
   const globalRef = useRef({});
+  const inputRef = useRef(null);
   const [value, setValue] = useState(defaultValue);
   const isError = !!error;
 
@@ -77,7 +75,6 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   } else {
     thousandSymbol = '';
   }
-  const validateResult = validates && onValidate(value, validates, true);
   if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
 
   /**
@@ -238,6 +235,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     }
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
   };
+  const validateResult = validates && onValidate(Number(convertMoneyToNumber(value) || 0), validates, true);
   useEffect(() => {
     inputRef.current.value = value !== null && value !== void 0 ? value : null;
 
@@ -270,12 +268,16 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     css: NumberInputRoot,
     className: classNames('DGN-UI-NumberInput', className, disabled && 'disabled'),
     style: style
-  }, !!label && jsx(Label, {
+  }, label ? jsx(Label, {
     required: required,
     disabled: disabled,
     ...labelProps
-  }, label), jsx(InputBase, {
-    inputRef: inputRef,
+  }, label) : null, jsx(InputBase, {
+    inputRef: refs => {
+      if (!refs) return;
+      inputRef.current = refs;
+      typeof inputRefProp === 'function' ? inputRefProp(refs) : inputRefProp.current = refs;
+    },
     viewType: viewType,
     defaultValue: defaultValue,
     value: value,
@@ -306,18 +308,18 @@ const NumberInput = /*#__PURE__*/forwardRef(({
         target
       });
     }
-  }), isError && jsx(HelperText, {
+  }), isError ? jsx(HelperText, {
     ...helperTextProps,
     disabled: disabled
-  }, error), !isError && validateResult && jsx(HelperText, {
+  }, error) : null, !isError && validateResult ? jsx(HelperText, {
     ...helperTextProps,
     disabled: disabled
-  }, validateResult));
+  }, validateResult) : null);
 });
 const NumberInputRoot = css`
     ${displayBlock};
     ${positionRelative};
-    margin-bottom: ${spacing([5])};
+    ${mgb([5])};
     &.disabled {
         ${cursorNotAllowed};
     }

package/components/popover/index.js

@@ -5,7 +5,7 @@ import OptionWrapper from "../others/option-wrapper";
 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 { bgColor, borderRadius4px, displayFlex, displayNone, flexCol, inset, justifyBetween, overflowAuto, parseMaxWidthHeight, parseMinWidthHeight, parseWidthHeight, pointerEventsInherit, pointerEventsNone, positionAbsolute, positionFixed, positionRelative } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { classNames, isMobile, refType as ref } from "../../utils";
 const {
@@ -139,6 +139,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width,
   zIndex
 }, reference) => {
+  if (!reference) reference = useRef(null);
   if (isMobile.any() && trigger === 'hover') trigger = 'click';
   const ref = useRef(null);
   const arrowRef = useRef(null);
@@ -193,7 +194,9 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       verticalCenter = 0,
       horizontal = 0,
       horizontalCenter = 0,
-      arrowPosition = {},
+      arrowPosition = {
+        display: 'block'
+      },
       translate = {
         left: 0,
         top: 0
@@ -401,8 +404,10 @@ 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';
+      if (document.body.style.overflow !== 'hidden') {
+        overflow.current = document.body.style.overflow; // store overflow of <body /> before open
+        document.body.style.overflow = 'hidden';
+      }
       // Position's anchor
       updatePositionPopover();
 
@@ -483,10 +488,10 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         ref: ref,
         style: style,
         className: classNames('DGN-UI-Popover-Container', className)
-      }, children), arrow && jsx("span", {
+      }, children), arrow ? jsx("span", {
         ref: arrowRef,
         css: _PopoverArrowCSS
-      }));
+      }) : null);
       return /*#__PURE__*/createPortal(node, document.body);
     }
     return null;
@@ -495,28 +500,29 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 const PortalPopoverCSS = (zIndex, fullScreen) => css`
     ${positionFixed};
+    ${fullScreen ? pointerEventsInherit : pointerEventsNone};
+    ${inset(0)};
     z-index: ${zIndex};
-    pointer-events: ${fullScreen ? 'initial' : 'none'};
-    inset: 0;
 `;
-const PopoverContainerCSS = (bgColor, width, height) => css`
+const PopoverContainerCSS = (bgCl, width, height) => css`
+    ${displayFlex};
     ${flexCol};
     ${positionRelative};
     ${justifyBetween};
     ${overflowAuto};
     ${borderRadius4px};
     ${paragraph1};
+    ${pointerEventsInherit};
     ${parseWidthHeight(width, height)};
     ${parseMinWidthHeight(spacing([4]))};
     ${parseMaxWidthHeight(`calc(100% - ${spacing([8])})`)};
+    ${bgColor(bgCl)};
     transition: opacity 0.3s ease;
-    pointer-events: initial;
     opacity: 0;
-    background-color: ${bgColor};
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 `;
 const PopoverArrowCSS = bgColor => css`
-    ${displayBlock};
+    ${displayNone};
     ${positionAbsolute};
     ${parseWidthHeight(0)};
     border-left: 6px solid transparent;
@@ -546,10 +552,6 @@ Popover.defaultProps = {
   zIndex: zIndexCORE(1)
 };
 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]),
   /**
@@ -586,6 +588,8 @@ Popover.propTypes = {
   marginThreshold: PropTypes.number,
   /** Callback fired when the component requests to be closed. */
   onClose: PropTypes.func,
+  /** If `true`, the component is shown. */
+  open: PropTypes.bool,
   /** If `true`, hitting escape will close component. */
   pressESCToClose: PropTypes.bool,
   /** Style inline of component. */
@@ -598,6 +602,8 @@ Popover.propTypes = {
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
     vertical: PropTypes.oneOf(['bottom', 'center', 'top'])
   }),
+  /** Trigger mode of the component. Will not work when use with `open` prop. */
+  trigger: PropTypes.oneOf(['click', 'hover', 'focus']),
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Config z-index of the component. */

package/components/popup/v2/index.js

@@ -8,7 +8,7 @@ import { forwardRef, Fragment, memo, useCallback, useEffect, useImperativeHandle
 import { createPortal } from 'react-dom';
 import { animations } from "../../../styles/animation";
 import { hexToRGBA } from "../../../styles/color-helper";
-import { itemsCenter, border, boxBorder, borderRadius4px, borderRadius50, breakWord, cursorPointer, displayBlock, truncate, flexCol, flexRow, justifyCenter, justifyEnd, overflowAuto, overflowHidden, parseHeight, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, positionFixed, positionRelative } from "../../../styles/general";
+import { bgColor, border, borderRadius, borderRadius50, boxBorder, breakWord, cursorPointer, displayBlock, displayFlex, flexCol, flexRow, inset, itemsCenter, justifyCenter, justifyEnd, mg, mgb, mgr, mgt, overflowAuto, overflowHidden, parseHeight, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, pd, positionFixed, positionRelative, textEllipsis, truncate, z } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { classNames, refType as ref, useDelayUnmount } from "../../../utils";
 const {
@@ -26,9 +26,7 @@ const {
       'scrollbar-tabbar': fillScrollbarTabbar,
       hover: fillHover
     }
-  },
-  spacing,
-  zIndex: zIndexCORE
+  }
 } = 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']]);
@@ -57,6 +55,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   yesText,
   ...props
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const statusAction = useRef('');
   const [openState, setOpenState] = useState(open);
@@ -86,14 +85,14 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       };
       const popup = jsx(Fragment, null, PopupHeaderView(newProps.title, newProps.type), jsx("div", {
         className: 'DGN-UI-Popup-Body'
-      }, newProps.icon !== false && jsx("div", {
+      }, newProps.icon !== false ? jsx("div", {
         className: 'DGN-UI-Popup-Body-Icon'
       }, jsx(Icon, {
         name: newProps.icon === true ? iconMap.get(newProps.type) : newProps.icon,
         width: 40,
         height: 40,
         color: colorMap.get(newProps.type)
-      })), jsx("div", {
+      })) : null, jsx("div", {
         className: 'DGN-UI-Popup-Body-Description'
       }, jsx(Typography, {
         type: 'p2'
@@ -174,28 +173,28 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const PopupBodyView = (icon, type, subtitle, description) => {
     return jsx("div", {
       className: 'DGN-UI-Popup-Body'
-    }, icon !== false && jsx("div", {
+    }, 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", {
+    })) : null, jsx("div", {
       className: 'DGN-UI-Popup-Body-Description'
     }, jsx(Typography, {
       type: 'p2'
-    }, subtitle && jsx(Typography, {
+    }, subtitle ? jsx(Typography, {
       className: 'DGN-UI-Popup-Body-Subtitle',
       fullWidth: true
-    }, subtitle), jsx(Typography, {
+    }, subtitle) : null, jsx(Typography, {
       ref: onRefChange,
       type: 'p2',
       className: 'DGN-UI-Popup-Body-Detail'
-    }, description), (subtitle && descriptionLines > 1 || descriptionLines > 3) && jsx("span", {
+    }, description), subtitle && descriptionLines > 1 || descriptionLines > 3 ? jsx("span", {
       className: 'DGN-More-Action',
       onClick: () => setShowMoreDescription(!showMoreDescription)
-    }, getGlobal(showMoreDescription ? 'showLess' : 'showMore')))));
+    }, getGlobal(showMoreDescription ? 'showLess' : 'showMore')) : null)));
   };
   const PopupActionView = (onConfirm, confirmProps, onCancel, cancelProps, type, yesText, noText) => {
     return onConfirm || onCancel || type === 'yesno' ? jsx("div", {
@@ -226,29 +225,29 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     style: style,
     className: classNames('DGN-UI-Portal DGN-UI-Popup-Portal', className)
   }, jsx("div", {
-    className: `DGN-UI-Popup ${openState ? 'DGN-Show' : 'DGN-Hide'}`,
+    className: classNames('DGN-UI-Popup', openState ? 'DGN-Show' : 'DGN-Hide'),
     ...props
   }, 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`
+    ${displayFlex};
     ${flexRow};
     ${positionFixed};
     ${justifyCenter};
     ${breakWord};
     ${parseWidthHeight('100%')};
-    top: 0;
-    left: 0;
-    inset: 0;
-    background-color: rgba(21, 26, 48, 0.5);
-    z-index: ${zIndexCORE(2)};
+    ${inset(0)};
+    ${bgColor('rgba(21, 26, 48, 0.5)')}
+    ${z(2)};
     .DGN-UI-Popup {
+        ${displayFlex};
         ${flexCol};
-        ${borderRadius4px};
         ${boxBorder};
+        ${borderRadius(4)};
         ${parseWidthHeight(width, 'fit-content')};
         ${parseMaxWidthHeight('80%')};
+        ${bgColor(systemWhite)};
         margin: ${isNaN(top) ? top : top + 'px'} auto auto;
-        background-color: ${systemWhite};
         box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
         &.DGN-Show {
             animation: ${fadeInDown} 0.2s ease;
@@ -258,40 +257,43 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
             animation-fill-mode: forwards;
         }
         .DGN-UI-Popup-Header {
+            ${displayFlex};
             ${flexRow};
             ${itemsCenter};
             ${parseMinHeight(40)};
-            padding: ${spacing([0, 2, 0, 4])};
-            border-radius: 4px 4px 0px 0px;
+            ${pd([0, 2, 0, 4])};
+            ${borderRadius('4px 4px 0px 0px')};
             .DGN-UI-Popup-Header-Title {
+                ${displayFlex};
                 ${flexRow};
                 ${truncate};
                 ${parseWidth('calc(100% - 24px)')};
             }
             color: ${colorMap.get(type)};
-            background-color: ${hexToRGBA(colorMap.get(type), 0.15)};
+            ${bgColor(hexToRGBA(colorMap.get(type), 0.15))};
         }
         .DGN-UI-Popup-Body {
+            ${displayFlex};
             ${flexRow};
             ${positionRelative};
             ${overflowAuto};
+            ${pd([4])};
             flex: 1 1 auto;
-            padding: ${spacing([4])};
             &::-webkit-scrollbar {
-                ${borderRadius4px};
+                ${borderRadius(4)};
                 ${parseWidth(24)};
                 background-color: ${systemWhite} !important;
             }
             &::-webkit-scrollbar-thumb {
                 ${border(8, 'transparent')};
-                border-radius: 24px;
+                ${borderRadius(24)};
                 mix-blend-mode: normal;
                 background-color: ${fillScrollbarTabbar} !important;
                 background-clip: content-box;
             }
             &::-webkit-scrollbar-thumb:hover {
                 ${border(8, 'transparent')};
-                border-radius: 24px;
+                ${borderRadius(24)};
                 mix-blend-mode: normal;
                 background-color: ${fillHover} !important;
                 background-clip: content-box;
@@ -300,20 +302,21 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
                 ${displayBlock};
                 ${borderRadius50};
                 ${parseWidth(40)};
-                margin-right: ${spacing([4])};
+                ${mgr([4])};
             }
             .DGN-UI-Popup-Body-Description {
+                ${displayFlex};
                 ${flexRow};
                 ${positionRelative};
                 ${itemsCenter};
                 ${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])};
+                    ${mgb([(description === null || description === void 0 ? void 0 : description.length) > 0 ? 2 : 0])};
                 }
                 .DGN-UI-Popup-Body-Detail {
                     ${overflowHidden};
-                    text-overflow: ellipsis;
+                    ${textEllipsis};
                     display: -webkit-box;
                     -webkit-line-clamp: ${showMoreDescription ? 'none' : subtitle && descriptionLines > 1 ? 1 : descriptionLines > 3 ? 3 : 'none'};
                     -webkit-box-orient: vertical;
@@ -321,23 +324,24 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
                 .DGN-More-Action {
                     ${displayBlock};
                     ${cursorPointer};
-                    width: fit-content;
-                    margin-top: ${spacing([4])};
-                    margin-bottom: ${type === 'yesno' ? spacing([0]) : spacing([2])};
+                    ${parseWidth('fit-content')};
+                    ${mgt([4])};
+                    ${mgb([type === 'yesno' ? 0 : 2])};
                     text-decoration: underline;
                     color: ${semanticInfo};
                 }
             }
         }
         .DGN-UI-Popup-Action {
+            ${displayFlex};
             ${flexRow};
             ${justifyEnd};
-            padding: ${spacing([2, 4, 4, 4])};
+            ${pd([2, 4, 4, 4])};
             .DGN-UI-Button {
                 ${parseMinWidth(80)};
-                margin: 0;
+                ${mg(0)};
                 &.filled {
-                    margin-right: ${spacing([2])};
+                    ${mgr([2])};
                 }
             }
         }
@@ -345,6 +349,7 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
 `;
 Popup.defaultProps = {
   className: '',
+  description: '',
   icon: true,
   open: false,
   pressESCToClose: false,

package/components/typography/index.js

@@ -1,10 +1,10 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import { Popover } from "./..";
 import PropTypes from 'prop-types';
 import { forwardRef, Fragment, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Popover } from '..';
-import { breakAll, breakWord, cursorPointer, displayBlock, displayInlineBlock, overflowHidden, pointerEventsNone, positionRelative, textCapitalize, textCenter, textUppercase } from "../../styles/general";
+import { breakAll, breakWord, cursorPointer, displayBlock, displayInlineBlock, italic, overflowHidden, parseHeight, parseMaxWidth, pd, pointerEventsNone, positionRelative, textCapitalize, textCenter, textLineThrough, textLowercase, textunderline, textUppercase, whiteSpaceBreakSpaces } from "../../styles/general";
 import { useColor as colors, useTheme, useTypography as typography } from "../../theme";
 import { classNames, renderHTML } from "../../utils";
 const {
@@ -22,10 +22,10 @@ const {
   },
   typography: {
     paragraph1
-  },
-  spacing
+  }
 } = useTheme();
 const colorMap = new Map([['default', textMain], ['secondary', systemRest]]);
+const formatMap = new Map([['capitalize', textCapitalize], ['uppercase', textUppercase], ['lowercase', textLowercase], ['italic', italic], ['line-through', textLineThrough], ['underline', textunderline]]);
 const isTextClamped = elm => (elm === null || elm === void 0 ? void 0 : elm.scrollHeight) > (elm === null || elm === void 0 ? void 0 : elm.clientHeight);
 const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
@@ -34,8 +34,10 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
   color,
+  format,
   fullWidth,
   hoverTooltip,
+  italic,
   lineClamp,
   mapping,
   onClick,
@@ -45,9 +47,14 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ...props
 }, reference) => {
   var _ref$current;
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
+  const formatCSS = [];
+  format.forEach(item => {
+    formatCSS.push(formatMap.get(item));
+  });
   const [openTooltip, setOpenTooltip] = useState(false);
-  const _TextRootCSS = TextRootCSS(color, type, lineClamp, onClick, hoverTooltip);
+  const _TextRootCSS = [TextRootCSS(color, type, lineClamp, onClick, hoverTooltip), ...formatCSS];
   const showTooltip = () => {
     if (!hoverTooltip) return;
     if (isTextClamped(ref.current)) {
@@ -94,7 +101,7 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: onClick,
       ...props
     }), renderTooltip);
-  }, [capitalize, center, children, className, color, fullWidth, hoverTooltip, lineClamp, mapping, onClick, tooltipDirection, type, uppercase, props, openTooltip]);
+  }, [capitalize, center, children, className, color, format, fullWidth, hoverTooltip, italic, lineClamp, mapping, onClick, props, tooltipDirection, type, uppercase, openTooltip]);
 }));
 const TextRootCSS = (color, type, lineClamp, onClick, hoverTooltip) => css`
     ${displayInlineBlock};
@@ -102,12 +109,10 @@ const TextRootCSS = (color, type, lineClamp, onClick, hoverTooltip) => css`
     ${paragraph1};
     ${onClick && cursorPointer};
     ${hoverTooltip && lineClamp === 1 ? breakAll : breakWord};
-    white-space: break-spaces;
+    ${whiteSpaceBreakSpaces};
     color: ${colorMap.get(color) || colors[color] || color};
-    max-width: max-content;
-    &.DGN-Typography-${type} {
-        ${typography[type]};
-    }
+    ${parseMaxWidth('max-content')};
+    ${typography[type]};
     &.DGN-Typography-center {
         ${textCenter};
     }
@@ -134,13 +139,14 @@ const PopoverCSS = css`
 `;
 const PopoverContentCSS = css`
     color: ${textTooltip};
-    padding: ${spacing([1, 1.5])};
-    height: 'fit-content';
+    ${pd([1, 1.5])};
+    ${parseHeight('fit-content')};
 `;
 Typography.defaultProps = {
   center: false,
   className: '',
   color: 'default',
+  format: [],
   fullWidth: true,
   hoverTooltip: false,
   mapping: 'span',
@@ -171,6 +177,8 @@ Typography.propTypes = {
   className: PropTypes.string,
   /** Color of text ['primary', 'secondary', 'success', 'warning', 'danger', 'info', '#hex', rgb(#,#,#)]. */
   color: PropTypes.string,
+  /** Option to make the text bold, italic, capitalize or underline. */
+  format: PropTypes.arrayOf(PropTypes.oneOf(['capitalize', 'uppercase', 'lowercase', 'italic', 'line-through', 'underline'])),
   /** If `true`, the component will take up the full width of its container. */
   fullWidth: PropTypes.bool,
   /** If `true`, hover will show tooltip when text clamped. */

package/global/index.js

@@ -11,8 +11,8 @@ const globalObject = {
     noDataText: 'Không có dữ liệu',
     notify: 'Thông báo',
     ok: 'Đồng ý',
-    showLess: 'Thu gọn',
-    showMore: 'Chi tiết',
+    showLess: 'Rút gọn',
+    showMore: 'Xem thêm',
     yes: 'Có',
     warning: 'Cảnh Báo',
     // attachment

package/package.json

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

package/readme.md

@@ -38,6 +38,10 @@ npm test
 ```
 
 ## Changelog
+## 1.3.87
+- \[Added\]: Icon – Upload, Workflow
+- \[Fixed\]: InputBase – Fix not run when inputRef is function
+
 ## 1.3.86
 - \[Changed\]: Icon – Optimize code
 - \[Fixed\]: Dropdown – Fix bug cannot select multiple after search

package/styles/general.js

@@ -176,6 +176,9 @@ const insetY = vl => css`
     top: ${parseCSSValue(vl)};
     bottom: ${parseCSSValue(vl)};
 `;
+const italic = css`
+    font-style: italic;
+`;
 const itemsCenter = css`
     align-items: center;
 `;
@@ -318,6 +321,9 @@ const parseWidthHeight = (width, height = width) => css`
 const pointerEventsAuto = css`
     pointer-events: auto;
 `;
+const pointerEventsInherit = css`
+    pointer-events: inherit;
+`;
 const pointerEventsNone = css`
     pointer-events: none;
 `;
@@ -357,9 +363,18 @@ const textEllipsis = css`
 const textLeft = css`
     text-align: left;
 `;
+const textLineThrough = css`
+    text-decoration: line-through;
+`;
+const textLowercase = css`
+    text-transform: lowercase;
+`;
 const textRight = css`
     text-align: right;
 `;
+const textunderline = css`
+    text-decoration: underline;
+`;
 const textUppercase = css`
     text-transform: uppercase;
 `;
@@ -383,4 +398,4 @@ const whiteSpacePreWrap = css`
 const z = vl => css`
     z-index: ${zIndex(vl)};
 `;
-export { bgColor, bgCurrent, bgTransparent, border, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, flexCol, flexColReverse, shadowNone, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, pd, pdb, pdl, pdr, pdt, pdx, pdy, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pointerEventsAuto, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, selfCenter, selfEnd, selfStart, textCapitalize, textCenter, textCurrent, textEllipsis, textLeft, textRight, textUppercase, truncate, userSelectNone, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };
+export { bgColor, bgCurrent, bgTransparent, border, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, flexCol, flexColReverse, shadowNone, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, pd, pdb, pdl, pdr, pdt, pdx, pdy, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pointerEventsAuto, pointerEventsInherit, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, selfCenter, selfEnd, selfStart, textCapitalize, textCenter, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textunderline, textUppercase, truncate, userSelectNone, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };