diginet-core-ui 1.3.89 → 1.3.90-beta.2

package/assets/images/menu/dhr/MHRP51N0003.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_847_46)">
+<path d="M18.6998 0H15.7998C14.9998 0 14.2998 0.7 14.2998 1.5V5.9C14.2998 6.7 14.9998 7.4 15.7998 7.4H18.6998C19.4998 7.4 20.1998 6.7 20.1998 5.9V1.5C20.1998 0.7 19.4998 0 18.6998 0Z" fill="#2680EB"/>
+<path d="M27.5998 11.8C27.5998 7.7 25.1998 4.2 21.6998 2.5V5.9C21.6998 7.5 20.3998 8.8 18.7998 8.8H15.8998C14.2998 8.8 12.9998 7.5 12.9998 5.9V2.5C9.39982 4.1 6.99982 7.7 6.99982 11.8C6.19982 11.8 5.49982 12.5 5.49982 13.3V14.8C5.49982 15.6 6.19982 16.3 6.99982 16.3H27.5998C28.3998 16.3 29.0998 15.6 29.0998 14.8V13.3C28.9998 12.4 28.3998 11.8 27.5998 11.8Z" fill="#2680EB"/>
+<path d="M33.4998 21.4C33.2998 21 32.8998 20.8 32.4998 20.8C32.2998 20.8 31.8998 20.9 31.5998 21.2C31.3998 21.5 30.9998 21.9 30.6998 22.2C29.8998 23.1 28.8998 24.3 28.4998 24.6C28.3998 24.7 28.2998 24.7 28.1998 24.7C28.0998 24.7 27.9998 24.6 27.9998 24.5C27.9998 24.4 27.9998 24.3 28.0998 24.2C28.2998 24 28.8998 23.4 29.4998 22.7C30.2998 21.8 31.2998 20.7 31.6998 20.3C31.9998 20 32.0998 19.5 31.8998 19.1C31.6998 18.7 31.3998 18.4 30.8998 18.4C30.5998 18.4 30.2998 18.5 29.9998 18.8C28.8998 19.9 26.6998 22.2 26.3998 22.5C26.2998 22.6 26.1998 22.6 26.0998 22.6C25.9998 22.6 25.8998 22.6 25.8998 22.5C25.8998 22.5 25.8998 22.4 25.9998 22.2C26.2998 21.9 26.6998 21.4 27.2998 20.8C27.8998 20.2 28.4998 19.5 28.9998 18.9C29.3998 18.5 29.4998 18 29.2998 17.6C29.0998 17.2 28.6998 17 28.2998 17C27.8998 17 27.5998 17.2 27.2998 17.4C27.0998 17.6 26.6998 18.1 26.2998 18.6C25.2998 19.9 23.8998 21.6 22.7998 22.2C22.6998 22.2 22.4998 22.4 21.7998 22.3C20.9998 22.2 20.4998 20.8 20.3998 20C20.2998 19.6 20.2998 19.2 20.0998 19C19.8998 18.6 19.2998 18.3 18.6998 18.3C18.2998 18.3 17.9998 18.4 17.7998 18.7C17.6998 18.9 17.4998 19.2 17.5998 19.7C17.6998 20 17.7998 20.3 17.8998 20.7C18.1998 21.9 18.6998 23.8 18.4998 26C18.3998 26.7 18.0998 27.4 17.4998 28C16.4998 27.1 15.8998 26.2 15.7998 25.4C15.7998 23.5 16.0998 22.3 16.3998 21.3C16.4998 21 16.5998 20.7 16.5998 20.3C16.7998 19.6 16.4998 19.2 16.2998 18.9C15.9998 18.6 15.5998 18.4 15.0998 18.4C14.3998 18.4 13.6998 18.8 13.3998 19.3C13.1998 19.7 13.0998 20.1 13.0998 20.5C12.9998 21.2 12.8998 21.8 11.9998 22.3C11.9998 22.3 11.8998 22.3 11.7998 22.3C10.8998 21.8 9.29982 20.2 8.29982 18.9C7.89982 18.4 7.49982 17.9 7.29982 17.7C6.89982 17.3 6.49982 17.1 5.99982 17.1C5.39982 17.1 4.79982 17.4 4.59982 18C4.49982 18.2 4.49982 18.5 4.49982 18.7C4.19982 18.5 3.89982 18.4 3.59982 18.4C2.99982 18.4 2.49982 18.8 2.19982 19.3C1.99982 19.7 1.99982 20.1 2.19982 20.4H2.39982C1.79982 20.4 1.29982 20.7 0.999824 21.3C0.799824 21.7 0.799824 22.3 1.19982 22.7C0.799824 22.8 0.399824 23.1 0.199824 23.5C-0.100176 24 -0.000176042 24.6 0.399824 25.1C0.899824 26.1 12.9998 38.7 12.9998 38.7C13.0998 38.9 13.2998 39 13.4998 39H13.5998C13.7998 39 13.8998 38.9 13.9998 38.8L17.2998 35.8L19.0998 37.4C19.3998 31.8 23.5998 27.4 29.0998 26.8V26.1C29.0998 25.3 29.4998 24.7 30.1998 24.3C30.4998 24.1 30.7998 24.1 31.0998 24.1C31.2998 24.1 31.4998 24.1 31.6998 24.2C32.2998 23.6 32.8998 22.9 33.2998 22.4C33.5998 22 33.6998 21.7 33.4998 21.4ZM13.7998 32.5L16.4998 35.1L13.5998 37.8C12.9998 37 1.69982 25.5 1.09982 24.7C0.999824 24.6 0.899824 24.4 0.999824 24.2C0.999824 24 1.19982 23.9 1.39982 23.9C1.49982 23.9 1.59982 24 1.69982 24.1C2.39982 24.9 3.89982 26.5 4.19982 26.8C4.89982 27.5 5.69982 26.8 5.09982 26.1C4.59982 25.6 2.89982 23.7 1.99982 22.6C1.29982 21.7 2.29982 21.1 2.89982 22C3.09982 22.3 5.49982 25 5.89982 25.3C6.09982 25.5 6.29982 25.6 6.49982 25.6C6.79982 25.6 7.09982 25.4 7.19982 25.2C7.29982 24.9 7.19982 24.6 6.99982 24.4C6.89982 24.3 5.89982 23.3 4.89982 22.3C3.89982 21.1 3.29982 20.6 3.49982 20.2C3.59982 20 3.79982 19.9 3.99982 19.9C4.19982 19.9 4.39982 20.1 4.49982 20.2C5.49982 21.2 7.59982 23.4 7.89982 23.7C8.09982 23.8 8.29982 24 8.49982 24C8.79982 24 8.99982 23.8 9.09982 23.6C9.19982 23.4 9.19982 23.2 8.89982 22.8C8.59982 22.5 8.19982 22 7.69982 21.4C6.99982 20.6 6.39982 20 5.89982 19.4C5.79982 19.3 5.59982 18.9 5.69982 18.7C5.79982 18.5 5.99982 18.3 6.29982 18.3C6.49982 18.3 6.69982 18.4 6.89982 18.6C7.09982 18.8 7.49982 19.3 7.79982 19.7C8.59982 20.7 10.1998 22.5 11.3998 23.2C11.7998 23.4 12.2998 23.6 12.6998 23.3C13.9998 22.6 14.1998 21.6 14.2998 20.8C14.2998 20.5 14.3998 20.2 14.4998 20C14.6998 19.7 14.9998 19.5 15.3998 19.5C15.5998 19.5 15.7998 19.6 15.8998 19.8C15.9998 19.9 15.9998 20.1 15.9998 20.4C15.8998 20.7 15.7998 21 15.7998 21.3C15.4998 22.4 15.1998 23.6 15.1998 25.4C15.1998 26 15.2998 26.2 15.3998 26.6C15.6998 27.4 16.2998 28.2 17.0998 29C15.4998 30.7 13.8998 32.2 13.8998 32.3C13.7998 32.4 13.7998 32.5 13.7998 32.5ZM34.3998 23.7C34.1998 23.3 33.8998 23.1 33.4998 23.1C33.2998 23.1 33.0998 23.2 32.7998 23.4C32.5998 23.7 32.2998 24 31.8998 24.3C31.9998 24.3 31.9998 24.4 32.0998 24.4L33.5998 25.4C33.8998 25.1 34.0998 24.8 34.1998 24.8C34.5998 24.5 34.5998 24.1 34.3998 23.7Z" fill="#2680EB"/>
+<path d="M30.1 35.5C30.1 35.9 30.3 36.2 30.7 36.4C30.8 36.5 31 36.5 31.2 36.5C31.4 36.5 31.6 36.4 31.8 36.3L38.7 31.5C38.9 31.3 39.1 31 39.1 30.7C39.1 30.4 38.9 30.1 38.7 29.9L31.8 25.2C31.6 25.1 31.4 25 31.2 25C31 25 30.9 25 30.7 25.1C30.4 25.3 30.2 25.6 30.1 26V27.6C24.5 27.9 20 32.4 20 38V38.1C20 38.5 20.3 38.8 20.6 38.9C20.7 38.9 20.8 38.9 20.8 38.9C21.1 38.9 21.4 38.7 21.5 38.5C23.3 35.6 26.5 33.8 30 33.7L30.1 35.5Z" fill="#FF8C00"/>
+</g>
+<defs>
+<clipPath id="clip0_847_46">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/menu/dhr/MHRP51N0004.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_847_51)">
+<path d="M15.1002 6.8H17.9002C18.7002 6.8 19.3002 6.2 19.3002 5.4V1.4C19.3002 0.7 18.7002 0 17.9002 0H15.1002C14.3002 0 13.7002 0.6 13.7002 1.4V5.5C13.7002 6.2 14.3002 6.8 15.1002 6.8Z" fill="#2680EB"/>
+<path d="M27.7002 12.2V13.6C27.7002 14.4 27.1002 15 26.3002 15H6.70022C5.90022 15 5.30022 14.4 5.30022 13.6V12.2C5.30022 11.4 5.90022 10.8 6.70022 10.8C6.70022 7 9.00022 3.8 12.3002 2.2V5.3C12.3002 6.8 13.6002 8 15.1002 8H17.9002C19.4002 8 20.7002 6.8 20.7002 5.3V2.3C22.5002 3.1 24.0002 4.5 25.0002 6.2C23.3002 7.7 22.3002 9.9 22.3002 12.4V12.5C22.3002 13.2 22.8002 13.9 23.5002 14.1C23.6002 14.1 23.8002 14.2 23.9002 14.2C24.5002 14.2 25.0002 13.9 25.3002 13.5C25.8002 12.7 26.5002 12 27.3002 11.5C27.6002 11.5 27.7002 11.8 27.7002 12.2Z" fill="#2680EB"/>
+<path d="M30.5002 17.8C30.3002 17.4 30.0002 17.2 29.6002 17.2C29.3002 17.2 29.0002 17.3 28.7002 17.6C27.7002 18.6 25.5002 20.8 25.3002 21C25.2002 21.1 25.2002 21.1 25.0002 21.1C24.9002 21.1 24.8002 21.1 24.8002 21C24.8002 21 24.8002 20.9 24.9002 20.7C25.2002 20.4 25.6002 19.9 26.1002 19.4C26.6002 18.9 27.2002 18.2 27.7002 17.7C28.1002 17.3 28.2002 16.9 28.0002 16.5C27.8002 16.2 27.5002 15.9 27.0002 15.9C26.7002 15.9 26.3002 16.1 26.0002 16.3C25.8002 16.5 25.4002 17 25.0002 17.4C24.1002 18.6 22.7002 20.2 21.7002 20.7C21.6002 20.7 21.4002 20.9 20.7002 20.8C19.9002 20.7 19.5002 19.4 19.4002 18.7C19.3002 18.3 19.3002 18 19.1002 17.7C18.9002 17.3 18.3002 17.1 17.8002 17.1C17.4002 17.1 17.1002 17.2 16.9002 17.4C16.8002 17.6 16.6002 17.9 16.8002 18.4C16.9002 18.7 16.9002 19 17.0002 19.3C17.3002 20.4 17.7002 22.1 17.6002 24.2C17.5002 24.9 17.2002 25.5 16.7002 26.1C15.7002 25.2 15.2002 24.4 15.1002 23.7C15.1002 22 15.4002 20.8 15.6002 19.9C15.7002 19.6 15.8002 19.3 15.8002 19C16.0002 18.3 15.8002 17.9 15.6002 17.7C15.3002 17.4 14.9002 17.2 14.4002 17.2C13.7002 17.2 13.1002 17.5 12.8002 18C12.6002 18.3 12.5002 18.7 12.5002 19.1C12.4002 19.8 12.3002 20.3 11.5002 20.7C11.5002 20.7 11.4002 20.8 11.3002 20.7C10.4002 20.2 8.90022 18.7 8.00022 17.6C7.60022 17.1 7.30022 16.7 7.00022 16.5C6.70022 16.2 6.20022 16 5.70022 16C5.10022 16 4.60022 16.3 4.30022 16.8C4.20022 17 4.20022 17.2 4.20022 17.4C3.90022 17.2 3.70022 17.1 3.40022 17.1C2.80022 17.1 2.30022 17.4 2.10022 18C2.00022 18.3 2.00022 18.7 2.10022 19H2.30022C1.70022 19 1.20022 19.3 1.00022 19.8C0.800219 20.2 0.900219 20.7 1.20022 21.1C0.800219 21.2 0.400219 21.5 0.200219 21.9C0.000218511 22.4 0.000218511 22.9 0.400219 23.4C1.00022 24.1 12.5002 35.7 12.5002 35.7C12.6002 35.8 12.8002 35.9 12.9002 36H13.0002C13.2002 36 13.3002 35.9 13.4002 35.8L16.5002 33L19.6002 35.7H19.7002C19.8002 35.7 19.8002 35.7 19.8002 35.6C19.8002 35.6 20.3002 35.1 21.1002 34.4C20.9002 34 20.7002 33.6 20.6002 33.3C20.3002 32.5 20.1002 31.6 20.0002 30.8C20.0002 30.5 20.0002 30.3 20.0002 29.9C20.0002 28.8 20.2002 27.7 20.5002 26.7C20.5002 26.6 20.6002 26.5 20.6002 26.5C20.6002 26.4 20.6002 26.4 20.7002 26.3C21.0002 25.5 21.4002 24.8 21.8002 24.2C22.2002 23.6 22.6002 23.1 23.1002 22.7C23.7002 22.1 24.3002 21.6 25.1002 21.2H25.2002C25.3002 21.1 25.4002 21.1 25.5002 21C25.8002 20.9 26.1002 20.7 26.4002 20.6C26.8002 20.4 27.3002 20.3 27.6002 20.2C28.0002 20.1 28.4002 20 28.8002 20C29.0002 20 29.1002 20 29.3002 19.9C29.8002 19.4 30.2002 19 30.5002 18.7C30.6002 18.6 30.7002 18.2 30.5002 17.8ZM13.2002 30L15.8002 32.4L13.0002 35C12.4002 34.2 1.60022 23.5 1.00022 22.8C0.900219 22.7 0.800218 22.5 0.900218 22.3C1.00022 22.1 1.10022 22 1.30022 22C1.40022 22 1.50022 22 1.60022 22.1C2.20022 22.8 3.70022 24.3 4.00022 24.6C4.70022 25.2 5.40022 24.6 4.80022 24C4.30022 23.5 2.70022 21.8 1.80022 20.8C1.10022 20 2.10022 19.4 2.70022 20.2C2.90022 20.4 5.20022 23 5.50022 23.3C5.70022 23.5 5.90022 23.6 6.10022 23.6C6.40022 23.6 6.60022 23.4 6.70022 23.2C6.80022 22.9 6.70022 22.7 6.50022 22.5C6.40022 22.4 5.50022 21.5 4.50022 20.5C3.50022 19.4 3.00022 18.9 3.20022 18.5C3.30022 18.3 3.50022 18.2 3.60022 18.2C3.80022 18.2 4.00022 18.3 4.10022 18.5C5.10022 19.4 7.10022 21.5 7.30022 21.7C7.50022 21.8 7.70022 22 7.90022 22C8.20022 22 8.40022 21.8 8.50022 21.6C8.60022 21.4 8.60022 21.2 8.30022 20.9C8.00022 20.6 7.60022 20.2 7.10022 19.6C6.60022 19.1 6.10022 18.5 5.60022 18C5.50022 17.9 5.30022 17.6 5.40022 17.4C5.50022 17.2 5.70022 17.1 5.90022 17.1C6.10022 17.1 6.30022 17.2 6.50022 17.4C6.70022 17.6 7.00022 18 7.40022 18.4C8.20022 19.3 9.70022 21 10.8002 21.7C11.1002 21.9 11.6002 22 12.1002 21.8C13.3002 21.1 13.5002 20.2 13.6002 19.5C13.7002 19.2 13.7002 18.9 13.8002 18.8C14.0002 18.5 14.2002 18.3 14.6002 18.3C14.8002 18.3 15.0002 18.4 15.1002 18.5C15.2002 18.6 15.2002 18.8 15.2002 19C15.1002 19.3 15.1002 19.5 15.0002 19.8C14.7002 20.8 14.4002 21.9 14.4002 23.6C14.4002 24.1 14.5002 24.4 14.6002 24.7C14.9002 25.4 15.4002 26.2 16.3002 26.9C14.8002 28.5 13.3002 29.9 13.2002 29.9C13.1002 29.9 13.2002 30 13.2002 30ZM32.0002 19.7C31.8002 19.4 31.5002 19.2 31.1002 19.2C30.9002 19.2 30.6002 19.3 30.3002 19.6C30.2002 19.7 30.0002 19.9 29.9002 20.1C30.0002 20.1 30.0002 20.1 30.1002 20.1C30.8002 20.1 31.5002 20.2 32.2002 20.3C32.1002 20 32.1002 19.9 32.0002 19.7Z" fill="#2680EB"/>
+<path d="M30.5999 10.5C30.5999 10.8 30.7999 11 30.9999 11.2C31.0999 11.3 31.1999 11.3 31.2999 11.3C31.3999 11.3 31.5999 11.3 31.6999 11.2L36.6999 7.7C36.8999 7.5 36.9999 7.3 36.9999 7.1C36.9999 6.9 36.8999 6.7 36.6999 6.6L31.6999 3.2C31.5999 3 31.4999 3 31.2999 3C31.1999 3 31.0999 3 30.9999 3.1C30.7999 3.2 30.5999 3.5 30.5999 3.7V4.9C26.5999 5 23.3999 8.3 23.3999 12.3V12.4C23.3999 12.7 23.5999 12.9 23.8999 13C23.9999 13 23.9999 13 24.0999 13C24.2999 13 24.4999 12.9 24.5999 12.7C25.8999 10.6 28.1999 9.3 30.6999 9.3L30.5999 10.5Z" fill="#FF8C00"/>
+<path d="M36.3 23.6C35.8 23.2 35.4 22.8 34.8 22.4C33.4 21.5 31.8 21 30 21C29.6 21 29.2 21 28.8 21.1C28.4 21.1 28.1 21.2 27.7 21.3C27.3 21.4 27 21.5 26.6 21.7C26.3 21.8 26 21.9 25.8 22.1C25.7 22.1 25.6 22.2 25.5 22.3C24.9 22.7 24.3 23.1 23.8 23.6C23.4 24 23 24.4 22.7 24.9C22.3 25.5 22 26.1 21.7 26.8C21.7 26.9 21.6 27.1 21.6 27.2C21.2 28 21 29 21 30C21 30.3 21 30.5 21 30.8C21.1 31.6 21.2 32.3 21.5 33.1C21.9 34.1 22.4 35 23 35.8C24.7 37.8 27.1 39.1 29.9 39.1C33 39.1 35.7 37.6 37.3 35.2C38.3 33.7 38.9 32 38.9 30.1C39 27.5 38 25.2 36.3 23.6ZM35.6 27.1L31.2 33L30.2 34.3C30 34.8 29.5 35 29 35H28.9C28.4 35 27.9 34.8 27.6 34.4L26.3 33L24.5 31C24 30.5 24 29.6 24.6 29.1C24.9 28.9 25.2 28.7 25.5 28.7C25.9 28.7 26.2 28.9 26.5 29.2L28.7 31.6L28.8 31.7C28.9 31.7 28.9 31.7 28.9 31.6L33.4 25.5C33.7 25.1 34.1 25 34.5 25C34.8 25 35 25.1 35.3 25.3C35.9 25.7 36 26.5 35.6 27.1Z" fill="#1CA261"/>
+</g>
+<defs>
+<clipPath id="clip0_847_51">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/components/avatar/index.js

