diginet-core-ui 1.3.46 → 1.3.47-beta.3

package/assets/images/menu/dhr/MHRM09N1030.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="M30.7901 28.13C30.7901 27.5 30.2701 26.99 29.6401 26.99H19.2301C18.5901 26.99 18.0801 27.5 18.0801 28.13C18.0801 28.76 18.6001 29.27 19.2301 29.27H29.6401C30.2701 29.27 30.7901 28.76 30.7901 28.13Z" fill="#FF8C00"/>
+<path d="M29.6401 22.41H19.2301C18.5901 22.41 18.0801 22.92 18.0801 23.55C18.0801 24.18 18.6001 24.69 19.2301 24.69H29.6401C30.2801 24.69 30.7901 24.18 30.7901 23.55C30.7901 22.93 30.2701 22.41 29.6401 22.41Z" fill="#FF8C00"/>
+<path d="M19.2301 31.5601C18.5901 31.5601 18.0801 32.0701 18.0801 32.7001C18.0801 33.3301 18.6001 33.8401 19.2301 33.8401H25.0201C25.6601 33.8401 26.1701 33.3301 26.1701 32.7001C26.1701 32.0701 25.6501 31.5601 25.0201 31.5601H19.2301Z" fill="#FF8C00"/>
+<path d="M10.0601 25.8101H11.2001V23.5701H10.2401V22.8501C10.8601 22.7501 11.1701 22.6401 11.5201 22.4301H12.3901V25.8201H13.3301V26.7601H10.0601V25.8101Z" fill="#FF8C00"/>
+<path d="M14.8799 25.9401C14.8799 25.4501 15.2399 25.05 15.7799 25.05C16.3199 25.05 16.6799 25.4501 16.6799 25.9401C16.6799 26.4301 16.3199 26.83 15.7799 26.83C15.2399 26.83 14.8799 26.4301 14.8799 25.9401Z" fill="#FF8C00"/>
+<path d="M9.92011 33.17C11.0901 32.23 11.9401 31.5 11.9401 30.91C11.9401 30.52 11.6901 30.34 11.3001 30.34C10.9801 30.34 10.7201 30.55 10.4901 30.75L9.86011 30.12C10.3401 29.64 10.7801 29.42 11.4701 29.42C12.4101 29.42 13.0601 29.98 13.0601 30.84C13.0601 31.54 12.3301 32.3 11.6101 32.9C11.8501 32.87 12.1801 32.85 12.4001 32.85H13.2801V33.83H9.92011V33.17Z" fill="#FF8C00"/>
+<path d="M14.8799 33.03C14.8799 32.54 15.2399 32.14 15.7799 32.14C16.3199 32.14 16.6799 32.54 16.6799 33.03C16.6799 33.52 16.3199 33.92 15.7799 33.92C15.2399 33.92 14.8799 33.53 14.8799 33.03Z" fill="#FF8C00"/>
+<path d="M34.74 9.52L25.35 0.26C25.17 0.1 24.93 0 24.7 0H8.26C6.47 0 5 1.45 5 3.22V35.78C5 37.55 6.47 39 8.26 39H31.73C33.53 39 34.99 37.55 34.99 35.78V10.16C35 9.93 34.9 9.69 34.74 9.52ZM25.61 3.09L26.05 3.52L31.42 8.82L31.86 9.26H27.03C26.25 9.26 25.6 8.63 25.6 7.85V3.09H25.61ZM33.16 35.78C33.16 36.56 32.52 37.19 31.73 37.19H8.26C7.48 37.19 6.83 36.56 6.83 35.78V3.22C6.83 2.44 7.47 1.81 8.26 1.81H23.77V7.85C23.77 9.62 25.24 11.07 27.03 11.07H31.22L32.9 11.06H33.16V35.78Z" fill="#2680EB"/>
+<path d="M16.0101 5.78003C12.4801 5.78003 9.61011 8.64003 9.61011 12.18C9.61011 15.72 12.4701 18.58 16.0101 18.58C19.5401 18.58 22.4101 15.72 22.4101 12.18C22.4101 8.64003 19.5401 5.78003 16.0101 5.78003ZM15.8301 16.69C15.2601 16.69 14.8101 16.26 14.8101 15.72C14.8101 15.18 15.2601 14.76 15.8301 14.76C16.3901 14.76 16.8501 15.19 16.8501 15.72C16.8501 16.26 16.3901 16.69 15.8301 16.69ZM17.5801 12.63C16.8401 13.06 16.6401 13.3 16.6401 13.8V14.05H14.9601L14.9401 13.83C14.8401 12.91 15.1101 12.42 15.8601 11.99C16.5901 11.56 16.7801 11.33 16.7801 10.86C16.7801 10.42 16.4201 10.12 15.9201 10.12C15.4001 10.12 15.0501 10.46 15.0301 10.99H13.2801C13.3001 9.58003 14.3201 8.66003 16.0401 8.66003C17.6801 8.66003 18.7401 9.52003 18.7401 10.82C18.7401 11.62 18.3701 12.17 17.5801 12.63Z" fill="#2680EB"/>
+</svg>

