diginet-core-ui 1.3.36 → 1.3.37

package/assets/images/menu/dhr/MHRM29N0002.svg

@@ -0,0 +1,13 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.66 9.48L25.43 0.34C25.22 0.12 24.92 0 24.62 0H8.46C6.55 0 5 1.54 5 3.43V35.57C5 37.46 6.55 39 8.46 39H31.53C33.44 39 34.99 37.46 34.99 35.57V10.28C35 9.97 34.87 9.68 34.66 9.48ZM25.77 3.9L31.06 9.14H26.92C26.28 9.14 25.77 8.63 25.77 8V3.9ZM32.69 35.58C32.69 36.21 32.17 36.72 31.54 36.72H8.46C7.82 36.72 7.31 36.21 7.31 35.58V3.43C7.31 2.8 7.83 2.29 8.46 2.29H23.46V8C23.46 9.89 25.01 11.43 26.92 11.43H31.04C31.05 11.43 31.06 11.43 31.07 11.43H32.69V35.58Z" fill="#2680EB"/>
+<path d="M17.4799 14.0699C16.8399 14.6399 15.9299 14.8699 15.0599 14.5899C13.7399 14.1899 13.0099 12.7699 13.4099 11.4499C13.5199 11.0999 13.6999 10.7899 13.9399 10.5299L10.9799 7.56995L10.2999 8.18995C10.1799 8.29995 10.1599 8.48995 10.2499 8.61995L11.2699 10.0999C11.1699 10.2899 11.0899 10.4999 11.0299 10.6999C10.9599 10.9199 10.9199 11.1399 10.8899 11.3399L9.20995 11.9699C9.04995 12.0099 8.96995 12.1799 9.00995 12.3399L9.58995 14.9499C9.61995 15.1199 9.76995 15.2199 9.93995 15.2099L11.7299 15.0799C11.9799 15.4399 12.2599 15.7599 12.5999 16.0399L12.3099 17.7999C12.2799 17.9799 12.3699 18.1199 12.5299 18.1799L15.0699 18.9799C15.2299 19.0399 15.3999 18.9599 15.4799 18.8099L16.2399 17.1999C16.6899 17.1599 17.0999 17.0699 17.5199 16.9099L18.9099 18.0599C19.0299 18.1499 19.2099 18.1599 19.3399 18.0299L20.4299 17.0299L17.4799 14.0699Z" fill="#2680EB"/>
+<path d="M30.79 28.13C30.79 27.5 30.27 26.99 29.64 26.99H19.23C18.59 26.99 18.08 27.5 18.08 28.13C18.08 28.76 18.6 29.27 19.23 29.27H29.64C30.27 29.27 30.79 28.76 30.79 28.13Z" fill="#FF8C00"/>
+<path d="M29.64 22.41H19.23C18.59 22.41 18.08 22.92 18.08 23.55C18.08 24.18 18.6 24.69 19.23 24.69H29.64C30.28 24.69 30.79 24.18 30.79 23.55C30.79 22.92 30.27 22.41 29.64 22.41Z" fill="#FF8C00"/>
+<path d="M19.23 31.56C18.59 31.56 18.08 32.07 18.08 32.7C18.08 33.33 18.6 33.84 19.23 33.84H25.02C25.66 33.84 26.17 33.33 26.17 32.7C26.17 32.07 25.65 31.56 25.02 31.56H19.23Z" fill="#FF8C00"/>
+<path d="M10 25.8101H11.14V23.5701H10.18V22.8501C10.8 22.7501 11.11 22.6401 11.46 22.4301H12.33V25.8201H13.27V26.7601H10V25.8101Z" fill="#FF8C00"/>
+<path d="M14.82 25.9401C14.82 25.4501 15.18 25.0501 15.72 25.0501C16.26 25.0501 16.62 25.4501 16.62 25.9401C16.62 26.4301 16.26 26.8301 15.72 26.8301C15.18 26.8301 14.82 26.4301 14.82 25.9401Z" fill="#FF8C00"/>
+<path d="M10.06 33.17C11.23 32.23 12.08 31.5 12.08 30.91C12.08 30.52 11.83 30.34 11.44 30.34C11.12 30.34 10.86 30.55 10.63 30.75L10 30.12C10.48 29.64 10.92 29.42 11.61 29.42C12.55 29.42 13.2 29.98 13.2 30.84C13.2 31.54 12.47 32.3 11.75 32.9C11.99 32.87 12.32 32.85 12.54 32.85H13.42V33.83H10.06V33.17Z" fill="#FF8C00"/>
+<path d="M15.02 33.03C15.02 32.54 15.38 32.14 15.92 32.14C16.46 32.14 16.82 32.54 16.82 33.03C16.82 33.52 16.46 33.92 15.92 33.92C15.38 33.92 15.02 33.53 15.02 33.03Z" fill="#FF8C00"/>
+<path d="M16.02 6C14.51 6 13.06 6.57 11.96 7.6L12.72 8.36C13.59 7.56 14.75 7.08 16.02 7.07C18.73 7.07 20.93 9.27 20.93 11.98C20.93 13.25 20.44 14.41 19.64 15.28L20.4 16.04C21.39 14.98 21.99 13.55 22 11.98C22 8.68 19.32 6 16.02 6Z" fill="#FF8C00"/>
+<path d="M19.73 12.3C19.73 12.59 19.49 12.83 19.19 12.83H17.2L15.48 11.11V8.86997C15.48 8.57997 15.72 8.33997 16.02 8.33997C16.31 8.33997 16.55 8.57997 16.56 8.86997V11.77H19.2C19.49 11.77 19.72 12.01 19.73 12.3Z" fill="#FF8C00"/>
+</svg>