@@ -1,20 +1,19 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx, css, keyframes } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import AvatarDefault from "../../assets/avatar/default.svg";
-import { ButtonIcon, 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';
 import { forwardRef, Fragment, isValidElement, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { itemsCenter, borderNone, displayBlock, displayNone, flexCol, displayInlineFlex, overflowHidden, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from "../../styles/general";
+import { borderNone, borderRadius, boxContent, cursorInherit, cursorPointer, displayBlock, displayFlex, displayInlineFlex, displayNone, flexCol, itemsCenter, overflowHidden, parseMinWidth, parseWidthHeight, pd, positionAbsolute, positionRelative, userSelectNone, z } from "../../styles/general";
 import { useTheme } from "../../theme";
-import { classNames, isMobile, randomString } from "../../utils";
-import { useIntersection } from "../../utils/intersectionObserver";
-import OptionWrapper from "../others/option-wrapper";
+import { classNames, isMobile } from "../../utils";
 const {
   colors: {
     system: {
-      white
+      white: systemWhite
     },
     fill: {
       tooltip: fillTooltip
@@ -22,19 +21,8 @@ const {
     text: {
       tooltip: textTooltip
     }
-  },
-  spacing,
-  zIndex: zIndexCORE
+  }
 } = useTheme();
-const existed = {},
-  urlAvatar = {};
-const blurKeyframe = keyframes`
-    0% { -webkit-filter: blur(4px);}
-    25% { -webkit-filter: blur(3px);}
-    50% { -webkit-filter: blur(2px);}
-    75% { -webkit-filter: blur(1px);}
-    100% { -webkit-filter: blur(0px);}
-`;
 const checkFileType = (type, matchType) => {
   if (typeof matchType === 'object' && matchType instanceof RegExp) {
     return matchType.test(type);
@@ -73,30 +61,22 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width,
   wrongTypeError
 }, reference) => {
+  if (!reference) reference = useRef(null);
   if (!defaultSrc) defaultSrc = AvatarDefault;
   const ref = useRef(null);
   const inputRef = useRef(null);
   const avatarRef = useRef(null);
-  const popupRef = useRef(null);
-  const [unique] = useState(randomString(6, {
-    allowNumber: false,
-    allowSymbol: false
-  }));
+  const notifyRef = useRef(null);
   const [viewAvatar, setViewAvatar] = useState(false);
   const [viewMoreInfo, setViewMoreInfo] = useState(false);
   const [srcState, setSrcState] = useState(src);
-  const [isInView, setIsInView] = useState(false);
-  const [onLoaded, setOnLoaded] = useState(false);
-  useIntersection(ref, () => {
-    setIsInView(true);
-  });
   const _ActionIconCSS = ActionIconCSS(actionIconWidth);
-  const _AvatarPreviewCSS = AvatarPreviewCSS(readOnly);
-  const _AvatarContainerCSS = AvatarContainerCSS(_AvatarPreviewCSS.name, _ActionIconCSS.name);
+  const _AvatarPreviewCSS = AvatarPreviewCSS(readOnly || disabled);
+  const _AvatarContainerCSS = AvatarContainerCSS(_ActionIconCSS.name);
   const _AvatarRootCSS = AvatarRootCSS(width, height, outlined);
   const _isMobile = isMobile.any();
   const triggerInput = e => {
-    if (e || !existed[unique]) {
+    if (e || !srcState) {
       inputRef.current.click();
     } else {
       // on View
@@ -109,29 +89,22 @@ 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 => {
-      urlAvatar[unique] = e.target.result;
-      setSrcState(urlAvatar[unique]);
-      existed[unique] = true;
+      setSrcState(e.target.result);
     };
     reader.readAsDataURL(file);
     !!onChange && onChange(input);
   };
   const onRemoveAvatar = () => {
     setSrcState(null);
-    existed[unique] = false;
     inputRef.current.value = '';
     !!onRemove && onRemove();
   };
@@ -152,32 +125,6 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       type: 'p1'
     }, getGlobal('noDataText'));
   };
-  const renderImage = () => {
-    const _image = jsx(Fragment, null, !onLoaded && jsx("img", {
-      src: defaultSrc,
-      alt: '',
-      style: {
-        objectFit: 'cover'
-      }
-    }), jsx("img", {
-      css: blurAnimationCSS,
-      src: srcState,
-      alt: srcState,
-      style: {
-        objectFit: 'cover'
-      },
-      onLoad: () => setOnLoaded(true)
-    }));
-    if (lazyLoading) {
-      return isInView ? _image : jsx("img", {
-        src: defaultSrc,
-        alt: '',
-        style: {
-          objectFit: 'cover'
-        }
-      });
-    } else return _image;
-  };
   const showMoreInfo = () => {
     if (hoverAble) setViewMoreInfo(true);
   };
@@ -201,22 +148,11 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   useEffect(() => {
     if (src) {
-      if (isInView || !lazyLoading) {
-        inputRef.current.value = '';
-        const img = document.createElement('img');
-        urlAvatar[unique] = src;
-        img.src = src;
-        img.alt = '';
-        img.onerror = () => {
-          setSrcState(defaultSrc);
-          existed[unique] = false;
-        };
-        img.onload = () => {
-          setSrcState(src);
-          existed[unique] = true;
-        };
-      }
+      setSrcState(src);
     }
+    return () => {
+      setSrcState(defaultSrc);
+    };
   }, [src]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -230,11 +166,9 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return useMemo(() => {
     return jsx(Fragment, null, jsx("div", {
-      css: _AvatarContainerCSS,
-      ref: ref,
-      id: unique,
-      className: classNames(disabled && 'disabled')
+      css: _AvatarContainerCSS
     }, jsx("div", {
+      ref: ref,
       css: _AvatarRootCSS,
       className: classNames('DGN-UI-Avatar', className),
       style: style,
@@ -247,14 +181,21 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onChange: onChangeAvatar,
       disabled: disabled
     }), jsx("div", {
+      ref: avatarRef,
       css: _AvatarPreviewCSS,
       onClick: _onClick,
-      ref: avatarRef,
       onMouseEnter: _onMouseEnter,
       onMouseLeave: _onMouseLeave,
       tabIndex: "-1",
       onBlur: closeMoreInfo
-    }, renderImage())), allowEdit && !readOnly && !disabled && jsx("span", {
+    }, jsx(Image, {
+      circular: true,
+      defaultSrc: defaultSrc,
+      src: srcState,
+      width: '100%',
+      height: '100%',
+      lazyLoading: lazyLoading
+    }))), allowEdit && !readOnly && !disabled ? jsx("span", {
       css: _ActionIconCSS
     }, jsx(ButtonIcon, {
       viewType: 'ghost',
@@ -263,7 +204,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       height: actionIconHeight,
       className: 'icon-edit',
       onClick: triggerInput
-    }), clearAble && srcState && jsx(ButtonIcon, {
+    }), clearAble && srcState ? jsx(ButtonIcon, {
       viewType: 'ghost',
       name: 'Delete',
       width: actionIconWidth,
@@ -273,68 +214,55 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: {
         marginTop: '8px'
       }
-    }))), jsx(ModalSample, {
+    }) : null) : null), jsx(ModalSample, {
       open: viewAvatar,
       onClose: () => setViewAvatar(false),
       width: 'max-content'
-    }, jsx("img", {
-      src: urlAvatar[unique],
-      alt: "",
-      style: {
-        objectFit: 'cover',
-        maxHeight: '100%',
-        maxWidth: '100%',
-        margin: 'auto',
-        display: 'block'
-      }
-    })), hoverAble && jsx(Popover, {
+    }, jsx(Image, {
+      defaultSrc: defaultSrc,
+      src: srcState,
+      width: '100%',
+      height: '100%'
+    })), hoverAble ? jsx(Popover, {
       arrow: true,
       open: viewMoreInfo,
       pressESCToClose: false,
       bgColor: fillTooltip,
       anchor: avatarRef,
       fullScreen: false,
-      width: 'max-content',
       direction: direction
     }, jsx("div", {
       css: MoreInfoCSS
-    }, typeof data === 'function' ? data() : renderData())), !disabled && !readOnly && jsx(Popup, {
-      ref: popupRef,
-      type: 'danger'
+    }, 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, isInView, onLoaded, srcState, viewAvatar, viewMoreInfo]);
+  }, [actionIconHeight, actionIconWidth, allowEdit, clearAble, data, defaultSrc, direction, disabled, height, hoverAble, lazyLoading, matchType, maxSize, maxSizeError, outlined, readOnly, width, srcState, viewAvatar, viewMoreInfo]);
 }));
 const ActionIconCSS = actionIconWidth => css`
+    ${displayFlex};
     ${flexCol};
     ${positionAbsolute};
+    ${parseMinWidth(actionIconWidth)};
     right: ${-actionIconWidth}px;
-    min-width: ${actionIconWidth}px;
     transition: opacity 0.5s;
     opacity: 0;
-    z-index: ${zIndexCORE(2)};
+    ${z(2)};
 `;
