diginet-core-ui 1.4.54 → 1.4.55-beta.2

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

@@ -0,0 +1,14 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2363_38)">
+<path d="M39 9.7C38.9 9.1 38.9 8.4 38.7 7.7C37.6 3.4 33.8 0.3 29.2 0H29C28.9 0 28.8 0 28.6 0C27.9 0 27.5 0.5 27.5 1.1C27.5 1.7 28 2.1 28.6 2.1H28.7C29 2.1 29.3 2.1 29.6 2.2C33.7 2.7 36.8 6.1 36.9 10.1C36.9 10.8 37.3 11.2 37.9 11.2C38.2 11.2 38.5 11.1 38.7 10.9C39 10.6 39 10.3 39 9.9V9.7Z" fill="#FFC766"/>
+<path d="M35.3 10.1C35.3 10 35.3 9.9 35.3 9.7C34.9 7.3 33.6 5.6 31.4 4.5C30.4 4 29.3 3.8 28.1 3.8C27.5 3.8 27.1 4.2 27.1 4.7C27.1 5.2 27.4 5.7 27.9 5.8C28 5.8 28.1 5.8 28.2 5.8H28.3C29.9 5.9 31.2 6.5 32.2 7.6C32.9 8.4 33.3 9.4 33.3 10.4C33.3 11 33.7 11.5 34.3 11.5C34.9 11.5 35.3 11 35.3 10.4V10.1Z" fill="#FFC766"/>
+<path d="M0 29.3C0.1 29.9 0.1 30.6 0.3 31.3C1.4 35.6 5.2 38.7 9.8 39H10C10.1 39 10.2 39 10.4 39C11.1 39 11.5 38.5 11.5 37.9C11.5 37.3 11 36.9 10.4 36.9H10.3C10 36.9 9.7 36.9 9.4 36.8C5.2 36.4 2.1 33 2.1 29C2.1 28.3 1.7 27.9 1.1 27.9C0.8 27.9 0.5 28 0.3 28.2C0.1 28.4 0 28.7 0 29V29.3Z" fill="#FFC766"/>
+<path d="M3.7 28.9C3.7 29 3.7 29.1 3.7 29.3C4.1 31.7 5.4 33.4 7.6 34.5C8.6 35 9.7 35.2 10.9 35.2C11.5 35.2 11.9 34.8 11.9 34.3C11.9 33.8 11.6 33.3 11.1 33.2C11 33.2 10.9 33.2 10.8 33.2H10.7C9.1 33.1 7.8 32.5 6.8 31.4C6.1 30.6 5.7 29.6 5.7 28.6C5.7 28 5.3 27.5 4.7 27.5C4.1 27.5 3.7 28 3.7 28.6V28.9Z" fill="#FFC766"/>
+<path d="M31.8001 26.9999C31.8001 29.8999 30.6001 32.1999 28.2001 33.7999C24.7001 36.1999 20.4001 35.7999 17.3001 32.6999L11.1001 26.4999L9.30009 24.6999C7.70009 23.0999 6.10009 21.4999 4.50009 19.8999C4.10009 19.3999 3.90009 18.9999 4.00009 18.3999C4.10009 17.7999 4.50009 17.3999 5.10009 17.1999C5.70009 16.9999 6.30009 17.1999 6.70009 17.5999C8.20009 19.0999 9.70009 20.5999 11.2001 22.0999L13.0001 23.8999C13.0001 23.9999 13.1001 23.9999 13.2001 24.0999C13.5001 24.2999 13.8001 24.2999 14.1001 24.0999C14.4001 23.7999 14.4001 23.4999 14.2001 23.1999C14.2001 23.0999 14.1001 23.0999 14.0001 22.9999L7.40009 16.3999C6.50009 15.4999 5.70009 14.6999 4.80009 13.7999C4.40009 13.3999 4.30009 12.8999 4.40009 12.3999C4.50009 11.8999 4.80009 11.4999 5.30009 11.1999C5.90009 10.8999 6.60009 11.0999 7.20009 11.5999L12.9001 17.2999L16.2001 20.5999C16.3001 20.6999 16.3001 20.6999 16.4001 20.7999C16.7001 20.9999 17.0001 20.9999 17.3001 20.7999C17.6001 20.5999 17.6001 20.1999 17.4001 19.9999C17.4001 19.8999 17.3001 19.8999 17.2001 19.7999L7.40009 9.99994C7.30009 9.89994 7.20009 9.69994 7.10009 9.59994C6.70009 9.09994 6.70009 8.29994 7.10009 7.69994C7.40009 7.29994 7.80009 7.09994 8.20009 7.09994C8.70009 7.09994 9.20009 7.29994 9.60009 7.59994C11.9001 9.99994 14.4001 12.3999 16.7001 14.6999L19.4001 17.2999L19.6001 17.4999C19.9001 17.7999 20.3001 17.7999 20.5001 17.4999C20.8001 17.1999 20.8001 16.8999 20.5001 16.4999C20.4001 16.3999 20.4001 16.3999 20.3001 16.2999L12.8001 8.99994C12.4001 8.59994 12.2001 8.09994 12.3001 7.59994C12.4001 6.99994 12.8001 6.49994 13.4001 6.29994C14.0001 6.09994 14.6001 6.19994 15.0001 6.69994C18.9001 10.5999 22.8001 14.4999 26.7001 18.3999C26.9001 18.5999 27.2001 18.8999 27.6001 18.6999C28.0001 18.4999 28.0001 18.0999 28.0001 17.8999V17.3999C28.0001 16.0999 28.0001 14.6999 28.0001 13.3999C28.0001 12.2999 28.8001 11.4999 29.9001 11.4999C31.0001 11.4999 31.8001 12.2999 31.8001 13.3999V16.3999C31.8001 19.7999 31.8001 23.3999 31.8001 26.9999Z" fill="#FFAA00"/>
+</g>
+<defs>
+<clipPath id="clip0_2363_38">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,15 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2363_39)">
+<path d="M38.6992 9.52442L29.5758 0.401028C29.275 0.100257 28.9743 0 28.6735 0H12.6324C10.7275 0 9.22363 1.50386 9.22363 3.40874V6.01542C9.72492 6.11568 10.2262 6.3162 10.527 6.71722L11.4293 7.61954V3.40874C11.4293 2.8072 11.9306 2.30591 12.5321 2.30591H27.4704V8.02057C27.4704 9.92545 28.9743 11.4293 30.8792 11.4293H36.5938V35.6915C36.5938 36.2931 36.0925 36.7943 35.491 36.7943H12.6324C12.0308 36.7943 11.5295 36.2931 11.5295 35.6915V31.8817C11.4293 31.7815 11.329 31.6812 11.2288 31.581L9.22363 29.5758V35.5913C9.22363 37.4961 10.7275 39 12.6324 39H35.5912C37.4961 39 39 37.4961 39 35.5913V10.3265C39 10.0257 38.8997 9.72493 38.6992 9.52442ZM30.9794 9.12339C30.3779 9.12339 29.7763 8.62211 29.7763 8.02057V3.91003L34.9897 9.12339H30.9794Z" fill="#2680EB"/>
+<path d="M34.0002 26.3C34.0002 26.9 33.5002 27.4 32.9002 27.4H25.8002C25.9002 26.8 26.0002 26.2 26.0002 25.6V25.1H32.9002C33.5002 25.2 34.0002 25.7 34.0002 26.3Z" fill="#2680EB"/>
+<path d="M34.0002 21.2C34.0002 21.8 33.5002 22.3 32.9002 22.3H26.0002C26.0002 21.5 26.0002 20.8 26.0002 20H32.9002C33.5002 20.1 34.0002 20.6 34.0002 21.2Z" fill="#2680EB"/>
+<path d="M34.0002 16.1C34.0002 16.7 33.5002 17.3 32.9002 17.3H26.0002V15H32.9002C33.5002 15 34.0002 15.5 34.0002 16.1Z" fill="#2680EB"/>
+<path d="M29.4002 31.4C29.4002 32 28.9002 32.5 28.3002 32.5H22.4002C23.3002 31.8 24.1002 31.1 24.7002 30.2H28.3002C28.9002 30.3 29.4002 30.8 29.4002 31.4Z" fill="#2680EB"/>
+<path d="M25.0001 25.7C25.0001 28.3 23.9001 30.4 21.8001 31.8C18.7001 34 14.8001 33.6 12.1001 30.9L4.9001 23.7C3.5001 22.3 2.0001 20.8 0.600098 19.4C0.100098 18.9 -0.0999023 18.5 9.76566e-05 18C0.100098 17.4 0.400098 17.1 1.0001 16.9C1.6001 16.7 2.1001 16.9 2.5001 17.3C3.8001 18.6 5.2001 20 6.6001 21.3L8.3001 23C8.6001 23.2 8.9001 23.2 9.1001 23C9.4001 22.8 9.4001 22.5 9.2001 22.2C9.1001 22.2 9.0001 22.1 9.0001 22L3.0001 16.1C2.2001 15.3 1.4001 14.5 0.700098 13.8C0.400098 13.5 0.200098 13 0.300098 12.6C0.400098 12.1 0.700098 11.8 1.1001 11.6C1.7001 11.3 2.3001 11.5 2.8001 12L8.0001 17L11.0001 20C11.1001 20.1 11.1001 20.1 11.2001 20.2C11.5001 20.4 11.7001 20.4 12.0001 20.2C12.2001 20 12.3001 19.7 12.1001 19.4C12.1001 19.3 12.0001 19.3 11.9001 19.2L3.2001 10.4C3.1001 10.3 3.0001 10.2 2.9001 10.1C2.5001 9.6 2.6001 8.9 2.9001 8.4C3.2001 8.1 3.5001 7.9 3.9001 7.9C4.3001 7.9 4.8001 8.1 5.1001 8.4C7.2001 10.5 9.4001 12.7 11.5001 14.8L14.1001 17.4C14.4001 17.6 14.7001 17.6 14.9001 17.4C15.1001 17.2 15.1001 16.8 14.9001 16.5C14.8001 16.4 14.8001 16.4 14.7001 16.3L7.9001 9.5C7.6001 9.1 7.4001 8.7 7.5001 8.2C7.6001 7.6 7.9001 7.2 8.5001 7.1C9.0001 6.9 9.5001 7 9.9001 7.4C13.4001 10.9 16.9001 14.4 20.4001 17.9C20.6001 18.1 20.8001 18.3 21.2001 18.2C21.6001 18 21.6001 17.7 21.6001 17.5V17C21.6001 15.8 21.6001 14.6 21.6001 13.4C21.6001 12.4 22.3001 11.7 23.3001 11.7C24.3001 11.7 25.0001 12.4 25.0001 13.4V16.1C25.0001 19.2 25.0001 22.5 25.0001 25.7Z" fill="#FFAA00"/>
+</g>
+<defs>
+<clipPath id="clip0_2363_39">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,13 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2376_31)">
+<path d="M34.4 6.99995C30.9 6.29995 27.6 5.09995 24.6 3.19995C23.3 2.39995 22 1.39995 20.8 0.399951C20.1 -0.200049 19 -0.200049 18.3 0.399951C17.1 1.39995 15.8 2.39995 14.4 3.19995C11.4 5.09995 8.1 6.39995 4.6 6.99995C3.7 7.19995 3 8.09995 3 8.99995V18.4C3 26.0999 7.3 33.2 14 36.4L18.7 38.7C19.2 39 19.9 39 20.4 38.7C20.4 38.7 22 37.9 24.4 36.7C26.7 35.5 28 34.6 28.8 33.9C29.3 33.5 29.9 33 30.3 32.5C33.9 29 36 23.9 36 18.5V8.99995C36 8.09995 35.3 7.19995 34.4 6.99995Z" fill="#1CA261"/>
+<path d="M32.1 8.99995C29.2 8.39995 26.4 7.39995 23.8 5.79995C22.7 5.09995 21.6 4.29995 20.5 3.39995C19.9 2.89995 19 2.89995 18.3 3.39995C17.3 4.29995 16.2 5.09995 15 5.79995C12.6 7.29995 9.8 8.39995 6.9 8.99995C6.1 9.19995 5.5 9.89995 5.5 10.7V18.7C5.5 25.2 9.1 31.2 14.8 34L18.8 35.9C19.3 36.1 19.8 36.1 20.3 35.9C20.3 35.9 21.7 35.2 23.7 34.2C25.7 33.2 26.8 32.4 27.5 31.8C28 31.4 28.4 31 28.8 30.6C31.8 27.5 33.6 23.2 33.6 18.6V10.6C33.5 9.79995 32.9 9.09995 32.1 8.99995Z" fill="#72E395"/>
+<path d="M29.8 10.9C27.4 10.4 25.1 9.59995 23 8.29995C22.1 7.69995 21.2 7.09995 20.3 6.39995C19.8 5.99995 19 5.99995 18.5 6.39995C17.7 7.09995 16.8 7.79995 15.8 8.29995C13.7 9.59995 11.4 10.4 9 10.9C8.4 11 7.9 11.6 7.9 12.3V18.7999C7.9 24.0999 10.9 28.9999 15.5 31.2999L18.7 32.9C19.1 33.1 19.5 33.1 19.9 32.9C19.9 32.9 21 32.3 22.7 31.5C24.3 30.7 25.2 30.1 25.8 29.6C26.2 29.3 26.5 29 26.9 28.6C29.4 26.1 30.8 22.4999 30.8 18.7999V12.3C30.9 11.6 30.5 11 29.8 10.9Z" fill="#1CA261"/>
+<path d="M24.6 18.1H20.9V14.4C20.9 13.6 20.3 13 19.5 13C18.7 13 18.1 13.6 18.1 14.4V18.1H14.4C13.6 18.1 13 18.7 13 19.5C13 20.3 13.6 20.9 14.4 20.9H18.1V24.6C18.1 25.4 18.7 26 19.5 26C20.3 26 20.9 25.4 20.9 24.6V20.9H24.6C25.4 20.9 26 20.3 26 19.5C26 18.7 25.4 18.1 24.6 18.1Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2376_31">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/components/accordion/details.js

