diginet-core-ui 1.3.35-beta.5 → 1.3.36-beta.1

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

@@ -0,0 +1,7 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.79 23.67V23.66V19.86C33.79 19.58 33.57 19.36 33.29 19.36H19.79V15.54V15.53H18.79V15.54V19.36H5.70996C5.42996 19.36 5.20996 19.58 5.20996 19.86V23.66V23.67C5.36996 23.66 5.53996 23.65 5.70996 23.65C5.87996 23.65 6.03996 23.66 6.20996 23.67V23.66V20.36H18.8V23.66V23.67C18.96 23.66 19.13 23.65 19.3 23.65C19.47 23.65 19.63 23.66 19.8 23.67V23.66V20.36H32.8V23.66V23.67C32.96 23.66 33.13 23.65 33.3 23.65C33.46 23.65 33.62 23.66 33.79 23.67Z" fill="#111D5E"/>
+<path d="M5.21 23.67C2.29 23.93 0 26.36 0 29.32C0 32.46 2.56 35 5.71 35C8.86 35 11.42 32.46 11.42 29.32C11.42 26.35 9.13 23.92 6.21 23.67C6.05 23.66 5.88 23.65 5.71 23.65C5.54 23.65 5.38 23.66 5.21 23.67Z" fill="#1CA261"/>
+<path d="M18.8 23.67C15.88 23.92 13.59 26.35 13.59 29.32C13.59 32.45 16.15 35 19.3 35C22.45 35 25 32.46 25 29.32C25 26.35 22.71 23.92 19.79 23.67C19.63 23.66 19.46 23.65 19.29 23.65C19.13 23.65 18.96 23.66 18.8 23.67Z" fill="#FFAA00"/>
+<path d="M33.79 23.67C33.63 23.66 33.46 23.65 33.29 23.65C33.12 23.65 32.96 23.66 32.79 23.67C29.87 23.92 27.58 26.35 27.58 29.32C27.58 32.45 30.14 35 33.29 35C36.44 35 39 32.46 39 29.32C39 26.36 36.71 23.93 33.79 23.67Z" fill="#2680EB"/>
+<path d="M25 15.53V4.17004H13.59V15.53H18.8H19.79H25Z" fill="#FF3D71"/>
+</svg>

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