-const AvatarPreviewCSS = readOnly => css`
+const AvatarPreviewCSS = isDisabled => css`
     ${displayBlock};
     ${positionRelative};
     ${overflowHidden};
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    cursor: ${readOnly ? 'initial' : 'pointer'};
+    ${parseWidthHeight('100%')};
+    ${borderRadius('50%')};
+    ${isDisabled ? cursorInherit : cursorPointer};
 `;
-const AvatarContainerCSS = (AvatarPreviewCSSName, ActionIconCSSName) => css`
+const AvatarContainerCSS = ActionIconCSSName => css`
     ${displayInlineFlex};
     ${positionRelative};
     ${itemsCenter};
-    &.disabled {
-        .css-${AvatarPreviewCSSName} {
-            ${pointerEventsNone}
-            cursor: inherit;
-        }
-        .css-${ActionIconCSSName} {
-            display: none !important;
-        }
-    }
     &:hover {
         .css-${ActionIconCSSName} {
             opacity: 1;
@@ -347,25 +275,18 @@ const AvatarRootCSS = (width, height, outlined) => css`
     ${overflowHidden};
     ${userSelectNone};
     ${borderNone};
+    ${boxContent};
     ${parseWidthHeight(width, height)};
-    border: ${typeof outlined === 'boolean' && outlined ? `1px solid ${white}` : outlined};
-    border-radius: 50%;
-    box-sizing: content-box;
+    ${borderRadius('50%')};
+    border: ${typeof outlined === 'boolean' && outlined ? `1px solid ${systemWhite}` : outlined};
     input {
         ${displayNone};
     }
