diginet-core-ui 1.3.65-beta.1 → 1.3.66

package/components/accordion/css.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/core';
 import theme from '../../theme/settings';
-import { alignCenter, backgroundTransparent, borderBox, borderRadius4px, breakWord, cursorPointer, displayInlineBlock, flexRow, flexRowReverse, inlineFlex, justifyBetween, justifyCenter, justifyEnd, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
+import { alignCenter, alignStart, backgroundTransparent, borderBox, borderRadius4px, breakWord, cursorPointer, displayInlineBlock, flexRow, flexRowReverse, inlineFlex, justifyBetween, justifyCenter, justifyEnd, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
 const {
   colors: {
     system: {
@@ -24,13 +24,13 @@ export const SummaryRootCSS = background => css`
     ${flexRow};
     ${positionRelative};
     ${justifyBetween};
-    ${alignCenter};
+    ${alignStart};
     ${cursorPointer};
     ${borderBox};
     ${borderRadius4px};
     width: 100%;
     min-height: 56px;
-    padding: ${spacing([4, 6])};
+    padding: ${spacing(4)}px ${spacing(6)}px;
     ${background && `background-color: ${background === true ? headerbar : theme.colors[background] || background};`};
     .Accordion-Expand-Icon,
     .Accordion-Collapse-Icon {
@@ -61,7 +61,7 @@ export const SummaryRootCSS = background => css`
         ${flexRowReverse};
         ${justifyEnd};
         .Accordion-Icon.rotate-able {
-            margin-right: ${spacing([2])};
+            margin-right: ${spacing(2)}px;
             &.TreeView {
                 transform: rotateZ(-90deg);
             }
@@ -69,7 +69,7 @@ export const SummaryRootCSS = background => css`
     }
     &.end {
         .Accordion-Icon.rotate-able {
-            margin-left: ${spacing([2])};
+            margin-left: ${spacing(2)}px;
             &.TreeView {
                 transform: rotateZ(90deg);
             }
@@ -131,10 +131,10 @@ export const SummaryRootCSS = background => css`
         ${heading3};
         ${flexRow};
         ${positionRelative};
+        ${alignCenter};
         ${breakWord};
         ${userSelectNone};
         ${borderBox}
-        ${alignCenter};
         color: ${active};
         width: 100%;
         min-height: 24px;

package/components/accordion/details.js

@@ -20,14 +20,19 @@ const {
 const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
-  id,
-  style
+  style,
+  id
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     return jsx("div", {
       css: DetailsRootCSS,
@@ -49,7 +54,7 @@ const DetailsRootCSS = css`
     .DGN-UI-Accordion-Details-Content {
         ${borderBox};
         ${paragraph1};
-        padding: ${spacing([0, 6, 4, 6])};
+        padding: 0 ${spacing(6)}px ${spacing(4)}px ${spacing(6)}px;
         color: ${main};
         &.disabled {
             ${pointerEventsNone}
@@ -59,17 +64,17 @@ const DetailsRootCSS = css`
 `;
 AccordionDetails.defaultProps = {
   className: '',
-  id: '',
-  style: {}
+  style: {},
+  id: ''
 };
 AccordionDetails.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
 
-  /** Class for component. */
-  className: PropTypes.string,
-
   /** Style inline of component. */
-  style: PropTypes.object
+  style: PropTypes.object,
+
+  /** Class for component. */
+  className: PropTypes.string
 };
 export default AccordionDetails;

package/components/accordion/group.js

@@ -5,13 +5,9 @@ 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 theme from '../../theme/settings';
-const {
-  spacing
-} = theme;
 const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  children,
   className,
+  children,
   collapseOther,
   style
 }, reference) => {
@@ -30,10 +26,15 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  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,
@@ -55,7 +56,7 @@ const AccordionGroupRootCSS = css`
             }
             &.expanding {
                 ${borderRadius4px};
-                margin: ${spacing([0, 0, 4, 0])};
+                margin: 0 0 16px 0;
                 .DGN-UI-Divider {
                     display: none !important;
                 }
@@ -68,7 +69,7 @@ const AccordionGroupRootCSS = css`
             }
             &.expanding {
                 ${borderRadius4px};
-                margin: ${spacing([4, 0, 0, 0])};
+                margin: 16px 0 0 0;
                 .DGN-UI-Accordion-Summary {
                     border-radius: 4px 4px 0px 0px;
                 }
@@ -84,7 +85,7 @@ const AccordionGroupRootCSS = css`
             }
             &.expanding {
                 ${borderRadius4px};
-                margin: ${spacing([4, 0])};
+                margin: 16px 0;
                 .DGN-UI-Accordion-Summary {
                     border-radius: 4px 4px 0px 0px;
                 }
@@ -115,13 +116,13 @@ AccordionGroup.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
 
+  /** Style inline of component. */
+  style: PropTypes.object,
+
   /** Class for component. */
   className: PropTypes.string,
 
   /** If `true`, collapse other when expand */
-  collapseOther: PropTypes.bool,
-
-  /** Style inline of component. */
-  style: PropTypes.object
+  collapseOther: PropTypes.bool
 };
 export default AccordionGroup;

package/components/accordion/index.js

@@ -16,16 +16,16 @@ const {
   }
 } = theme;
 const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  boxShadow,
-  children,
-  className,
+  id,
   disabled,
   expand,
   expanded,
-  id,
   onClick,
-  onCollapse,
   onExpand,
+  onCollapse,
+  boxShadow,
+  className,
+  children,
   style
 }, reference) => {
   const ref = useRef(null);
@@ -49,17 +49,22 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     });
   };
 
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // 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: ['DGN-UI-Accordion', disabled ? 'disabled' : '', className, boxShadow === true ? 'boxShadow' : '', expandState ? 'expanding' : ''].join(' ').trim().replace(/\s+/g, ' ')
     }, jsx(AccordionContext.Provider, {
       value: {
         expanded,
@@ -101,12 +106,12 @@ Accordion.defaultProps = {
   style: {}
 };
 Accordion.propTypes = {
-  /** The box-shadow of component. */
-  boxShadow: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-
   /** The content of the component (insist <AccordionSummary />, <AccordionDetails />). */
   children: PropTypes.node,
 
+  /** Style inline of component. */
+  style: PropTypes.object,
+
   /** Class for component. */
   className: PropTypes.string,
 
@@ -119,13 +124,13 @@ Accordion.propTypes = {
   /** Expand state of accordion (should use this). */
   expanded: PropTypes.bool,
 
-  /** Callback fired when Accordion is collapsed. */
-  onCollapse: PropTypes.func,
+  /** The box-shadow of component. */
+  boxShadow: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 
   /** Callback fired when Accordion is expanded. */
   onExpand: PropTypes.func,
 
-  /** Style inline of component. */
-  style: PropTypes.object
+  /** Callback fired when Accordion is collapsed. */
+  onCollapse: PropTypes.func
 };
 export default Accordion;

package/components/accordion/summary.js

@@ -4,31 +4,20 @@
 import { memo, useEffect, useRef, useContext, forwardRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
+import { renderIcon } from '../../utils';
 import { SummaryRootCSS } from './css';
 import AccordionContext from './context';
-import { ButtonIcon, Typography } from '..';
-import theme from '../../theme/settings';
-const {
-  colors: {
-    system: {
-      active,
-      disabled: systemDisabled
-    }
-  },
-  spacing
-} = theme;
 const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  background,
-  children,
-  className,
-  collapseIcon,
+  id,
   expandIcon,
+  collapseIcon,
   expandIconAt,
-  expandIconProps,
-  id,
+  background,
+  className,
   onClick,
-  style,
-  title
+  children,
+  expandIconProps,
+  style
 }, reference) => {
   const {
     expanded,
@@ -113,10 +102,15 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       showHideDetailHandler('hide');
     }
   }, [expandState]);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     return jsx("div", {
       id: id,
@@ -128,27 +122,16 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', expandState ? 'expanding' : '', className].join(' ').trim().replace(/\s+/g, ' ')
     }, jsx("div", {
       className: 'DGN-UI-Accordion-Summary-Content'
-    }, jsx(Typography, {
-      type: 'h3',
-      lineClamp: 2,
-      color: disabled ? systemDisabled : active,
-      style: {
-        marginRight: children && title ? spacing([4]) : 0
-      }
-    }, title || ''), children), !!expandIcon && jsx("div", {
+    }, children), !!expandIcon && jsx("div", {
       className: 'Accordion-Icon-Root'
     }, jsx("div", { ...expandIconProps,
       ref: expandIconRef,
       className: ['Accordion-Icon', collapseIcon ? '' : 'rotate-able', expandIconProps.className ? expandIconProps.className : ''].join(' ').trim().replace(/\s+/g, ' ')
-    }, typeof expandIcon === 'string' ? jsx(ButtonIcon, {
-      viewType: 'ghost',
-      name: expandIcon,
+    }, typeof expandIcon === 'string' ? renderIcon(expandIcon, 'effect', {
       className: 'Accordion-Expand-Icon'
     }) : jsx("span", {
       className: 'Accordion-Expand-Icon effect'
-    }, expandIcon), !!collapseIcon && (typeof collapseIcon === 'string' ? jsx(ButtonIcon, {
-      viewType: 'ghost',
-      name: collapseIcon,
+    }, expandIcon), !!collapseIcon && (typeof collapseIcon === 'string' ? renderIcon(collapseIcon, 'effect', {
       className: 'Accordion-Collapse-Icon'
     }) : jsx("span", {
       className: 'Accordion-Collapse-Icon effect'
@@ -156,41 +139,35 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [id, expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, style, expandState, disabled]);
 }));
 AccordionSummary.defaultProps = {
-  className: '',
-  expandIcon: 'ArrowRight',
   expandIconAt: 'start',
   expandIconProps: {},
+  className: '',
+  expandIcon: 'ArrowRight',
   style: {}
 };
 AccordionSummary.propTypes = {
-  /** Background for label summary. */
-  background: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-
   /** The content of the component. */
   children: PropTypes.node,
 
+  /** Style inline of component. */
+  style: PropTypes.object,
+
   /** Class for component. */
   className: PropTypes.string,
 
-  /** Icon display for collapse icon. */
-  collapseIcon: PropTypes.any,
-
   /** Icon display for expand icon. */
   expandIcon: PropTypes.any,
 
+  /** Icon display for collapse icon. */
+  collapseIcon: PropTypes.any,
+
   /** Position to render icon. */
   expandIconAt: PropTypes.oneOf(['start', 'end']),
 
-  /** Other props of icons. */
-  expandIconProps: PropTypes.any,
-
-  /** Callback fired when the component is clicked. */
-  onClick: PropTypes.func,
-
-  /** Style inline of component. */
-  style: PropTypes.object,
+  /** Background for label summary. */
+  background: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 
-  /** The title of the component. */
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+  /** Other props of icons. */
+  expandIconProps: PropTypes.any
 };
 export default AccordionSummary;

package/components/avatar/index.js

@@ -241,10 +241,15 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   }, [src]);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     return jsx(Fragment, null, jsx("div", {
       css: _AvatarContainerCSS,

package/components/badge/index.js

@@ -98,10 +98,15 @@ 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 || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     let node = children;
 

package/components/button/icon.js

@@ -104,10 +104,15 @@ 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 || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
 
   const _onClick = event => {
     event.persist();