@@ -0,0 +1,16 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_14393_13618)">
+<path d="M23 17.26C23 17.89 22.49 18.4 21.86 18.4H16.6C16.69 18.01 16.73 17.59 16.73 17.16C16.73 16.8 16.7 16.45 16.64 16.12H21.86C22.49 16.12 23 16.63 23 17.26Z" fill="#FFC766"/>
+<path d="M22.98 21.64C22.44 21.96 21.98 22.42 21.66 22.97H12.01V22.85C13.32 22.54 14.39 21.95 15.2 21.09C15.32 20.96 15.44 20.83 15.55 20.69H21.86C22.42 20.69 22.89 21.1 22.98 21.64Z" fill="#FFC766"/>
+<path d="M22.14 27.51V27.52C22.05 27.54 21.96 27.55 21.86 27.55H8.14C7.51 27.55 7 27.03 7 26.4C7 25.77 7.51 25.26 8.14 25.26H19.26C19.42 26.17 20.22 26.86 21.17 26.86H21.65C21.79 27.1 21.95 27.31 22.14 27.51Z" fill="#FFC766"/>
+<path d="M17.29 29.83H8.14C7.51 29.83 7 30.34 7 30.97C7 31.6 7.51 32.11 8.14 32.11H17.28C17.91 32.11 18.42 31.6 18.42 30.97C18.42 30.34 17.92 29.83 17.29 29.83Z" fill="#FFC766"/>
+<path d="M29.37 9.48L20.23 0.33C20.02 0.12 19.73 0 19.42 0H3.43C1.54 0 0 1.54 0 3.43V35.57C0 37.46 1.54 39 3.43 39H26.13C25.85 38.76 25.6 38.46 25.4 38.12H21.17C20.28 38.12 19.53 37.52 19.31 36.71H3.43C2.8 36.71 2.29 36.2 2.29 35.57V3.43C2.29 2.8 2.8 2.29 3.43 2.29H18.28V8C18.28 9.89 19.82 11.43 21.71 11.43H27.42V22.06C27.72 22.32 27.98 22.63 28.19 22.98H29.71V10.28C29.71 9.97 29.58 9.68 29.37 9.48ZM21.71 9.14C21.08 9.14 20.57 8.63 20.57 8V3.9L25.81 9.14H21.71Z" fill="#FFAA00"/>
+<path d="M9.36 19.52V15.07C7.87 14.67 6.78 14.07 6.09 13.27C5.4 12.47 5.05 11.49 5.05 10.34C5.05 9.18 5.44 8.2 6.23 7.41C7.02 6.62 8.06 6.17 9.37 6.05V5H11.02V6.05C12.23 6.18 13.19 6.57 13.9 7.2C14.61 7.83 15.07 8.68 15.27 9.74L12.39 10.09C12.22 9.25 11.76 8.69 11.02 8.39V12.54C12.84 13 14.08 13.6 14.74 14.33C15.4 15.06 15.73 16 15.73 17.15C15.73 18.43 15.31 19.51 14.48 20.39C13.65 21.27 12.49 21.81 11.01 22V24H9.36V22.07C8.05 21.92 6.98 21.46 6.16 20.7C5.34 19.94 4.82 18.86 4.59 17.46L7.56 17.16C7.68 17.73 7.91 18.21 8.24 18.63C8.58 19.04 8.95 19.33 9.36 19.52ZM9.36 8.37C8.91 8.51 8.56 8.75 8.29 9.09C8.02 9.43 7.89 9.81 7.89 10.22C7.89 10.6 8.01 10.94 8.25 11.27C8.49 11.59 8.86 11.85 9.35 12.05V8.37H9.36ZM11.01 19.67C11.58 19.57 12.04 19.32 12.4 18.93C12.76 18.54 12.94 18.08 12.94 17.54C12.94 17.07 12.79 16.66 12.49 16.31C12.19 15.97 11.7 15.7 11.02 15.52V19.67H11.01Z" fill="#FFAA00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.17 25.86H22.28C22.67 26.95 23.7 27.74 24.92 27.74C26.14 27.74 27.17 26.95 27.56 25.86H38.06C38.58 25.86 39 25.44 39 24.92C39 24.4 38.58 23.98 38.06 23.98H27.56C27.17 22.89 26.14 22.1 24.92 22.1C23.7 22.1 22.67 22.89 22.28 23.98H21.17C20.65 23.98 20.23 24.4 20.23 24.92C20.23 25.44 20.65 25.86 21.17 25.86ZM36.18 27.74C34.96 27.74 33.93 28.53 33.54 29.62H21.17C20.65 29.62 20.23 30.04 20.23 30.56C20.23 31.08 20.65 31.5 21.17 31.5H33.55C33.94 32.59 34.97 33.38 36.19 33.38C37.74 33.38 39.01 32.12 39.01 30.56C39.01 29 37.74 27.74 36.18 27.74ZM31.32 35.25H38.06C38.58 35.25 39 35.67 39 36.19C39 36.71 38.58 37.13 38.06 37.13H31.32C30.93 38.21 29.9 39 28.67 39C27.44 39 26.42 38.21 26.03 37.12H21.16C20.64 37.12 20.22 36.7 20.22 36.18C20.22 35.66 20.64 35.24 21.16 35.24H26.03C26.42 34.15 27.45 33.36 28.67 33.36C29.89 33.36 30.93 34.16 31.32 35.25Z" fill="#FF8C00"/>
+</g>
+<defs>
+<clipPath id="clip0_14393_13618">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

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

package/components/accordion/css.js