-    img {
-        width: 100%;
-        height: 100%;
-    }
 `;
 const MoreInfoCSS = css`
     ${displayBlock};
     ${positionRelative};
-    padding: ${spacing([2])};
-`;
-const blurAnimationCSS = css`
-    animation: ${blurKeyframe} 1s ease;
+    ${pd([2])};
 `;
 Avatar.defaultProps = {
   actionIconHeight: 24,

package/components/breadcrumb/index.js

@@ -0,0 +1,144 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon, Typography } from "./..";
+import { Icon } from "../../icons/effect";
+import OptionWrapper from "../others/option-wrapper";
+import PropTypes from 'prop-types';
+import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { displayFlex, flexWrap, itemsCenter, mg, mgx, pd, userSelectNone } from "../../styles/general";
+import { classNames } from "../../utils";
+const insertSeparators = (items, separator) => {
+  return items.reduce((acc, current, index) => {
+    if (index < items.length - 1) {
+      acc = acc.concat(current, jsx("li", {
+        css: BreadcrumbSeparatorCSS,
+        "aria-hidden": true,
+        key: `separator-${index}`,
+        className: 'DGN-UI-Breadcrumb-separator'
+      }, separator));
+    } else {
+      acc.push(current);
+    }
+    return acc;
+  }, []);
+};
+const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
+  children,
+  className,
+  data,
+  id,
+  itemsAfterCollapse,
+  itemsBeforeCollapse,
+  maxItems,
+  separator,
+  style
+}, reference) => {
+  if (!reference) reference = useRef(null);
+  const ref = useRef(null);
+  const [expanded, setExpanded] = React.useState(false);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
+      ...action
+    }; // methods
+    _instance.__proto__ = {}; // hidden methods
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  const renderItemsBeforeAndAfter = allItems => {
+    const handleClickExpand = () => {
+      setExpanded(true);
+    };
+    if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {
+      return allItems;
+    }
+    return [...allItems.slice(0, itemsBeforeCollapse), jsx(ButtonIcon, {
+      key: "ellipsis",
+      name: 'MoreHoriz',
+      width: 24,
+      height: 16,
+      onClick: handleClickExpand
+    }), ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
+  };
+  const allItems = data !== null && data !== void 0 && data.length ? data.map((item, idx) => {
+    var _data$onClick;
+    return jsx("li", {
+      className: 'DGN-UI-Breadcrumb-li',
+      key: `child-${idx}`
+    }, jsx(Typography, {
+      type: (data === null || data === void 0 ? void 0 : data.length) === idx + 1 ? 'h5' : 'p3',
+      mapping: 'a',
+      color: 'text.sub',
+      href: data === null || data === void 0 ? void 0 : data.href,
+      onClick: data === null || data === void 0 ? void 0 : (_data$onClick = data.onClick) === null || _data$onClick === void 0 ? void 0 : _data$onClick.call(data)
+    }, item === null || item === void 0 ? void 0 : item.name));
+  }) : React.Children.toArray(children).filter(child => {
+    return /*#__PURE__*/React.isValidElement(child);
+  }).map((child, idx) => jsx("li", {
+    className: 'DGN-UI-Breadcrumb-li',
+    key: `child-${idx}`
+  }, child));
+  return useMemo(() => {
+    return jsx("nav", {
+      ref: ref,
+      id: id,
+      style: style,
+      className: classNames('DGN-UI-Breadcrumb', className)
+    }, jsx("ol", {
+      css: BreadcrumbOlCSS,
+      className: 'DGN-UI-Breadcrumb-ol'
+    }, insertSeparators(expanded || maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems), separator)));
+  }, [children, className, data, id, itemsAfterCollapse, itemsBeforeCollapse, maxItems, separator, style, expanded]);
+}));
+const BreadcrumbOlCSS = css`
+    ${displayFlex};
+    ${flexWrap};
+    ${itemsCenter};
+    ${pd(0)};
+    ${mg(0)};
+    list-style: none;
+`;
+const BreadcrumbSeparatorCSS = css`
+    ${displayFlex};
+    ${userSelectNone};
+    ${mgx([2])};
+`;
+Breadcrumb.defaultProps = {
+  className: '',
+  itemsBeforeCollapse: 1,
+  itemsAfterCollapse: 1,
+  maxItems: 8,
+  separator: jsx(Icon, {
+    name: 'ArrowRight',
+    width: 16,
+    height: 16
+  }),
+  style: {}
+};
+Breadcrumb.propTypes = {
+  /** The content of the component. */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** Class for component. */
+  className: PropTypes.string,
+  /** Class for component. */
+  data: PropTypes.PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    href: PropTypes.string,
+    onClick: PropTypes.func
+  })),
+  /** Class for component. */
+  itemsBeforeCollapse: PropTypes.number,
+  /** Class for component. */
+  itemsAfterCollapse: PropTypes.number,
+  /** Class for component. */
+  maxItems: PropTypes.number,
+  /**	Custom separator node. */
+  separator: PropTypes.node,
+  /** Style inline of component. */
+  style: PropTypes.object
+};
+export { Breadcrumb };
+export default OptionWrapper(Breadcrumb);

package/components/button/icon.js

@@ -124,6 +124,7 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: [_ButtonRootCSS, _ButtonSizeCSS, disabled && ButtonDisabledCSS],
       ref: ref,
       id: id,
+      disabled: disabled,
       style: style,
       onClick: _onClick,
       className: classNames('DGN-UI-ButtonIcon', viewType, getClassNameFromColor(colorProp), size, loading && 'button-icon--loading', className)

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

@@ -1301,7 +1301,8 @@ Attachment.defaultProps = {
     maxSize: getGlobal(['errorDefault', 'maxSize']),
     fileType: getGlobal(['errorDefault', 'fileType']),
     existingFile: getGlobal(['errorDefault', 'existingFile'])
-  }
+  },
+  viewType: 'detail'
 };
 Attachment.propTypes = {
   /** File types that can be accepted. */