diginet-core-ui 1.3.73 → 1.3.75

package/assets/images/menu/dhr/MHRP29N0026.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_668_28)">
+<path d="M18.1 30.4C17.9 30.1 17.5 29.9 17.1 29.9H8C7.4 29.9 6.9 30.4 6.9 31C6.9 31.6 7.4 32.1 8 32.1H17.1C17.6 32.1 18.1 31.7 18.2 31.2C18.2 31.1 18.2 31 18.2 30.9C18.3 30.8 18.2 30.5 18.1 30.4ZM8 20.7C7.4 20.7 6.9 21.2 6.9 21.8C6.9 22.4 7.4 23 8 23H19.8C20.4 22.1 21 21.4 21.8 20.7H8ZM21.7 16.1H8C7.4 16.1 6.9 16.6 6.9 17.2C6.9 17.8 7.4 18.3 8 18.3H21.7C22.3 18.3 22.8 17.8 22.8 17.2C22.8 16.6 22.3 16.1 21.7 16.1ZM8 25.3C7.4 25.3 6.9 25.8 6.9 26.4C6.9 27 7.4 27.5 8 27.5H18.1C18.2 26.7 18.4 25.9 18.7 25.2H8V25.3ZM18.1 30.4C17.9 30.1 17.5 29.9 17.1 29.9H8C7.4 29.9 6.9 30.4 6.9 31C6.9 31.6 7.4 32.1 8 32.1H17.1C17.6 32.1 18.1 31.7 18.2 31.2C18.2 31.1 18.2 31 18.2 30.9C18.3 30.8 18.2 30.5 18.1 30.4ZM8 25.3C7.4 25.3 6.9 25.8 6.9 26.4C6.9 27 7.4 27.5 8 27.5H18.1C18.2 26.7 18.4 25.9 18.7 25.2H8V25.3ZM8 20.7C7.4 20.7 6.9 21.2 6.9 21.8C6.9 22.4 7.4 23 8 23H19.8C20.4 22.1 21 21.4 21.8 20.7H8ZM21.7 16.1H8C7.4 16.1 6.9 16.6 6.9 17.2C6.9 17.8 7.4 18.3 8 18.3H21.7C22.3 18.3 22.8 17.8 22.8 17.2C22.8 16.6 22.3 16.1 21.7 16.1ZM29.4 9.5L20.3 0.3C20 0.1 19.7 0 19.4 0H3.4C1.5 0 0 1.5 0 3.4V35.5C0 37.5 1.5 39 3.4 39H24.4C23.2 38.4 22.1 37.7 21.1 36.7H3.4C2.8 36.7 2.3 36.2 2.3 35.6V3.4C2.3 2.8 2.8 2.3 3.4 2.3H18.3V8C18.3 9.9 19.8 11.4 21.7 11.4H27.4V18.1C27.9 18 28.4 18 29 18C29.2 18 29.5 18 29.7 18V10.3C29.7 10 29.6 9.7 29.4 9.5ZM21.7 9.1C21.1 9.1 20.6 8.6 20.6 8V3.9L25.8 9.1H21.7ZM21.7 16.1H8C7.4 16.1 6.9 16.6 6.9 17.2C6.9 17.8 7.4 18.3 8 18.3H21.7C22.3 18.3 22.8 17.8 22.8 17.2C22.8 16.6 22.3 16.1 21.7 16.1ZM21.8 20.7H8C7.4 20.7 6.9 21.2 6.9 21.8C6.9 22.4 7.4 23 8 23H19.8C20.3 22.1 21 21.4 21.8 20.7ZM8 25.3C7.4 25.3 6.9 25.8 6.9 26.4C6.9 27 7.4 27.5 8 27.5H18.1C18.2 26.7 18.4 25.9 18.7 25.2H8V25.3ZM17.1 29.9H8C7.4 29.9 6.9 30.4 6.9 31C6.9 31.6 7.4 32.1 8 32.1H17.1C17.6 32.1 18.1 31.7 18.2 31.2C18.2 31.1 18.2 31 18.2 30.9C18.2 30.7 18.1 30.4 18 30.3C17.9 30.1 17.5 29.9 17.1 29.9ZM8 25.3C7.4 25.3 6.9 25.8 6.9 26.4C6.9 27 7.4 27.5 8 27.5H18.1C18.2 26.7 18.4 25.9 18.7 25.2H8V25.3ZM21.7 16.1H8C7.4 16.1 6.9 16.6 6.9 17.2C6.9 17.8 7.4 18.3 8 18.3H21.7C22.3 18.3 22.8 17.8 22.8 17.2C22.8 16.6 22.3 16.1 21.7 16.1ZM8 20.7C7.4 20.7 6.9 21.2 6.9 21.8C6.9 22.4 7.4 23 8 23H19.8C20.4 22.1 21 21.4 21.8 20.7H8ZM18.1 30.4C17.9 30.1 17.5 29.9 17.1 29.9H8C7.4 29.9 6.9 30.4 6.9 31C6.9 31.6 7.4 32.1 8 32.1H17.1C17.6 32.1 18.1 31.7 18.2 31.2C18.2 31.1 18.2 31 18.2 30.9C18.3 30.8 18.2 30.5 18.1 30.4ZM18.1 30.4C17.9 30.1 17.5 29.9 17.1 29.9H8C7.4 29.9 6.9 30.4 6.9 31C6.9 31.6 7.4 32.1 8 32.1H17.1C17.6 32.1 18.1 31.7 18.2 31.2C18.2 31.1 18.2 31 18.2 30.9C18.3 30.8 18.2 30.5 18.1 30.4ZM8 20.7C7.4 20.7 6.9 21.2 6.9 21.8C6.9 22.4 7.4 23 8 23H19.8C20.4 22.1 21 21.4 21.8 20.7H8ZM21.7 16.1H8C7.4 16.1 6.9 16.6 6.9 17.2C6.9 17.8 7.4 18.3 8 18.3H21.7C22.3 18.3 22.8 17.8 22.8 17.2C22.8 16.6 22.3 16.1 21.7 16.1ZM8 25.3C7.4 25.3 6.9 25.8 6.9 26.4C6.9 27 7.4 27.5 8 27.5H18.1C18.2 26.7 18.4 25.9 18.7 25.2H8V25.3ZM21.7 16.1H8C7.4 16.1 6.9 16.6 6.9 17.2C6.9 17.8 7.4 18.3 8 18.3H21.7C22.3 18.3 22.8 17.8 22.8 17.2C22.8 16.6 22.3 16.1 21.7 16.1ZM8 20.7C7.4 20.7 6.9 21.2 6.9 21.8C6.9 22.4 7.4 23 8 23H19.8C20.4 22.1 21 21.4 21.8 20.7H8ZM8 25.3C7.4 25.3 6.9 25.8 6.9 26.4C6.9 27 7.4 27.5 8 27.5H18.1C18.2 26.7 18.4 25.9 18.7 25.2H8V25.3ZM18.1 30.4C17.9 30.1 17.5 29.9 17.1 29.9H8C7.4 29.9 6.9 30.4 6.9 31C6.9 31.6 7.4 32.1 8 32.1H17.1C17.6 32.1 18.1 31.7 18.2 31.2C18.2 31.1 18.2 31 18.2 30.9C18.3 30.8 18.2 30.5 18.1 30.4Z" fill="#2680EB"/>
+<path d="M30.6 22.2C30.8 25.4 30.2 28.5 30 31.7C29.4 31.7 28.8 31.7 28.2 31.7C28 28.6 27.4 25.4 27.6 22.2C28.5 22.2 29.5 22.2 30.6 22.2Z" fill="#FF4444"/>
+<path d="M30.6 34.3C30.6 35.2 29.9 35.9 29 35.9C28.1 35.9 27.4 35.2 27.5 34.3C27.5 33.4 28.2 32.7 29.1 32.7C29.9 32.7 30.6 33.4 30.6 34.3Z" fill="#FF4444"/>
+<path d="M29 19C23.5 19 19 23.5 19 29C19 34.5 23.5 39 29 39C34.5 39 39 34.5 39 29C39 23.5 34.5 19 29 19ZM29 37C24.6 37 21 33.4 21 29C21 24.6 24.6 21 29 21C33.4 21 37 24.6 37 29C37 33.4 33.4 37 29 37Z" fill="#FF4444"/>
+</g>
+<defs>
+<clipPath id="clip0_668_28">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/menu/dhr/MHRP29N0027.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_668_41)">
+<path d="M16 0C11.8 0 7.7 1.7 4.7 4.7C1.7 7.7 0 11.8 0 16C0 24.8 7.2 32 16 32C17.1 32 18.1 31.9 19.1 31.7C18 31.6 17.2 30.7 17.2 29.7C17.2 29.5 17.2 29.3 17.3 29.1C16.9 29.1 16.4 29.2 16 29.2C8.8 29.1 2.9 23.3 2.9 16C2.9 8.8 8.8 2.9 16 2.9C23.3 2.9 29.1 8.8 29.1 16C29.1 17.9 28.7 19.7 27.9 21.4H31C31.6 19.7 31.9 17.9 31.9 16C32 7.2 24.8 0 16 0Z" fill="#2680EB"/>
+<path d="M17.4 12.6L14.5 15.5V7.7C14.5 6.9 15.1 6.3 15.9 6.3C16.7 6.3 17.3 7 17.3 7.7V12.6H17.4Z" fill="#2680EB"/>
+<path d="M25.9 16.9C25.9 17.7 25.3 18.3 24.5 18.3H17.3C17.3 18.3 17.4 18.3 17.4 18.2L20.2 15.4H24.5C25.3 15.4 25.9 16.1 25.9 16.9Z" fill="#2680EB"/>
+<path d="M16 18.3C15.6 18.3 15.2 18.2 15 17.9C14.4 17.3 14.4 16.4 15 15.8L22.2 8.6C22.8 8 23.7 8 24.3 8.6C24.9 9.2 24.9 10.1 24.3 10.7L17.1 17.9C16.8 18.1 16.4 18.3 16 18.3Z" fill="#FF4444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.2999 24.5H20.4999C20.8999 25.7 22.0999 26.6 23.3999 26.6C24.6999 26.6 25.8999 25.7 26.2999 24.5H37.9999C38.5999 24.5 38.9999 24 38.9999 23.5C38.9999 22.9 38.4999 22.5 37.9999 22.5H26.2999C25.8999 21.3 24.6999 20.4 23.3999 20.4C22.0999 20.4 20.8999 21.3 20.4999 22.5H19.2999C18.6999 22.5 18.2999 23 18.2999 23.5C18.1999 24 18.6999 24.5 19.2999 24.5ZM35.8999 26.5C34.4999 26.5 33.3999 27.4 32.9999 28.6H19.2999C18.6999 28.6 18.2999 29.1 18.2999 29.6C18.2999 30.2 18.7999 30.6 19.2999 30.6H32.9999C33.3999 31.8 34.5999 32.7 35.8999 32.7C37.5999 32.7 38.9999 31.3 38.9999 29.6C38.9999 27.9 37.5999 26.5 35.8999 26.5ZM30.4999 34.8H37.9999C38.5999 34.8 38.9999 35.3 38.9999 35.8C38.9999 36.4 38.4999 36.8 37.9999 36.8H30.4999C30.0999 38 28.8999 38.9 27.5999 38.9C26.2999 38.9 25.0999 38 24.6999 36.8H19.2999C18.6999 36.8 18.2999 36.3 18.2999 35.8C18.2999 35.2 18.7999 34.8 19.2999 34.8H24.6999C25.0999 33.6 26.2999 32.7 27.5999 32.7C28.8999 32.7 30.0999 33.6 30.4999 34.8Z" fill="#FF8C00"/>
+</g>
+<defs>
+<clipPath id="clip0_668_41">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/menu/dhr/MHRP29N0028.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_668_54)">
+<path d="M16 0C11.8 0 7.7 1.7 4.7 4.7C1.7 7.7 0 11.8 0 16C0 17.8 0.3 19.4 0.8 21H1C1.5 20.2 2.4 19.6 3.3 19.5C3 18.4 2.9 17.2 2.9 16C2.9 8.8 8.8 2.9 16 2.9C23.3 2.9 29.1 8.8 29.1 16C29.1 16.7 29.1 17.3 28.9 18C29.9 18 30.8 18.1 31.7 18.4C31.8 17.6 31.9 16.8 31.9 16C32 7.2 24.8 0 16 0ZM18 29C17.3 29.1 16.7 29.1 16 29.1C15.8 29.1 15.6 29.1 15.4 29.1C15.1 29.5 14.8 29.8 14.5 30C15.4 30.1 16 30.8 16 31.7C16 31.8 16 31.9 16 32C16.8 32 17.6 31.9 18.4 31.8C18.1 30.9 18 30 18 29Z" fill="#2680EB"/>
+<path d="M17.4 12.6L14.5 15.5V7.7C14.5 6.9 15.1 6.3 15.9 6.3C16.7 6.3 17.3 7 17.3 7.7V12.6H17.4Z" fill="#2680EB"/>
+<path d="M25.9 16.9C25.9 17.7 25.3 18.3 24.5 18.3H17.3L20.2 15.4H24.5C25.3 15.4 25.9 16.1 25.9 16.9Z" fill="#2680EB"/>
+<path d="M16 18.3C15.6 18.3 15.2 18.2 15 17.9C14.4 17.3 14.4 16.4 15 15.8L22.2 8.6C22.8 8 23.7 8 24.3 8.6C24.9 9.2 24.9 10.1 24.3 10.7L17.1 17.9C16.8 18.1 16.4 18.3 16 18.3Z" fill="#FF4444"/>
+<path d="M29 19C23.5 19 19 23.5 19 29C19 34.5 23.5 39 29 39C34.5 39 39 34.5 39 29C39 23.5 34.5 19 29 19ZM35.2 25.8L29.3 33.8C29 34.3 28.4 34.6 27.8 34.6C27.2 34.6 26.7 34.4 26.3 34L22.8 30.2C22.2 29.6 22.3 28.6 22.9 28.1C23.5 27.5 24.5 27.6 25 28.2L27.5 30.9L27.6 31C27.7 31 27.7 31 27.7 30.9L32.7 24.1C33.2 23.4 34.1 23.3 34.8 23.8C35.6 24.2 35.7 25.1 35.2 25.8Z" fill="#1CA261"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.8 23.5H1.7C1.9 24.4 2.8 25 3.8 25C4.8 25 5.6 24.4 5.9 23.5H14.3C14.7 23.5 15.1 23.2 15.1 22.7C15.1 22.3 14.8 21.9 14.3 21.9H5.9C5.6 21 4.8 20.4 3.8 20.4C2.8 20.4 1.9 21.1 1.6 22H0.8C0.3 22 0 22.3 0 22.7C0 23.2 0.3 23.5 0.8 23.5ZM12.8 25C11.8 25 11 25.6 10.7 26.5H0.8C0.4 26.5 0 26.8 0 27.3C0 27.7 0.3 28 0.8 28H10.7C11 28.9 11.8 29.5 12.8 29.5C14 29.5 15.1 28.5 15.1 27.2C15 26 14 25 12.8 25ZM8.9 31H14.3C14.7 31 15.1 31.3 15.1 31.8C15.1 32.2 14.8 32.6 14.3 32.6H8.9C8.6 33.4 7.7 34 6.8 34C5.9 34 5 33.4 4.7 32.5H0.8C0.4 32.5 0 32.2 0 31.7C0 31.3 0.3 31 0.8 31H4.7C5 30.1 5.8 29.5 6.8 29.5C7.8 29.5 8.6 30.1 8.9 31Z" fill="#FF8C00"/>
+</g>
+<defs>
+<clipPath id="clip0_668_54">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/components/accordion/details.js