package/assets/images/menu/dhr/MHRP39N0018.svg

@@ -0,0 +1,11 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.09 11.85L12.34 10.98C12.18 10.9 12.07 10.73 12.07 10.55V9.92C12.11 9.87 12.16 9.81 12.2 9.75C12.43 9.42 12.61 9.07 12.74 8.69C13 8.57 13.17 8.31 13.17 8.03V7.3C13.17 7.12 13.1 6.95 12.99 6.82V5.84C13.03 5.41 12.89 4.98 12.61 4.65C12.23 4.22 11.62 4 10.79 4C9.95996 4 9.34996 4.22 8.97996 4.65C8.69996 4.98 8.55996 5.41 8.58996 5.84V6.81C8.46996 6.94 8.40996 7.11 8.40996 7.29V8.02C8.40996 8.24 8.50996 8.45 8.67996 8.59C8.80996 9.07 9.01996 9.52 9.31996 9.91V10.52C9.31996 10.7 9.21996 10.86 9.06996 10.94L7.43996 11.83C6.90996 12.12 6.57996 12.68 6.57996 13.28V14.06H15V13.32C15 12.7 14.65 12.13 14.09 11.85Z" fill="#111D5E"/>
+<path d="M23.86 17H15.43C14.8 17 14.29 17.51 14.29 18.14C14.29 18.77 14.8 19.28 15.43 19.28H23.86C24.49 19.28 25 18.77 25 18.14C25 17.51 24.49 17 23.86 17Z" fill="#2680EB"/>
+<path d="M15.43 21.57H18.65C18.64 21.57 18.63 21.58 18.62 21.58C18.24 21.73 18 22.1 18 22.5V23.86H15.43C14.8 23.86 14.29 23.35 14.29 22.71C14.29 22.08 14.8 21.57 15.43 21.57Z" fill="#2680EB"/>
+<path d="M15.43 26.14H18V28.43H15.43C14.8 28.43 14.29 27.92 14.29 27.29C14.29 26.65 14.8 26.14 15.43 26.14Z" fill="#2680EB"/>
+<path d="M15.43 30.71H18V33H15.43C14.8 33 14.29 32.49 14.29 31.86C14.29 31.22 14.8 30.71 15.43 30.71Z" fill="#2680EB"/>
+<path d="M11.8 21.14C11.78 21.13 11.75 21.12 11.73 21.12C11.68 21.12 11.64 21.14 11.61 21.17L11.27 21.51C11.24 21.54 11.22 21.58 11.22 21.63V23C11.22 23.23 11.14 23.44 10.97 23.61C10.8 23.78 10.59 23.86 10.36 23.86H5.86004C5.62004 23.86 5.42004 23.78 5.25004 23.61C5.07004 23.44 4.99004 23.23 4.99004 23V18.55C4.99004 18.32 5.07004 18.11 5.24004 17.94C5.41004 17.77 5.62004 17.69 5.85004 17.69H10.35C10.43 17.69 10.51 17.7 10.59 17.72C10.61 17.73 10.63 17.73 10.64 17.73C10.69 17.73 10.73 17.71 10.76 17.68L11.03 17.42C11.08 17.37 11.09 17.32 11.08 17.26C11.07 17.2 11.03 17.16 10.98 17.14C10.79 17.05 10.58 17 10.35 17H5.85004C5.42004 17 5.05004 17.15 4.75004 17.45C4.44004 17.75 4.29004 18.12 4.29004 18.54V22.99C4.29004 23.41 4.44004 23.78 4.75004 24.08C5.06004 24.38 5.42004 24.53 5.85004 24.53H10.35C10.78 24.53 11.15 24.38 11.45 24.08C11.76 23.78 11.91 23.41 11.91 22.99V21.29C11.91 21.21 11.87 21.16 11.8 21.14ZM13.16 18.07L12.56 17.48C12.48 17.4 12.37 17.35 12.25 17.35C12.13 17.35 12.03 17.4 11.94 17.48L8.44004 20.94L7.02004 19.53C6.94004 19.45 6.83004 19.4 6.71004 19.4C6.59004 19.4 6.49004 19.45 6.40004 19.53L5.80004 20.12C5.72004 20.2 5.67004 20.31 5.67004 20.42C5.67004 20.54 5.72004 20.64 5.80004 20.72L8.13004 23.02C8.21004 23.1 8.32004 23.15 8.44004 23.15C8.56004 23.15 8.66004 23.1 8.75004 23.02L13.15 18.67C13.23 18.59 13.28 18.48 13.28 18.37C13.29 18.26 13.25 18.15 13.16 18.07Z" fill="#2680EB"/>
+<path d="M11.84 29.6C11.82 29.59 11.79 29.58 11.77 29.58C11.72 29.58 11.68 29.6 11.65 29.63L11.31 29.97C11.28 30 11.26 30.04 11.26 30.09V31.45C11.26 31.68 11.18 31.89 11.01 32.06C10.84 32.23 10.63 32.31 10.4 32.31H5.88996C5.64996 32.31 5.44996 32.23 5.27996 32.06C5.09996 31.9 5.01996 31.7 5.01996 31.46V27.01C5.01996 26.78 5.09996 26.57 5.26996 26.4C5.43996 26.23 5.64996 26.15 5.87996 26.15H10.38C10.46 26.15 10.54 26.16 10.62 26.18C10.64 26.19 10.66 26.19 10.67 26.19C10.72 26.19 10.76 26.17 10.79 26.14L11.06 25.88C11.11 25.83 11.12 25.78 11.11 25.72C11.1 25.66 11.06 25.62 11.01 25.6C10.82 25.51 10.6 25.46 10.37 25.46H5.88996C5.45996 25.46 5.08996 25.61 4.78996 25.91C4.47996 26.21 4.32996 26.58 4.32996 27V31.45C4.32996 31.87 4.47996 32.24 4.78996 32.54C5.08996 32.85 5.45996 33 5.88996 33H10.39C10.82 33 11.19 32.85 11.49 32.55C11.8 32.25 11.95 31.88 11.95 31.46V29.76C11.95 29.69 11.91 29.63 11.84 29.6ZM13.2 26.53L12.6 25.94C12.52 25.86 12.41 25.81 12.29 25.81C12.17 25.81 12.07 25.86 11.98 25.94L8.47996 29.4L7.05996 27.99C6.97996 27.91 6.86996 27.86 6.74996 27.86C6.62996 27.86 6.52996 27.91 6.43996 27.99L5.83996 28.58C5.75996 28.66 5.70996 28.77 5.70996 28.88C5.70996 28.99 5.75996 29.1 5.83996 29.18L8.16996 31.48C8.24996 31.56 8.35996 31.61 8.47996 31.61C8.59996 31.61 8.69996 31.56 8.78996 31.48L13.19 27.13C13.27 27.05 13.32 26.94 13.32 26.83C13.33 26.72 13.29 26.62 13.2 26.53Z" fill="#2680EB"/>
+<path d="M21.86 36.71H3.43C2.8 36.71 2.29 36.2 2.29 35.57V3.43C2.29 2.8 2.8 2.29 3.43 2.29H18.28V8C18.28 9.89 19.82 11.43 21.71 11.43H25.79C25.8 11.43 25.81 11.43 25.82 11.43H27.43V19.23C28.1 19.09 28.79 19 29.5 19C29.57 19 29.64 19.01 29.71 19.01V10.29C29.71 9.98 29.58 9.69 29.38 9.48L20.24 0.34C20.02 0.12 19.73 0 19.42 0H3.42C1.54 0 0 1.54 0 3.43V35.57C0 37.46 1.54 39 3.43 39H25.04C23.85 38.44 22.76 37.67 21.86 36.71ZM20.57 3.9L25.81 9.14H21.71C21.08 9.14 20.57 8.63 20.57 8V3.9Z" fill="#2680EB"/>
+<path d="M29.5 20C26 20 22.9 21.9 21.3 24.8L19 22.5V29H25.5L22.7 26.2C24 23.7 26.5 22 29.5 22C33.6 22 37 25.4 37 29.5C37 33.6 33.6 37 29.5 37C26.2 37 23.5 34.9 22.4 32H20.3C21.4 36 25.1 39 29.5 39C34.8 39 39 34.7 39 29.5C39 24.3 34.7 20 29.5 20ZM28 25V30.1L32.7 32.9L33.5 31.6L29.5 29.2V25H28Z" fill="#FF8C00"/>
+</svg>