@@ -7,7 +7,7 @@ import { boxBorder, overflowHidden, parseHeight, pointerEventsNone, positionRela
 import { useTheme } from "../../theme";
 import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../utils";
-const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const AccordionDetails = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
 

package/components/accordion/group.js

@@ -7,7 +7,7 @@ import { borderRadius, borderRadius4px } from "../../styles/general";
 import { useTheme } from "../../theme";
 import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames } from "../../utils";
-const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const AccordionGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
 

package/components/accordion/index.js

@@ -45,7 +45,7 @@ const handleTransition = (timer, el, beginHeight, endHeight = null) => {
     el.style.height = endHeight;
   }, duration);
 };
-const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Accordion = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   var _ref$current;
   if (!reference) reference = useRef(null);
   const theme = useTheme();

package/components/accordion/summary.js

@@ -9,7 +9,7 @@ import { useTheme } from "../../theme";
 import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../utils";
 import AccordionContext from "./context";
-const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const AccordionSummary = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

package/components/alert/index.js

@@ -15,7 +15,7 @@ const primaryTypoMap = new Map([['tiny', 'typography.heading5'], ['small', 'typo
 const iconSizeMap = new Map([['tiny', 16], ['small', 20], ['medium', 24]]);
 const linearProgressSizeMap = new Map([['tiny', 2], ['small', 3], ['medium', 4]]);
 const transitionTime = 300;
-const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Alert = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

package/components/alert/notify.js

@@ -27,7 +27,7 @@ const positionHorizontalMap = new Map([['left', css`
         `], ['right', css`
             right: 15px;
         `]]);
-const Notify = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Notify = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
 

package/components/avatar/index.js

@@ -22,7 +22,7 @@ const checkFileType = (type, matchType) => {
     return new RegExp(matchType).test(type);
   }
 };
-const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Avatar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
 
@@ -108,7 +108,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) =
     !!onRemove && onRemove();
   };
   const renderData = () => {
-    if ( /*#__PURE__*/isValidElement(data)) return data;
+    if (/*#__PURE__*/isValidElement(data)) return data;
     const info = Object.keys(data || {});
     if (info !== null && info !== void 0 && info.length) {
       return info.map((key, index) => {

package/components/badge/index.js

@@ -57,7 +57,7 @@ const calDotPos = (anchorOrigin, contentDirection, dotSize, hasContent, size) =>
     }
   }
 };
-const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Badge = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

package/components/breadcrumb/index.js

@@ -14,7 +14,7 @@ import { classNames, getProp } from "../../utils";
 const sizeIconMap = new Map([['tiny', 16], ['small', 18], ['medium', 20]]);
 const sizeTypographyPMap = new Map([['tiny', 'p3'], ['small', 'p2'], ['medium', 'p1']]);
 const sizeTypographyHMap = new Map([['tiny', 'h5'], ['small', 'h4'], ['medium', 'h3']]);
-const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Breadcrumb = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

package/components/button/icon.js

@@ -48,7 +48,7 @@ const IconLoadingView = iconSize => {
     width: parseInt(iconSize)
   });
 };