package/components/accordion/css.js

@@ -1,37 +1,37 @@
 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';
+import theme from '../../theme/settings';
+import { alignCenter, alignStart, backgroundTransparent, borderBox, borderRadius4px, breakWord, cursorPointer, displayInlineBlock, flexRow, flexRowReverse, inlineFlex, justifyBetween, justifyCenter, justifyEnd, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
 const {
-  heading3
-} = typography;
-const {
-  system: {
-    active,
-    disabled: systemDisabled
+  colors: {
+    system: {
+      active,
+      disabled: systemDisabled
+    },
+    fill: {
+      disabled: fillDisabled,
+      headerbar,
+      focus,
+      hover,
+      pressed
+    }
   },
-  fill: {
-    disabled: fillDisabled,
-    headerbar,
-    focus,
-    hover,
-    pressed
-  }
-} = colors;
-export const SummaryRootCSS = css`
+  typography: {
+    heading3
+  },
+  spacing
+} = theme;
+export const SummaryRootCSS = background => css`
     ${flexRow};
     ${positionRelative};
     ${justifyBetween};
-    ${alignCenter};
+    ${alignStart};
     ${cursorPointer};
     ${borderBox};
     ${borderRadius4px};
     width: 100%;
     min-height: 56px;
-    padding: 16px 24px;
-    &.background {
-        background-color: ${headerbar};
-    }
+    padding: ${spacing(4)}px ${spacing(6)}px;
+    ${background && `background-color: ${background === true ? headerbar : theme.colors[background] || background};`};
     .Accordion-Expand-Icon,
     .Accordion-Collapse-Icon {
         ${cursorPointer};
@@ -47,8 +47,7 @@ export const SummaryRootCSS = css`
         ${flexRow};
         .Accordion-Icon.rotate-able {
             ${borderBox};
-            width: 24px;
-            height: 24px;
+            ${parseWidthHeight(24, 24)};
             &:not(.TreeView) {
                 transform: rotateZ(0deg);
                 transform-origin: center;
@@ -62,7 +61,7 @@ export const SummaryRootCSS = css`
         ${flexRowReverse};
         ${justifyEnd};
         .Accordion-Icon.rotate-able {
-            margin-right: 8px;
+            margin-right: ${spacing(2)}px;
             &.TreeView {
                 transform: rotateZ(-90deg);
             }
@@ -70,7 +69,7 @@ export const SummaryRootCSS = css`
     }
     &.end {
         .Accordion-Icon.rotate-able {
-            margin-left: 8px;
+            margin-left: ${spacing(2)}px;
             &.TreeView {
                 transform: rotateZ(90deg);
             }
@@ -144,8 +143,7 @@ export const SummaryRootCSS = css`
         ${displayInlineBlock};
         ${positionRelative};
         ${cursorPointer};
-        width: 24px;
-        height: 24px;
+        ${parseWidthHeight(24, 24)};
         transition: transform 200ms linear;
         .Accordion-Expand-Icon {
             transform: scale(1);
@@ -169,7 +167,6 @@ export const SummaryRootCSS = css`
             max-width: 34px;
             min-height: 24px;
             max-height: 34px;
-            padding: 3px;
         }
     }
 `;

package/components/accordion/details.js

@@ -5,16 +5,18 @@ 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 { color as colors } from '../../styles/colors';
+import theme from '../../theme/settings';
 const {
-  paragraph1
-} = typography;
-const {
-  text: {
-    main
-  }
-} = colors;
+  colors: {
+    text: {
+      main
+    }
+  },
+  typography: {
+    paragraph1
+  },
+  spacing
+} = theme;
 const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
@@ -52,7 +54,7 @@ const DetailsRootCSS = css`
     .DGN-UI-Accordion-Details-Content {
         ${borderBox};
         ${paragraph1};
-        padding: 0 24px 16px 24px;
+        padding: 0 ${spacing(6)}px ${spacing(4)}px ${spacing(6)}px;
         color: ${main};
         &.disabled {
             ${pointerEventsNone}
@@ -66,13 +68,13 @@ AccordionDetails.defaultProps = {
   id: ''
 };
 AccordionDetails.propTypes = {
-  /** The element to display in alert like text props (priority) */
+  /** The content of the component. */
   children: PropTypes.node,
 
-  /** class for De */
-  className: PropTypes.string,
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** style inline of component */
-  style: PropTypes.object
+  /** Class for component. */
+  className: PropTypes.string
 };
 export default AccordionDetails;

package/components/accordion/group.js

@@ -41,10 +41,10 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: ref,
       style: style,
       className: ['DGN-UI-Accordion-Group', className].join(' ').trim().replace(/\s+/g, ' ')
-    }, Children.map(children, child => /*#__PURE__*/cloneElement(child, {
+    }, Children.map(children, child => child && /*#__PURE__*/cloneElement(child, {
       onExpand: e => onCollapseOther(e, child.props.onExpand)
     })));
-  }, [className, children]);
+  }, [style, className, children]);
 }));
 const AccordionGroupRootCSS = css`
     ${borderRadius4px};
@@ -113,16 +113,16 @@ AccordionGroup.defaultProps = {
   style: {}
 };
 AccordionGroup.propTypes = {
-  /** collapse other if true */
-  collapseOther: PropTypes.bool,
+  /** The content of the component. */
+  children: PropTypes.node,
 
-  /** class on element */
-  className: PropTypes.string,
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** insist <Accordion /> */
-  children: PropTypes.node.isRequired,
+  /** Class for component. */
+  className: PropTypes.string,
 
-  /** style inline of component */
-  style: PropTypes.object
+  /** If `true`, collapse other when expand */
+  collapseOther: PropTypes.bool
 };
 export default AccordionGroup;

package/components/accordion/index.js

@@ -7,13 +7,16 @@ import { jsx, css } from '@emotion/core';
 import AccordionContext from './context';
 import Divider from '../divider';
 import { borderRadius4px, displayBlock, positionRelative } from '../../styles/general';
-import { color as colors } from '../../styles/colors';
+import theme from '../../theme/settings';
 const {
-  line: {
-    category
+  colors: {
+    line: {
+      category
+    }
   }
-} = colors;
+} = theme;
 const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  id,
   disabled,
   expand,
   expanded,
@@ -57,6 +60,7 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return useMemo(() => {
     return jsx("div", {
+      id: id,
       css: AccordionRootCSS,
       ref: ref,
       style: style,
@@ -78,7 +82,7 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         display: 'none'
       }
     })));
-  }, [disabled, className, boxShadow, onClick, children, expanded, onExpand, onCollapse, expandState]);
+  }, [id, disabled, className, boxShadow, onClick, children, expanded, onExpand, onCollapse, expandState]);
 }));
 const AccordionRootCSS = css`
     ${displayBlock};
@@ -102,31 +106,31 @@ Accordion.defaultProps = {
   style: {}
 };
 Accordion.propTypes = {
-  /** prevent all event if true */
+  /** The content of the component (insist <AccordionSummary />, <AccordionDetails />). */
+  children: PropTypes.node,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
 
-  /** expand immediate after render if true (don't use this) */
+  /** If `true`, expand immediate after render (shouldn't use this). */
   expand: PropTypes.bool,
 
-  /** expand state of accordion (use this) */
+  /** Expand state of accordion (should use this). */
   expanded: PropTypes.bool,
 
-  /** class on element */
-  className: PropTypes.string,
-
-  /** class on element */
+  /** The box-shadow of component. */
   boxShadow: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 
-  /** The function will run after expand Accordion detail */
+  /** Callback fired when Accordion is expanded. */
   onExpand: PropTypes.func,
 
-  /** The function will run after collapse Accordion detail */
-  onCollapse: PropTypes.func,
-
-  /** insist <AccordionSummary />, <AccordionDetails /> */
-  children: PropTypes.node,
-
-  /** style inline of component */
-  style: PropTypes.object
+  /** Callback fired when Accordion is collapsed. */
+  onCollapse: PropTypes.func
 };
 export default Accordion;

package/components/accordion/summary.js

@@ -8,6 +8,7 @@ import { renderIcon } from '../../utils';
 import { SummaryRootCSS } from './css';
 import AccordionContext from './context';
 const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  id,
   expandIcon,
   collapseIcon,
   expandIconAt,
@@ -18,9 +19,6 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   expandIconProps,
   style
 }, reference) => {
-  const ref = useRef(null);
-  const expandIconRef = useRef(null);
-  const timer = useRef(null);
   const {
     expanded,
     expandState,
@@ -30,8 +28,13 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onCollapse,
     setExpandState
   } = useContext(AccordionContext);
+  const ref = useRef(null);
+  const expandIconRef = useRef(null);
+  const timer = useRef(null);
 
-  const onClickHandler = e => {
+  const _SummaryRootCSS = SummaryRootCSS(background);
+
+  const _onClick = e => {
     if (!disabled) {
       const target = e.target;
 
@@ -93,19 +96,6 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  useEffect(() => {
-    if (/^(#|rgb)/.test(background)) {
-      if (ref.current) {
-        ref.current.style.backgroundColor = background;
-      }
-
-      return () => {
-        if (ref.current) {
-          ref.current.style.backgroundColor = null;
-        }
-      };
-    }
-  }, [background]);
   useEffect(() => {
     if (expandState) {
       showHideDetailHandler('show');
@@ -124,19 +114,20 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return useMemo(() => {
     return jsx("div", {
-      css: SummaryRootCSS,
+      id: id,
+      css: _SummaryRootCSS,
       ref: ref,
       tabIndex: "-1",
-      onClick: onClickHandler,
+      onClick: _onClick,
       style: style,
-      className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', className, background === true ? 'background' : '', expandState ? 'expanding' : ''].join(' ').trim().replace(/\s+/g, ' ')
+      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'
     }, 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()
+      className: ['Accordion-Icon', collapseIcon ? '' : 'rotate-able', expandIconProps.className ? expandIconProps.className : ''].join(' ').trim().replace(/\s+/g, ' ')
     }, typeof expandIcon === 'string' ? renderIcon(expandIcon, 'effect', {
       className: 'Accordion-Expand-Icon'
     }) : jsx("span", {
@@ -146,7 +137,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }) : jsx("span", {
       className: 'Accordion-Collapse-Icon effect'
     }, collapseIcon)))));
-  }, [expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, expandState]);
+  }, [id, expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, expandState]);
 }));
 AccordionSummary.defaultProps = {
   expandIconAt: 'start',
@@ -156,28 +147,28 @@ AccordionSummary.defaultProps = {
   style: {}
 };
 AccordionSummary.propTypes = {
-  /** the icon to display for expand icon */
+  /** The content of the component. */
+  children: PropTypes.node,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** Icon display for expand icon. */
   expandIcon: PropTypes.any,
 
-  /** the icon to display for collapse icon */
+  /** Icon display for collapse icon. */
   collapseIcon: PropTypes.any,
 
-  /** the position to render expand icon */
+  /** Position to render icon. */
   expandIconAt: PropTypes.oneOf(['start', 'end']),
 
-  /** background for label summary */
+  /** Background for label summary. */
   background: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 
-  /** class for Summary component */
-  className: PropTypes.string,
-
-  /** The element to display in alert like text props (priority) */
-  children: PropTypes.node,
-
-  /** props of expand and collapse icons */
-  expandIconProps: PropTypes.any,
-
-  /** style inline of component */
-  style: PropTypes.object
+  /** Other props of icons. */
+  expandIconProps: PropTypes.any
 };
 export default AccordionSummary;

package/components/alert/index.js

@@ -10,8 +10,8 @@ import ButtonIcon from '../button/icon';
 import Icon from '../../icons';
 import { hexToRGBA } from '../../styles/color-helper';
 import { typography } from '../../styles/typography';
-import { alignCenter, border, borderBox, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from '../../styles/general';
 import { useTheme } from '../../theme';
+import { alignCenter, border, borderBox, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from '../../styles/general';
 const {
   heading3,
   heading4,

package/components/chip/index.js

@@ -114,8 +114,7 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: size
     }, jsx(Typography, {
       type: size === 'small' ? 'p2' : 'p1',
-      color: 'inherit',
-      lineClamp: 1
+      color: 'inherit'
     }, renderLabel()));
   }, [label, size, startIcon, endIcon, clearAble]);
   const endIconView = useMemo(() => {

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

@@ -41,8 +41,8 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   inputProps,
   forTreeView,
-  width,
   labelProps,
+  width,
   ...props
 }, reference) => {
   if (!inputRef) {