package/components/alert/index.js

@@ -7,10 +7,10 @@ import { jsx, css } from '@emotion/core';
 import LinearProgress from '../progress/linear';
 import { color as colors } from '../../styles/colors';
 import ButtonIcon from '../button/icon';
-import * as Icons from '../../icons';
-import { capitalize } from '../../utils';
+import Icon from '../../icons';
 import { hexToRGBA } from '../../styles/color-helper';
 import { typography } from '../../styles/typography';
+import { alignCenter, border, borderBox, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from '../../styles/general';
 const {
   heading3,
   heading4,
@@ -21,16 +21,10 @@ const {
 } = typography;
 const {
   system: {
-    rest
-  },
-  semantic: {
-    success,
-    warning,
-    danger,
-    info
+    rest,
+    white
   }
 } = colors;
-const colorMap = new Map([['info', info], ['success', success], ['warning', warning], ['danger', danger]]);
 const iconMap = new Map([['info', 'Info'], ['success', 'ApprovalFilled'], ['warning', 'Warning'], ['danger', 'CancelFilled']]);
 const maxWidthMap = new Map([['tiny', 320], ['small', 400], ['medium', 480]]);
 const primaryTypoMap = new Map([['tiny', heading5], ['small', heading4], ['medium', heading3]]);
@@ -46,76 +40,25 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   autoDisappear,
   duration,
   clearAble,
-  refs,
   onClose,
-  usedByNotify,
-  children,
-  ...props
+  children
 }, ref) => {
   const clearIconRef = useRef(null);
   const [percentState, setPercentState] = useState(100);
-  const mainColor = colorMap.get(color);
-  const AlertContainer = css`
-        position: relative;
-        display: block;
-        margin-bottom: 1rem;
-        transition: opacity ${progressing ? duration / 2 + 1 : duration * 1}s ease ${progressing ? duration / 2 : 0}s;
-        pointer-events: auto;
-        z-index: 9001;
-        max-width: ${maxWidthMap.get(size)}px;
-    `;
-  const AlertInfo = css`
-        display: flex;
-        position: relative;
-        width: 100%;
-        min-width: 320px;
-        border: 1px solid ${mainColor};
-        color: ${mainColor};
-        background-color: ${hexToRGBA(mainColor, 0.15)};
-        box-sizing: border-box;
-        border-radius: 4px;
-        padding: 0 4px 0 16px;
-        opacity: 1;
-        word-break: break-word;
-    `;
-  const AlertIcon = css`
-        display: inherit;
-        margin-right: 10px;
-        padding: 8px 0;
-    `;
-  const AlertText = css`
-        display: block;
-        margin-right: ${clearAble ? '10px' : 0};
-        padding: 8px 0;
-    `;
-  const AlertPrimary = css`
-        display: flex;
-        position: relative;
-        align-items: center;
-        justify-content: flex-start;
-        user-select: none;
-        ${secondary ? primaryTypoMap.get(size) : paragraph1}
-    `;
-  const AlertSecondary = css`
-        display: block;
-        user-select: none;
-        ${size === 'tiny' ? paragraph3 : paragraph2}
-    `;
-  const AlertClearIcon = css`
-        margin-left: auto;
-    `;
-  const linearProgressStyle = css`
-        display: block;
-        position: relative;
-        margin-top: ${size === 'medium' ? '4px' : '2px'};
-        padding: 0 5px;
-    `;
-  const NotFoundIcon = css`
-        display: block;
-        width: 70%;
-        height: 70%;
-        border: 1px dashed ${rest};
-    `;
+  const mainColor = colors[color];
+  const opacityColor = hexToRGBA(mainColor, 0.15);
+
+  const _AlertContainerCSS = AlertContainerCSS(size, progressing, duration);
+
+  const _AlertInfoCSS = AlertInfoCSS(mainColor, opacityColor);
+
+  const _AlertTextCSS = AlertTextCSS(clearAble);
+
+  const _AlertPrimaryCSS = AlertPrimaryCSS(secondary, size);
+
+  const _AlertSecondaryCSS = AlertSecondaryCSS(size);
+
+  const _linearProgressCSS = linearProgressCSS(size);
 
   const onClearAlert = (el, urgency) => {
     var _el$parentNode;
@@ -144,10 +87,11 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     let node = children;
 
     if (!node) {
-      const IconComp = Icons[capitalize(iconMap.get(color))];
+      const iconName = iconMap.get(color);
 
-      if (IconComp) {
-        node = jsx(IconComp, {
+      if (iconName) {
+        node = jsx(Icon, {
+          name: iconName,
           width: iconSizeMap.get(size),
           height: iconSizeMap.get(size),
           color: 'currentColor',
@@ -155,27 +99,31 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         });
       } else {
         node = jsx("span", {
-          css: NotFoundIcon
+          css: NotFoundIconCSS
         });
       }
     }
 
     return jsx("div", {
-      css: AlertInfo,
-      className: ['DGN-UI-Alert', className].join(' ').trim(),
-      ...props
+      css: _AlertInfoCSS,
+      className: ['DGN-UI-Alert', className].join(' ').trim().replace(/\s+/g, ' ')
     }, jsx("span", {
-      css: AlertIcon
+      css: AlertIconCSS,
+      className: 'DGN-UI-Alert-Icon'
     }, node), jsx("span", {
-      css: AlertText
+      css: _AlertTextCSS,
+      className: 'DGN-UI-Alert-Content'
     }, jsx("span", {
-      css: AlertPrimary
+      css: _AlertPrimaryCSS,
+      className: 'DGN-UI-Alert-Content-Primary'
     }, children ? typeof children === 'string' ? children : jsx("children", null) : text), secondary && jsx("span", {
-      css: AlertSecondary
+      css: _AlertSecondaryCSS,
+      className: 'DGN-UI-Alert-Content-Secondary'
     }, secondary)), jsx("span", {
-      css: AlertClearIcon,
+      css: AlertClearIconCSS,
       onClick: e => onClearAlert(e.currentTarget, true),
-      ref: clearIconRef
+      ref: clearIconRef,
+      className: 'DGN-UI-Alert-Clear'
     }, clearAble ? jsx(ButtonIcon, {
       circular: true,
       viewType: 'text',
@@ -183,10 +131,11 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       color: color,
       name: 'Close'
     }) : null));
-  }, [color, text, clearAble, secondary, size]);
+  }, [color, text, clearAble, secondary, size, children, className]);
   const LinearView = useMemo(() => {
     return progressing ? jsx("span", {
-      css: linearProgressStyle
+      css: _linearProgressCSS,
+      className: 'DGN-UI-Progress'
     }, jsx(LinearProgress, {
       determinate: true,
       background: 'transparent',
@@ -198,10 +147,8 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         boxShadow: 'none'
       }
     })) : null;
-  }, [percentState]);
+  }, [progressing, size, percentState]);
   useEffect(() => {
-    if (refs) refs(ref);
-
     if (progressing) {
       setTimeout(() => {
         setPercentState(0);
@@ -213,17 +160,88 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, []);
   return jsx("div", {
-    css: AlertContainer,
+    css: _AlertContainerCSS,
+    className: 'DGN-UI-Container-Alert',
     ref: ref
   }, AlertView, LinearView);
 }));
+
+const AlertContainerCSS = (size, progressing, duration) => css`
+    ${positionRelative};
+    ${displayBlock};
+    max-width: ${maxWidthMap.get(size)}px;
+    transition: opacity ${progressing ? duration / 2 + 1 : duration * 1}s ease ${progressing ? duration / 2 : 0}s;
+    margin-bottom: 1rem;
+    pointer-events: auto;
+    z-index: 9001;
+`;
+
+const AlertInfoCSS = (mainColor, opacityColor) => css`
+    ${flexRow};
+    ${positionRelative};
+    ${borderBox};
+    ${borderRadius4px};
+    ${breakWord};
+    ${border(1, mainColor)};
+    color: ${mainColor};
+    background-image: linear-gradient(${opacityColor}, ${opacityColor});
+    background-color: ${white};
+    width: 100%;
+    min-width: 320px;
+    padding: 0 4px 0 16px;
+    opacity: 1;
+`;
+
+const AlertIconCSS = css`
+    display: inherit;
+    margin-right: 10px;
+    padding: 8px 0;
+`;
+
+const AlertTextCSS = clearAble => css`
+    ${displayBlock};
+    margin-right: ${clearAble ? '10px' : 0};
+    padding: 8px 0;
+`;
+
+const AlertPrimaryCSS = (secondary, size) => css`
+    ${flexRow};
+    ${positionRelative};
+    ${alignCenter};
+    ${justifyStart};
+    ${userSelectNone};
+    ${secondary ? primaryTypoMap.get(size) : paragraph1}
+`;
+
+const AlertSecondaryCSS = size => css`
+    ${displayBlock};
+    ${userSelectNone};
+    ${size === 'tiny' ? paragraph3 : paragraph2}
+`;
+
+const AlertClearIconCSS = css`
+    margin-left: auto;
+`;
+
+const linearProgressCSS = size => css`
+    ${displayBlock};
+    ${positionRelative};
+    margin-top: ${size === 'medium' ? '4px' : '2px'};
+    padding: 0 5px;
+`;
+
+const NotFoundIconCSS = css`
+    ${displayBlock};
+    width: 70%;
+    height: 70%;
+    border: 1px dashed ${rest};
+`;
 Alert.defaultProps = {
   color: 'info',
   size: 'medium',
   className: '',
   clearAble: true,
   progressing: false,
-  usedByNotify: false,
   autoDisappear: false,
   duration: 5
 };
@@ -255,16 +273,10 @@ Alert.propTypes = {
   /** The amount of time the alert is displayed. The unit is the second */
   duration: PropTypes.number,
 
-  /** refs is a function, use to get ref of Alert component */
-  refs: PropTypes.func,
-
   /** The function will run after remove an Alert component */
   onClose: PropTypes.func,
 
   /** The element to display in alert like text props (priority) */
-  children: PropTypes.node,
-
-  /** any props else */
-  props: PropTypes.any
+  children: PropTypes.node
 };
 export default Alert;

package/components/alert/notify.js

@@ -119,14 +119,12 @@ const AlertNotify = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
       ReactDOM.render( /*#__PURE__*/React.createElement(Alert, {
         onClose: e => onClose(e, position),
-        usedByNotify: true,
         ...props,
         ...options
       }, message), document.querySelector(`div[class^="Notify-Alert-${position.vertical}-${position.horizontal}"]`).appendChild(el));
     } else {
       ReactDOM.render( /*#__PURE__*/React.createElement(Alert, {
         onClose: onClose,
-        usedByNotify: true,
         ...props,
         ...options
       }, message), document.querySelector(`div[class^="Notify-Alert-"]`).appendChild(el));

package/components/avatar/index.js

@@ -498,18 +498,18 @@ Avatar.propTypes = {
   /** source of file (http:// or https://) */
   src: PropTypes.string,
 
-  /**
-   * it is used to display the default if there is no src<br />
-   * if undefined, will display icons available in the icons store
+  /**
+   * it is used to display the default if there is no src<br />
+   * if undefined, will display icons available in the icons store
    */
   defaultSrc: PropTypes.string,
 
   /** the direction to display more info */
   direction: PropTypes.oneOf(['top', 'down', 'left', 'right']),
 
-  /**
-   * data to display when hoverAble is true<br />
-   * data is an object or function return a jsx element
+  /**
+   * data to display when hoverAble is true<br />
+   * data is an object or function return a jsx element
    */
   data: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
 
@@ -525,19 +525,19 @@ Avatar.propTypes = {
   /** any props else */
   props: PropTypes.any,
 
-  /**
-   * ref methods
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/chip/index.js

@@ -48,7 +48,7 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   disabled,
   readOnly,
   children,
-  ...props
+  style
 }, reference) => {
   const ref = useRef(null);
   const IconRef = useRef(null);
@@ -103,7 +103,7 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     }
 
-    return jsx("div", {
+    return startIcon && jsx("div", {
       css: ChipIconCSS,
       className: size
     }, node);
@@ -114,7 +114,8 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: size
     }, jsx(Typography, {
       type: size === 'small' ? 'p2' : 'p1',
-      color: 'inherit'
+      color: 'inherit',
+      lineClamp: 1
     }, renderLabel()));
   }, [label, size, startIcon, endIcon, clearAble]);
   const endIconView = useMemo(() => {
@@ -138,20 +139,21 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       viewType: 'ghost',
       name: 'Close',
       color: viewType === 'outlined' && color ? 'inherit' : undefined,
+      disabled: disabled,
       onClick: onRemoveHandler
     })) : endIcon && jsx("div", {
       css: ChipIconCSS,
       className: 'end-icon ' + size,
       ref: IconRef
     }, node);
-  }, [clearAble, viewType, color, endIcon, size]);
+  }, [clearAble, viewType, color, endIcon, size, disabled]);
   return jsx("div", {
     css: ChipRootCSS(onClick, onDbClick, color),
     ref: ref,
     className: ['DGN-UI-Chip', size, className, color && color !== 'default' && color, color && color !== 'default' && viewType, disabled && 'chip--disabled', readOnly && 'chip--readOnly'].join(' ').trim().replace(/\s+/g, ' '),
+    style: style,
     onClick: _onClick,
-    onDoubleClick: _onDbClick,
-    ...props
+    onDoubleClick: _onDbClick
   }, startIconView, labelView, endIconView, children);
 }));
 const ChipIconCSS = css`
@@ -272,6 +274,7 @@ const ChipRootCSS = (onClick, onDbClick, color) => css`
 Chip.defaultProps = {
   label: '',
   className: '',
+  style: {},
   viewType: 'outlined',
   size: 'small',
   clearAble: false
@@ -284,6 +287,9 @@ Chip.propTypes = {
   className: PropTypes.string,
 
   /** max length content to display was allowed */
+
+  /** style inline of component */
+  style: PropTypes.object,
   maxLength: PropTypes.number,
 
   /** the icon display at head of Chip */
@@ -326,9 +332,6 @@ Chip.propTypes = {
   onDoubleClick: PropTypes.func,
 
   /** content to display on Chip (the same to label) */
-  children: PropTypes.node,
-
-  /** any props else */
-  props: PropTypes.any
+  children: PropTypes.node
 };
 export default Chip;

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

@@ -1856,6 +1856,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref.current.allNewAttached = allNewAttached;
     ref.current.attached = attached;
     ref.current.clear = clearAllAttached;
+    ref.current.openFileDialog = triggerClickInput;
     return ref.current;
   });
   return jsx("div", { ...props,
@@ -1880,17 +1881,17 @@ Attachment.defaultProps = {
   uploadErrorInfo: {}
 };
 Attachment.propTypes = {
-  /** List attachment:<br />
-   * [{<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
-   * }, ...]
+  /** List attachment:<br />
+   * [{<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
+   * }, ...]
    */
   data: PropTypes.array,
 
@@ -1963,15 +1964,15 @@ Attachment.propTypes = {
   /** event when uploading file failed */
   onUploadError: PropTypes.func,
 
-  /**
-   * event when removed file(s)<br/>
-   * return data: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
-   * }
+  /**
+   * event when removed file(s)<br/>
+   * return data: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
+   * }
    */
   onRemove: PropTypes.func,