@@ -4,7 +4,8 @@
 import { memo, forwardRef, useRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { borderBox, displayBlock, overflowHidden, pointerEventsNone, positionRelative, userSelectNone } from '../../styles/general';
+import { borderBox, displayBlock, overflowHidden, parseHeight, pointerEventsNone, positionRelative, userSelectNone } from '../../styles/general';
+import { classNames } from '../../utils';
 import theme from '../../theme/settings';
 const {
   colors: {
@@ -18,16 +19,24 @@ const {
   spacing
 } = theme;
 const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
   className,
   id,
   style
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     return jsx("div", {
       css: DetailsRootCSS,
@@ -36,15 +45,15 @@ const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       id: id
     }, jsx("div", {
       style: style,
-      className: ['DGN-UI-Accordion-Details-Content', className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('DGN-UI-Accordion-Details-Content', className)
     }, children));
-  }, [style, className, children, id]);
+  }, [children, className, id, style]);
 }));
 const DetailsRootCSS = css`
     ${displayBlock};
     ${positionRelative};
     ${overflowHidden};
-    height: 0;
+    ${parseHeight(0)};
     transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     .DGN-UI-Accordion-Details-Content {
         ${borderBox};
@@ -52,8 +61,8 @@ const DetailsRootCSS = css`
         padding: ${spacing([0, 6, 4, 6])};
         color: ${main};
         &.disabled {
-            ${pointerEventsNone}
-            ${userSelectNone}
+            ${pointerEventsNone};
+            ${userSelectNone};
         }
     }
 `;

package/components/accordion/group.js

@@ -5,11 +5,13 @@ import { memo, useRef, forwardRef, Children, cloneElement, useMemo, useImperativ
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { borderRadius4px } from '../../styles/general';
+import classNames from '../../utils/classNames';
 import theme from '../../theme/settings';
 const {
   spacing
 } = theme;
 const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
   className,
   collapseOther,
@@ -30,20 +32,27 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     return jsx("div", {
       css: AccordionGroupRootCSS,
       ref: ref,
       style: style,
-      className: ['DGN-UI-Accordion-Group', className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('DGN-UI-Accordion-Group', className)
     }, Children.map(children, child => child && /*#__PURE__*/cloneElement(child, {
       onExpand: e => onCollapseOther(e, child.props.onExpand)
     })));
-  }, [style, className, children]);
+  }, [children, className, collapseOther, style]);
 }));
 const AccordionGroupRootCSS = css`
     ${borderRadius4px};