@@ -1,6 +1,10 @@
 import { css } from '@emotion/core';
 import { typography } from '../../styles/typography';
 import { color as colors } from '../../styles/colors';
+import { alignCenter, backgroundTransparent, borderBox, borderRadius4px, breakWord, cursorPointer, displayInlineBlock, flexRow, flexRowReverse, inlineFlex, justifyBetween, justifyCenter, justifyEnd, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
+const {
+  heading3
+} = typography;
 const {
   system: {
     active,
@@ -14,36 +18,37 @@ const {
     pressed
   }
 } = colors;
-export const SummaryRoot = css`
-    display: flex;
-    position: relative;
-    justify-content: space-between;
-    align-items: center;
+export const SummaryRootCSS = css`
+    ${flexRow};
+    ${positionRelative};
+    ${justifyBetween};
+    ${alignCenter};
+    ${cursorPointer};
+    ${borderBox};
+    ${borderRadius4px};
     width: 100%;
     min-height: 56px;
-    cursor: pointer;
-    box-sizing: border-box;
     padding: 16px 24px;
-    border-radius: 4px;
     &.background {
         background-color: ${headerbar};
     }
-    .Accordion-Expand-Icon, .Accordion-Collapse-Icon {
-        cursor: pointer;
+    .Accordion-Expand-Icon,
+    .Accordion-Collapse-Icon {
+        ${cursorPointer};
         color: ${active} !important;
         &:active,
         &:focus,
         &:hover {
+            ${backgroundTransparent};
             color: ${active};
-            background-color: transparent;
         }
     }
     .Accordion-Icon-Root {
-        display: flex;
+        ${flexRow};
         .Accordion-Icon.rotate-able {
+            ${borderBox};
             width: 24px;
             height: 24px;
-            box-sizing: border-box;
             &:not(.TreeView) {
                 transform: rotateZ(0deg);
                 transform-origin: center;
@@ -54,8 +59,8 @@ export const SummaryRoot = css`
         }
     }
     &.start {
-        flex-direction: row-reverse;
-        justify-content: flex-end;
+        ${flexRowReverse};
+        ${justifyEnd};
         .Accordion-Icon.rotate-able {
             margin-right: 8px;
             &.TreeView {
@@ -103,7 +108,7 @@ export const SummaryRoot = css`
         }
     }
     &.disabled {
-        pointer-events: none;
+        ${pointerEventsNone};
         background-color: ${fillDisabled};
         .DGN-UI-Accordion-Summary-Content,
         .Accordion-Expand-Icon {
@@ -111,58 +116,58 @@ export const SummaryRoot = css`
         }
     }
     &.treeview-disabled {
-        pointer-events: none;
+        ${pointerEventsNone};
         &:hover {
-            background-color: transparent;
+            ${backgroundTransparent};
         }
         .TreeView-Item {
             color: ${systemDisabled};
         }
         .Accordion-Icon.rotate-able.TreeView .DGN-UI-Icon {
+            ${cursorPointer};
             pointer-events: initial;
-            cursor: pointer;
         }
     }
     .DGN-UI-Accordion-Summary-Content {
-        display: flex;
-        position: relative;
-        align-items: center;
-        ${typography.heading3};
+        ${heading3};
+        ${flexRow};
+        ${positionRelative};
+        ${alignCenter};
+        ${breakWord};
+        ${userSelectNone};
+        ${borderBox}
         color: ${active};
         width: 100%;
         min-height: 24px;
-        word-break: break-word;
-        user-select: none;
-        box-sizing: border-box;
     }
     .Accordion-Icon {
-        display: inline-block;
-        position: relative;
-        cursor: pointer;
+        ${displayInlineBlock};
+        ${positionRelative};
+        ${cursorPointer};
         transition: transform 200ms linear;
         .Accordion-Expand-Icon {
             transform: scale(1);
             transition: transform 200ms linear;
             &.effect {
-                position: relative;
+                ${positionRelative};
             }
         }
         .Accordion-Collapse-Icon {
-            position: absolute;
+            ${positionAbsolute};
             inset: 0;
             transform: scale(0);
             transition: transform 200ms linear;
         }
         .effect {
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
+            ${inlineFlex};
+            ${justifyCenter};
+            ${alignCenter};
+            ${cursorPointer};
             min-width: 24px;
             max-width: 34px;
             min-height: 24px;
             max-height: 34px;
             padding: 3px;
-            cursor: pointer;
         }
     }
 `;

package/components/accordion/details.js

@@ -1,11 +1,11 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, forwardRef, useRef } from 'react';
-import { any, string, node, object } from 'prop-types';
+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 { typography } from "../../styles/typography";
+import { typography } from '../../styles/typography';
 import { color as colors } from '../../styles/colors';
 const {
   paragraph1
@@ -19,54 +19,60 @@ const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
   style,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
+  id
+}, reference) => {
+  const ref = useRef(null);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
 
-  const DetailsRoot = css`
-        ${displayBlock}
-        ${positionRelative}
-        ${overflowHidden}
-        height: 0;
-        transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-        .DGN-UI-Accordion-Details-Content {
-            ${borderBox}
-            ${paragraph1}
-            padding: 0 24px 16px 24px;
-            color: ${main};
-            &.disabled {
-                ${pointerEventsNone}
-                ${userSelectNone}
-            }
-        }
-    `;
-  return jsx("div", {
-    css: DetailsRoot,
-    className: 'DGN-UI-Accordion-Details',
-    ref: ref,
-    ...props
-  }, jsx("div", {
-    style: style,
-    className: ['DGN-UI-Accordion-Details-Content', className].join(' ').trim().replace(/\s+/g, ' ')
-  }, children));
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  return useMemo(() => {
+    return jsx("div", {
+      css: DetailsRootCSS,
+      className: 'DGN-UI-Accordion-Details',
+      ref: ref,
+      id: id
+    }, jsx("div", {
+      style: style,
+      className: ['DGN-UI-Accordion-Details-Content', className].join(' ').trim().replace(/\s+/g, ' ')
+    }, children));
+  }, [style, className, children, id]);
 }));
+const DetailsRootCSS = css`
+    ${displayBlock};
+    ${positionRelative};
+    ${overflowHidden};
+    height: 0;
+    transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    .DGN-UI-Accordion-Details-Content {
+        ${borderBox};
+        ${paragraph1};
+        padding: 0 24px 16px 24px;
+        color: ${main};
+        &.disabled {
+            ${pointerEventsNone}
+            ${userSelectNone}
+        }
+    }
+`;
 AccordionDetails.defaultProps = {
   className: '',
-  style: {}
+  style: {},
+  id: ''
 };
 AccordionDetails.propTypes = {
   /** The element to display in alert like text props (priority) */
-  children: node,
+  children: PropTypes.node,
 
   /** class for De */
-  className: string,
-
-  /** style inline for Detail */
-  style: object,
+  className: PropTypes.string,
 
-  /** any props else */
-  props: any
+  /** style inline of component */
+  style: PropTypes.object
 };
 export default AccordionDetails;

package/components/accordion/group.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useRef, forwardRef, Children, cloneElement } from 'react';
+import { memo, useRef, forwardRef, Children, cloneElement, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { borderRadius4px } from '../../styles/general';
@@ -9,73 +9,9 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   className,
   children,
   collapseOther,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
-  const AccordionGroupRoot = css`
-        ${borderRadius4px}
-        .DGN-UI-Accordion {
-            &:first-of-type {
-                &,
-                .DGN-UI-Accordion-Summary {
-                    border-radius: 4px 4px 0px 0px;
-                }
-                &.expanding {
-                    ${borderRadius4px}
-                    margin: 0 0 16px 0;
-                    .DGN-UI-Divider {
-                        display: none !important;
-                    }
-                }
-            }
-            &:last-child {
-                &,
-                .DGN-UI-Accordion-Summary {
-                    border-radius: 0px 0px 4px 4px;
-                }
-                &.expanding {
-                    ${borderRadius4px}
-                    margin: 16px 0 0 0;
-                    .DGN-UI-Accordion-Summary {
-                        border-radius: 4px 4px 0px 0px;
-                    }
-                    .DGN-UI-Divider {
-                        display: none !important;
-                    }
-                }
-            }
-            &:not(:first-of-type):not(:last-child) {
-                &,
-                .DGN-UI-Accordion-Summary {
-                    border-radius: 0px;
-                }
-                &.expanding {
-                    margin: 16px 0;
-                    border-radius: 4px;
-                    .DGN-UI-Accordion-Summary {
-                        border-radius: 4px 4px 0px 0px;
-                    }
-                    .DGN-UI-Divider {
-                        display: none !important;
-                    }
-                }
-            }
-            &:not(:last-child) {
-                .DGN-UI-Divider {
-                    display: block !important;
-                }
-                box-shadow: -2px 0px 2px -2px rgba(0, 0, 0, 0.25), 2px 0px 2px -2px rgba(0, 0, 0, 0.25);
-                &.expanding,
-                &.previousExpanding {
-                    ${borderRadius4px}
-                    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
-                }
-            }
-        }
-    `;
+  style
+}, reference) => {
+  const ref = useRef(null);
 
   const onCollapseOther = (e, onExpand) => {
     if (collapseOther) {
@@ -90,18 +26,91 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  return jsx("div", {
-    css: AccordionGroupRoot,
-    ref: ref,
-    ...props,
-    className: 'DGN-UI-Accordion-Group ' + className
-  }, Children.map(children, child => /*#__PURE__*/cloneElement(child, {
-    onExpand: e => onCollapseOther(e, child.props.onExpand)
-  })));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // 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, ' ')
+    }, Children.map(children, child => /*#__PURE__*/cloneElement(child, {
+      onExpand: e => onCollapseOther(e, child.props.onExpand)
+    })));
+  }, [className, children]);
 }));