-const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const ButtonIcon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   var _sizeMap$get, _sizeMap$get2;
   if (!reference) reference = useRef(null);
   const theme = useTheme();

package/components/button/index.js

@@ -55,7 +55,7 @@ const typographySizeMap = new Map([['tiny', 'h5'], ['small', 'h5'], ['medium', '
 const minHeightSizeMap = new Map([['tiny', '24px'], ['small', '32px'], ['medium', '40px'], ['large', '48px'], ['giant', '56px']]);
 const minHeightSizeLinkMap = new Map([['tiny', '16px'], ['small', '20px'], ['medium', '24px'], ['large', '32px'], ['giant', '40px']]);
 const alphaLoading = 0.2;
-const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   var _iconSizeMap;
   if (!reference) reference = useRef(null);
   const theme = useTheme();

package/components/button/more.js

@@ -9,7 +9,7 @@ import { bgColor, borderNone, cursorPointer, displayFlex, flexCol, flexRow, item
 import { useTheme } from "../../theme";
 import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../utils";
-const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const ButtonMore = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
 
@@ -29,7 +29,8 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     options,
     optionType,
     popoverProp,
-    style
+    style,
+    onClick
   } = props;
   const isOptionFull = optionType === 'full';
   let anchor = anchorProp;
@@ -38,7 +39,8 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
   const [iconState, setIconState] = useState(false);
   const _OptionFullCSS = OptionFullCSS(theme);
   const _PopoverCSS = PopoverCSS(isOptionFull, theme);
-  const openPopover = () => {
+  const openPopover = e => {
+    onClick && onClick(e);
     setOpenState(true);
   };
   const closePopover = () => {
@@ -56,9 +58,11 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
   });
   const renderOptions = () => {
     return options.map((item, idx) => {
-      if (item !== null && item !== void 0 && item.hidden) return null;else if ( /*#__PURE__*/isValidElement(item)) return item;else {
+      if (item !== null && item !== void 0 && item.hidden) return null;else if (/*#__PURE__*/isValidElement(item)) return item;else {
         const icon = item === null || item === void 0 ? void 0 : item.icon;
         const label = item === null || item === void 0 ? void 0 : item.label;
+        const className = (item === null || item === void 0 ? void 0 : item.className) || '';
+        const style = (item === null || item === void 0 ? void 0 : item.style) || {};
         const action = () => {
           closePopover();
           if (typeof (item === null || item === void 0 ? void 0 : item.action) === 'function') item === null || item === void 0 ? void 0 : item.action();
@@ -67,7 +71,8 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
         return isOptionFull ? jsx("button", {
           key: idx,
           css: _OptionFullCSS,
-          className: 'DGN-UI-ButtonMore-Option',
+          className: `DGN-UI-ButtonMore-Option ${className}`,
+          style: style,
           onClick: action
         }, icon ? jsx(Icon, {
           className: 'DGN-UI-ButtonMore-Option-Icon',
@@ -197,14 +202,18 @@ ButtonMore.propTypes = {
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     icon: PropTypes.string,
     action: PropTypes.func,
-    hidden: PropTypes.bool
+    hidden: PropTypes.bool,
+    className: PropTypes.string,
+    style: PropTypes.object
   })),
   /** The variant of option's type. */
   optionType: PropTypes.oneOf(['full', 'icon']),
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-popover) applied to the main `Popover`. */
   popoverProp: PropTypes.object,
   /** Style inline of component. */
-  style: PropTypes.object
+  style: PropTypes.object,
+  /** Callback fired when the component is clicked. */
+  onClick: PropTypes.func
 };
 export { ButtonMore };
 export default OptionWrapper(ButtonMore);

package/components/button/ripple-effect.js

@@ -13,7 +13,7 @@ const useDebouncedRippleCleanUp = (rippleCount, duration, cleanUpFunction) => {
     return undefined;
   }, [rippleCount, duration, cleanUpFunction]);
 };
-const Ripple = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const Ripple = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   duration = 850,
   color = 'system/standard',
   circular = false,

package/components/card/body.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames, refType as ref } from "../../utils";
-const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const CardBody = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
 
   // props priority: `inProps` > `themeDefaultProps`

package/components/card/extra.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames, refType as ref } from "../../utils";
-const CardExtra = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const CardExtra = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
 
   // props priority: `inProps` > `themeDefaultProps`

package/components/card/footer.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames, refType as ref } from "../../utils";
-const CardFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const CardFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
 
   // props priority: `inProps` > `themeDefaultProps`

package/components/card/header.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames, refType as ref } from "../../utils";
-const CardHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const CardHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
 
   // props priority: `inProps` > `themeDefaultProps`

package/components/card/index.js

@@ -12,7 +12,7 @@ import { CardBody } from "./body";
 import { CardFooter } from "./footer";
 import CardHeader from "./header";
 import useThemeProps from "../../theme/utils/useThemeProps";
-const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Card = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

package/components/chart/Pie/Circle.js

@@ -3,7 +3,7 @@
 import PropTypes from 'prop-types';
 import { memo, forwardRef } from 'react';
 import { jsx } from '@emotion/core';
-const Circle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const Circle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   center,
   color,
   onMouseEnter,

package/components/chart/Pie/Sector.js

@@ -4,7 +4,7 @@ import { useRef, memo, forwardRef } from 'react';
 import PropTypes from "prop-types";
 import ReactDOM from 'react-dom';
 import { jsx, css } from '@emotion/core';
-const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const Sector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   fill,
   strokeColor,
   strokeLinejoin,

package/components/chart/Pie/index.js

@@ -7,7 +7,7 @@ import { jsx, css } from '@emotion/core';
 import Circle from "./Circle";
 import Sectors from "./Sectors";
 import Sector from "./Sector";
-const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const PieChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   expandOnHover,
   renderSelectedItem,
   type,

package/components/chart/Pie-v2/Circle.js

@@ -3,7 +3,7 @@
 import PropTypes from 'prop-types';
 import { memo, forwardRef } from 'react';
 import { jsx } from '@emotion/core';
-const Circle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const Circle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   center,
   color,
   onMouseEnter,

package/components/chart/Pie-v2/Sector.js

@@ -3,7 +3,7 @@
 import { useRef, memo, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const Sector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   fill,
   strokeColor,
   strokeLinejoin,

package/components/chart/Pie-v2/index.js

@@ -9,7 +9,7 @@ import { typography } from "../../../styles/typography";
 import Circle from "./Circle";
 import Sectors from "./Sectors";
 import Sector from "./Sector";
-const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const PieChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   expandOnHover,
   renderSelectedItem,
   // type,

package/components/chart/bar/Bar.js

@@ -5,7 +5,7 @@ import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import Labels from "./Labels";
 import { typography } from "../../../styles/typography";
-const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const Bars = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   // barsOpacity,
   barsMargin,
   barsColor,

package/components/chart/bar/index.js

@@ -9,7 +9,7 @@ import Labels from "./Labels";
 import Grid from "./Grid";
 import Bars from "./Bar";
 import { randomString } from "../../../utils";
-const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   labelsVisible,
   labelsCharacterWidth,
   labelsCountY,

package/components/chart/bar-v2/Bar.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import Labels from "./Labels";
 import { randomString } from "../../../utils";
 import { typography } from "../../../styles/typography";
-const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const Bars = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   // barsOpacity,
   barsMargin,
   barsColor,

package/components/chart/bar-v2/index.js

@@ -9,7 +9,7 @@ import Labels from "./Labels";
 import Grid from "./Grid";
 import Bars from "./Bar";
 import { randomString } from "../../../utils";
-const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   labelsVisible,
   labelsCharacterWidth,
   labelsCountY,

package/components/chart/line/index.js

@@ -10,7 +10,7 @@ import Points from "./Point";
 // import Title from './Title';
 import Path from "./Path";
 import { randomString } from "../../../utils";
-const LineChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const LineChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   labelsVisible,
   labelsCharacterWidth,
   labelsCountY,

package/components/chart/line-v2/index.js

@@ -10,7 +10,7 @@ import Points from "./Point";
 // import Title from './Title';
 import Path from "./Path";
 import { randomString } from "../../../utils";
-const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   labelsVisible,
   labelsCharacterWidth,
   labelsCountY,

package/components/check-text/index.js

@@ -13,7 +13,7 @@ const colorNum = {
   option2: 2,
   option3: 3
 };
-const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const InterviewStatus = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   disabled,
   readOnly,
   chosen,

package/components/check-text/interview-confirmation.js

@@ -12,7 +12,7 @@ const colorNum = {
   Maybe: 1,
   No: 2
 };
-const InterviewConfirmation = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const InterviewConfirmation = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   disabled,
   readOnly,
   chosen,

package/components/check-text/interview-status.js

@@ -12,7 +12,7 @@ const colorNum = {
   Started: 1,
   Cancel: 2
 };
-const InterviewStatus = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const InterviewStatus = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   disabled,
   readOnly,
   chosen,

package/components/chip/index.js

@@ -15,7 +15,7 @@ const iconSizeMap = new Map([['small', `16px`], ['medium', `20px`], ['large', `2
 const typographySizeMap = new Map([['small', 'p3'], ['medium', 'p2'], ['large', 'p1']]);
 const paddingSizeMap = new Map([['small', `0px 6px`], ['medium', `0px 8px`], ['large', `0px 10px`]]);
 const minHeightSizeMap = new Map([['small', `20px`], ['medium', `24px`], ['large', `28px`]]);
-const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

package/components/collapse/index.js

@@ -4,7 +4,7 @@ import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { displayBlock, parseWidthHeight, positionRelative } from "../../styles/general";
-const Collapse = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const Collapse = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   children,
   className,
   id,

package/components/divider/index.js

@@ -8,7 +8,7 @@ import { bgColor, borderNone, flexShrink0, parseWidthHeight } from "../../styles
 import { useTheme } from "../../theme";
 import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../utils";
-const Divider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Divider = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

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

@@ -127,7 +127,7 @@ const handleDownload = (url, name, onDownload) => {
 const divideSizeMap = new Map([['B', 1], ['KB', 1024], ['MB', 1024 ** 2], ['GB', 1024 ** 3], ['TB', 1024 ** 4]]);
 const viewTypeIconMap = new Map([['detail', 'ListView'], ['icon', 'IconView'], ['picture', 'ModuleView']]);
 const viewTypeSwitchMap = new Map([['detail', 'icon'], ['icon', 'picture'], ['picture', 'detail']]);
-const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Attachment = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {
@@ -1442,17 +1442,17 @@ Attachment.propTypes = {
   allowSort: PropTypes.bool,
   /** Class for component. */
   className: PropTypes.string,
-  /** List attachment:<br />
-   * [{<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/demo.jpg",<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/demo.jpg",<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,
   /** The message to display when deleting files. */
@@ -1483,16 +1483,16 @@ Attachment.propTypes = {
   onChange: PropTypes.func,
   /** Download attached event, if not it will use default. */
   onDownload: PropTypes.func,
-  /**
-   * event when removed file(s)
-   *
-   * 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)
+   *
+   * 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,
   /** View attached event, if not it will use default. */

package/components/form-control/calendar/function.js

@@ -652,7 +652,7 @@ const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn,
     color: 'primary',
     type: 'h3',
     ref: refs.content,
-    format: ['lowercase']
+    format: ['sentence']
   }))), jsx("div", {
     className: className.navigator.around
   }, jsx(ButtonIcon, {

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

@@ -7,7 +7,7 @@ import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, date as moment } from "../../../utils";
 import { generateCalendarCSS, isAfterLimit, isBeforeLimit, isValidDate, onUpdateCalendar, renderHeader, renderNavigator } from "./function";
-const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   var _zoomLevel$get, _zoomLevel$get2;
   if (!reference) reference = useRef(null);
   const theme = useTheme();
@@ -226,7 +226,7 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
    * START EFFECT
    */
   useEffect(() => {
-    if (defaultValue && defaultValue !== '' && isValidDate(defaultValue)) {
+    if (defaultValue && defaultValue !== '' && isValidDate(defaultValue) && !value) {
       if (isBeforeLimit(min, defaultValue)) {
         onUpdate(min);
       } else if (isAfterLimit(max, defaultValue)) {

package/components/form-control/calendar/range.js

@@ -9,7 +9,7 @@ import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { getProp } from "../../../utils";
 import { generateCalendarCSS, isValidDate, onUpdateCalendar, renderHeader, renderNavigator } from "./function";
-const CalendarRange = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const CalendarRange = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

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

@@ -9,7 +9,7 @@ import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp, randomString, refType as ref } from "../../../utils";
 const padding = 0.75;
-const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Checkbox = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
 
   // props priority: `inProps` > `themeDefaultProps`