package/components/accordion/index.js

@@ -6,7 +6,8 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import AccordionContext from './context';
 import Divider from '../divider';
-import { borderRadius4px, displayBlock, positionRelative } from '../../styles/general';
+import { borderRadius4px, displayBlock, parseWidth, positionRelative } from '../../styles/general';
+import classNames from '../../utils/classNames';
 import theme from '../../theme/settings';
 const {
   colors: {
@@ -16,6 +17,7 @@ const {
   }
 } = theme;
 const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   boxShadow,
   children,
   className,
@@ -49,17 +51,24 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     });
   };
 
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     return jsx("div", {
       id: id,
       css: AccordionRootCSS,
       ref: ref,
       style: style,
-      className: ['DGN-UI-Accordion', disabled ? 'disabled' : '', boxShadow === true ? 'boxShadow' : '', expandState ? 'expanding' : '', className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('DGN-UI-Accordion', disabled && 'disabled', boxShadow === true && 'boxShadow', expandState && 'expanding', className)
     }, jsx(AccordionContext.Provider, {
       value: {
         expanded,
@@ -77,13 +86,13 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         display: 'none'
       }
     })));
-  }, [id, disabled, className, style, boxShadow, onClick, children, expanded, onExpand, onCollapse, expandState]);
+  }, [boxShadow, children, className, disabled, expanded, id, onClick, onCollapse, onExpand, style, expandState]);
 }));
 const AccordionRootCSS = css`
     ${displayBlock};
     ${positionRelative};
     ${borderRadius4px};
-    width: 100%;
+    ${parseWidth('100%')};
     transition: margin 300ms ease;
     &.boxShadow {
         box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
@@ -94,10 +103,10 @@ const AccordionRootCSS = css`
     }
 `;
 Accordion.defaultProps = {
-  expand: false,
-  disabled: false,
-  className: '',
   boxShadow: true,
+  className: '',
+  disabled: false,
+  expand: false,
   style: {}
 };
 Accordion.propTypes = {

package/components/accordion/summary.js

@@ -7,6 +7,7 @@ import { jsx } from '@emotion/core';
 import { SummaryRootCSS } from './css';
 import AccordionContext from './context';
 import { ButtonIcon, Typography } from '..';
+import { classNames } from '../../utils';
 import theme from '../../theme/settings';
 const {
   colors: {
@@ -18,6 +19,7 @@ const {
   spacing
 } = theme;
 const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   background,
   children,
   className,
@@ -61,10 +63,10 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     if (expandState) {
       if (expanded === undefined) setExpandState(false);
-      !!onCollapse && onCollapse(e);
+      !!onCollapse && onCollapse(ref.current);
     } else if (!expandState) {
       if (expanded === undefined) setExpandState(true);
-      !!onExpand && onExpand(e);
+      !!onExpand && onExpand(ref.current);
     }
   };
 
@@ -113,10 +115,17 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       showHideDetailHandler('hide');
     }
   }, [expandState]);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     return jsx("div", {
       id: id,
@@ -125,7 +134,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       tabIndex: "-1",
       onClick: _onClick,
       style: style,
-      className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', expandState ? 'expanding' : '', className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('DGN-UI-Accordion-Summary', disabled && 'disabled', expandIcon && expandIconAt, expandState && 'expanding', className)
     }, jsx("div", {
       className: 'DGN-UI-Accordion-Summary-Content'
     }, jsx(Typography, {
@@ -139,7 +148,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'Accordion-Icon-Root'
     }, jsx("div", { ...expandIconProps,
       ref: expandIconRef,
-      className: ['Accordion-Icon', collapseIcon ? '' : 'rotate-able', expandIconProps.className ? expandIconProps.className : ''].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('Accordion-Icon', !collapseIcon && 'rotate-able', expandIconProps === null || expandIconProps === void 0 ? void 0 : expandIconProps.className)
     }, typeof expandIcon === 'string' ? jsx(ButtonIcon, {
       viewType: 'ghost',
       name: expandIcon,
@@ -153,7 +162,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }) : jsx("span", {
       className: 'Accordion-Collapse-Icon effect'
     }, collapseIcon)))));
-  }, [id, expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, style, expandState, disabled]);
+  }, [background, children, className, collapseIcon, expandIcon, expandIconAt, expandIconProps, id, onClick, style, title, disabled, expanded, expandState, onClickAccordion, onCollapse, onExpand]);
 }));
 AccordionSummary.defaultProps = {
   className: '',

package/components/avatar/index.js

@@ -232,7 +232,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         img.alt = '';
 
         img.onerror = () => {
-          setSrcState(null);
+          setSrcState(defaultSrc);
           existed[unique] = false;
         };
 
@@ -437,15 +437,15 @@ Avatar.propTypes = {
   /** If `true`, display remove avatar icon. */
   clearAble: PropTypes.bool,
 
-  /**
-   * 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]),
 
-  /**
-   * 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,
 
@@ -500,19 +500,19 @@ Avatar.propTypes = {
   /** the error to show on wrong type */
   wrongTypeError: PropTypes.string,
 
-  /**
-   * 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/badge/index.js

@@ -72,6 +72,7 @@ const calDotPos = (anchorOrigin, contentDirection, dotSize, hasContent, size) =>
 };
 
 const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   anchorOrigin,
   contentDirection,
   content,
@@ -98,10 +99,17 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _BadgeRootCSS = BadgeRootCSS(children, name, dotPos, _BadgeNumberCSS);
 
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     let node = children;
 
@@ -205,11 +213,11 @@ Badge.propTypes = {
   /** other icon props when use prop name */
   iconProps: PropTypes.object,
 
-  /** size of Badge
-   *
-   * * medium (dot 8px, typography p3)
-   * * large (button 10px, typography p2)
-   * * giant (button 12px, typography p1)
+  /** size of Badge
+   *
+   * * medium (dot 8px, typography p3)
+   * * large (button 10px, typography p2)
+   * * giant (button 12px, typography p1)
    * */
   size: PropTypes.oneOf(['medium', 'large', 'giant']),
 

package/components/button/icon.js

@@ -71,6 +71,7 @@ const renderIconLoading = iconSize => {
 };
 
 const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   viewType,
   color,
   size,
@@ -104,10 +105,17 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _ButtonRootCSS = ButtonRootCSS(circular, size, width, _width, height, _height, buttonSize, iconSize, colorHover, color, _color, name);
 
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
 
   const _onClick = event => {
     event.persist();
@@ -368,14 +376,14 @@ ButtonIcon.propTypes = {
   /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
   name: PropTypes.string,
 
-  /**
-   * 	The size of the component.
-   *
-   * * tiny (button 24px, icon 16px)
-   * * small (button 32px, icon 20px)
-   * * medium (button 40px, icon 24px)
-   * * large (button 48px, icon 32px)
-   * * giant (button 56px, icon 40px)
+  /**
+   * 	The size of the component.
+   *
+   * * tiny (button 24px, icon 16px)
+   * * small (button 32px, icon 20px)
+   * * medium (button 40px, icon 24px)
+   * * large (button 48px, icon 32px)
+   * * giant (button 56px, icon 40px)
    * */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
 
@@ -391,19 +399,19 @@ ButtonIcon.propTypes = {
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * 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 (ref.current.instance.*method*)
+   *
+   * * 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/button/index.js

@@ -99,6 +99,7 @@ const alphaArr = {
 };
 const alphaLoading = 0.2;
 const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
   className,
   color,
@@ -130,10 +131,17 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _ButtonRoot = ButtonRoot(viewType, size, paddingSize, minHeightSize, minHeightSizeLink, outlinedPaddingSize, endIcon, label, iconMarginSize, startIcon, iconSize, color);
 
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   const StartIcon = useMemo(() => {
     let node = startIcon;
 
@@ -483,19 +491,19 @@ Button.propTypes = {
   /** The variant to use. */
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'link']),
 
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * 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 (ref.current.instance.*method*)
+   *
+   * * 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/card/body.js

@@ -7,6 +7,7 @@ import { jsx } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 import { classNames } from '../../utils';
 const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
   className,
   id,
@@ -14,10 +15,17 @@ const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   title
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     return jsx("div", {
       id: id,

package/components/card/extra.js

@@ -7,6 +7,7 @@ import { jsx } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 import { classNames } from '../../utils';
 const CardExtra = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
   className,
   id,
@@ -14,10 +15,17 @@ const CardExtra = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   title
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     return jsx("div", {
       id: id,