+const AccordionGroupRootCSS = css`
+    ${borderRadius4px};
+    .DGN-UI-Accordion {
+        &:first-of-type {
+            &,
+            .DGN-UI-Accordion-Summary {
+                border-radius: 4px 4px 0px 0px;
+            }
+            &.expanding {
+                ${borderRadius4px};
+                margin: 0 0 16px 0;
+                .DGN-UI-Divider {
+                    display: none !important;
+                }
+            }
+        }
+        &:last-child {
+            &,
+            .DGN-UI-Accordion-Summary {
+                border-radius: 0px 0px 4px 4px;
+            }
+            &.expanding {
+                ${borderRadius4px};
+                margin: 16px 0 0 0;
+                .DGN-UI-Accordion-Summary {
+                    border-radius: 4px 4px 0px 0px;
+                }
+                .DGN-UI-Divider {
+                    display: none !important;
+                }
+            }
+        }
+        &:not(:first-of-type):not(:last-child) {
+            &,
+            .DGN-UI-Accordion-Summary {
+                border-radius: 0px;
+            }
+            &.expanding {
+                ${borderRadius4px};
+                margin: 16px 0;
+                .DGN-UI-Accordion-Summary {
+                    border-radius: 4px 4px 0px 0px;
+                }
+                .DGN-UI-Divider {
+                    display: none !important;
+                }
+            }
+        }
+        &:not(:last-child) {
+            .DGN-UI-Divider {
+                display: block !important;
+            }
+            box-shadow: -2px 0px 2px -2px rgba(0, 0, 0, 0.25), 2px 0px 2px -2px rgba(0, 0, 0, 0.25);
+            &.expanding,
+            &.previousExpanding {
+                ${borderRadius4px};
+                box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+            }
+        }
+    }
+`;
 AccordionGroup.defaultProps = {
   className: '',
-  collapseOther: true
+  collapseOther: true,
+  style: {}
 };
 AccordionGroup.propTypes = {
   /** collapse other if true */
@@ -113,10 +122,7 @@ AccordionGroup.propTypes = {
   /** insist <Accordion /> */
   children: PropTypes.node.isRequired,
 
-  /** style inline for AccordionGroup */
-  style: PropTypes.object,
-
-  /** any props else */
-  props: PropTypes.any
+  /** style inline of component */
+  style: PropTypes.object
 };
 export default AccordionGroup;

package/components/accordion/index.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useEffect, useRef, forwardRef, useState } from 'react';
+import { memo, useEffect, useRef, forwardRef, useState, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import AccordionContext from './context';
@@ -23,27 +23,10 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   boxShadow,
   className,
   children,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
+  style
+}, reference) => {
+  const ref = useRef(null);
   const [expandState, setExpandState] = useState(expanded || expand);
-  const AccordionRoot = css`
-        ${displayBlock}
-        ${positionRelative}
-        ${borderRadius4px}
-        width: 100%;
-        transition: margin 300ms ease;
-        &.boxShadow {
-            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
-        }
-        &.disabled {
-            cursor: no-drop;
-            box-shadow: none;
-        }
-    `;
   useEffect(() => {
     if (ref.current) {
       const previous = ref.current.previousElementSibling;
@@ -63,34 +46,60 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     });
   };
 
-  return jsx("div", {
-    css: AccordionRoot,
-    ref: ref,
-    ...props,
-    className: ['DGN-UI-Accordion', disabled ? 'disabled' : '', className, boxShadow === true ? 'boxShadow' : '', expandState ? 'expanding' : ''].join(' ').trim().replace(/\s+/g, ' ')
-  }, jsx(AccordionContext.Provider, {
-    value: {
-      expanded,
-      expandState,
-      disabled,
-      onClickAccordion: onClick ? onClickAccordion : null,
-      onExpand,
-      onCollapse,
-      setExpandState
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  return useMemo(() => {
+    return jsx("div", {
+      css: AccordionRootCSS,
+      ref: ref,
+      style: style,
+      className: ['DGN-UI-Accordion', disabled ? 'disabled' : '', className, boxShadow === true ? 'boxShadow' : '', expandState ? 'expanding' : ''].join(' ').trim().replace(/\s+/g, ' ')
+    }, jsx(AccordionContext.Provider, {
+      value: {
+        expanded,
+        expandState,
+        disabled,
+        onClickAccordion: onClick ? onClickAccordion : null,
+        onExpand,
+        onCollapse,
+        setExpandState
+      }
+    }, children, jsx(Divider, {
+      color: category,
+      style: {
+        margin: 0,
+        display: 'none'
+      }
+    })));
+  }, [disabled, className, boxShadow, onClick, children, expanded, onExpand, onCollapse, expandState]);
+}));
+const AccordionRootCSS = css`
+    ${displayBlock};
+    ${positionRelative};
+    ${borderRadius4px};
+    width: 100%;
+    transition: margin 300ms ease;
+    &.boxShadow {
+        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
     }
-  }, children, jsx(Divider, {
-    color: category,
-    style: {
-      margin: 0,
-      display: 'none'
+    &.disabled {
+        cursor: no-drop;
+        box-shadow: none;
     }
-  })));
-}));
+`;
 Accordion.defaultProps = {
   expand: false,
   disabled: false,
   className: '',
-  boxShadow: true
+  boxShadow: true,
+  style: {}
 };
 Accordion.propTypes = {
   /** prevent all event if true */
@@ -117,10 +126,7 @@ Accordion.propTypes = {
   /** insist <AccordionSummary />, <AccordionDetails /> */
   children: PropTypes.node,
 
-  /** style inline for Accordion */
-  style: PropTypes.object,
-
-  /** any props else */
-  props: PropTypes.any
+  /** style inline of component */
+  style: PropTypes.object
 };
 export default Accordion;