diginet-core-ui 1.3.36 → 1.3.38

package/components/accordion/summary.js

@@ -1,11 +1,11 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useEffect, useRef, useContext, forwardRef } from 'react';
-import { any, oneOf, node, string, bool, oneOfType } from 'prop-types';
+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 { SummaryRoot } from './css';
+import { SummaryRootCSS } from './css';
 import AccordionContext from './context';
 const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   expandIcon,
@@ -16,12 +16,9 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onClick,
   children,
   expandIconProps,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
+  style
+}, reference) => {
+  const ref = useRef(null);
   const expandIconRef = useRef(null);
   const timer = useRef(null);
   const {
@@ -81,7 +78,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           }, (detailsEl.firstChild.childNodes.length || 2.5) * 100);
         }
       } else {
-        if (detailsEl) {
+        if (detailsEl && detailsEl.style.height) {
           detailsEl.style.height = detailsEl.scrollHeight + 'px';
 
           if (timer.current) {
@@ -116,59 +113,71 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       showHideDetailHandler('hide');
     }
   }, [expandState]);
-  return jsx("div", {
-    css: SummaryRoot,
-    ref: ref,
-    tabIndex: "-1",
-    ...props,
-    onClick: onClickHandler,
-    className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', className, background === true ? 'background' : '', expandState ? 'expanding' : ''].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()
-  }, typeof expandIcon === 'string' ? renderIcon(expandIcon, 'effect', {
-    className: 'Accordion-Expand-Icon'
-  }) : jsx("span", {
-    className: 'Accordion-Expand-Icon effect'
-  }, expandIcon), !!collapseIcon && (typeof collapseIcon === 'string' ? renderIcon(collapseIcon, 'effect', {
-    className: 'Accordion-Collapse-Icon'
-  }) : jsx("span", {
-    className: 'Accordion-Collapse-Icon effect'
-  }, collapseIcon)))));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  return useMemo(() => {
+    return jsx("div", {
+      css: SummaryRootCSS,
+      ref: ref,
+      tabIndex: "-1",
+      onClick: onClickHandler,
+      style: style,
+      className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', className, background === true ? 'background' : '', expandState ? 'expanding' : ''].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()
+    }, typeof expandIcon === 'string' ? renderIcon(expandIcon, 'effect', {
+      className: 'Accordion-Expand-Icon'
+    }) : jsx("span", {
+      className: 'Accordion-Expand-Icon effect'
+    }, expandIcon), !!collapseIcon && (typeof collapseIcon === 'string' ? renderIcon(collapseIcon, 'effect', {
+      className: 'Accordion-Collapse-Icon'
+    }) : jsx("span", {
+      className: 'Accordion-Collapse-Icon effect'
+    }, collapseIcon)))));
+  }, [expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, expandState]);
 }));
 AccordionSummary.defaultProps = {
   expandIconAt: 'start',
   expandIconProps: {},
   className: '',
-  expandIcon: 'ArrowRight'
+  expandIcon: 'ArrowRight',
+  style: {}
 };
 AccordionSummary.propTypes = {
   /** the icon to display for expand icon */
-  expandIcon: any,
+  expandIcon: PropTypes.any,
 
   /** the icon to display for collapse icon */
-  collapseIcon: any,
+  collapseIcon: PropTypes.any,
 
   /** the position to render expand icon */
-  expandIconAt: oneOf(['start', 'end']),
+  expandIconAt: PropTypes.oneOf(['start', 'end']),
 
   /** background for label summary */
-  background: oneOfType([string, bool]),
+  background: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 
   /** class for Summary component */
-  className: string,
+  className: PropTypes.string,
 
   /** The element to display in alert like text props (priority) */
-  children: node,
+  children: PropTypes.node,
 
   /** props of expand and collapse icons */
-  expandIconProps: any,
+  expandIconProps: PropTypes.any,
 
-  /** any props else */
-  props: any
+  /** style inline of component */
+  style: PropTypes.object
 };
 export default AccordionSummary;

package/components/alert/index.js

@@ -7,10 +7,10 @@ import { jsx, css } from '@emotion/core';
 import LinearProgress from '../progress/linear';
 import { color as colors } from '../../styles/colors';
 import ButtonIcon from '../button/icon';
-import * as Icons from '../../icons';
-import { capitalize } from '../../utils';
+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';
 const {
   heading3,
   heading4,
@@ -21,16 +21,10 @@ const {
 } = typography;
 const {
   system: {
-    rest
-  },
-  semantic: {
-    success,
-    warning,
-    danger,
-    info
+    rest,
+    white
   }
 } = colors;
-const colorMap = new Map([['info', info], ['success', success], ['warning', warning], ['danger', danger]]);
 const iconMap = new Map([['info', 'Info'], ['success', 'ApprovalFilled'], ['warning', 'Warning'], ['danger', 'CancelFilled']]);
 const maxWidthMap = new Map([['tiny', 320], ['small', 400], ['medium', 480]]);
 const primaryTypoMap = new Map([['tiny', heading5], ['small', heading4], ['medium', heading3]]);
@@ -46,76 +40,25 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   autoDisappear,
   duration,
   clearAble,
-  refs,
   onClose,
-  usedByNotify,
-  children,
-  ...props
+  children
 }, ref) => {
   const clearIconRef = useRef(null);
   const [percentState, setPercentState] = useState(100);
-  const mainColor = colorMap.get(color);
-  const AlertContainer = css`
-        position: relative;
-        display: block;
-        margin-bottom: 1rem;
-        transition: opacity ${progressing ? duration / 2 + 1 : duration * 1}s ease ${progressing ? duration / 2 : 0}s;
-        pointer-events: auto;
-        z-index: 9001;
-        max-width: ${maxWidthMap.get(size)}px;
-    `;
-  const AlertInfo = css`
-        display: flex;
-        position: relative;
-        width: 100%;
-        min-width: 320px;
-        border: 1px solid ${mainColor};
-        color: ${mainColor};
-        background-color: ${hexToRGBA(mainColor, 0.15)};
-        box-sizing: border-box;
-        border-radius: 4px;
-        padding: 0 4px 0 16px;
-        opacity: 1;
-        word-break: break-word;
-    `;
-  const AlertIcon = css`
-        display: inherit;
-        margin-right: 10px;
-        padding: 8px 0;
-    `;
-  const AlertText = css`
-        display: block;
-        margin-right: ${clearAble ? '10px' : 0};
-        padding: 8px 0;
-    `;
-  const AlertPrimary = css`
-        display: flex;
-        position: relative;
-        align-items: center;
-        justify-content: flex-start;
-        user-select: none;
-        ${secondary ? primaryTypoMap.get(size) : paragraph1}
-    `;
-  const AlertSecondary = css`
-        display: block;
-        user-select: none;
-        ${size === 'tiny' ? paragraph3 : paragraph2}
-    `;
-  const AlertClearIcon = css`
-        margin-left: auto;
-    `;
-  const linearProgressStyle = css`
-        display: block;
-        position: relative;
-        margin-top: ${size === 'medium' ? '4px' : '2px'};
-        padding: 0 5px;
-    `;
-  const NotFoundIcon = css`
-        display: block;
-        width: 70%;
-        height: 70%;
-        border: 1px dashed ${rest};
-    `;
+  const mainColor = colors[color];
+  const opacityColor = hexToRGBA(mainColor, 0.15);
+
+  const _AlertContainerCSS = AlertContainerCSS(size, progressing, duration);
+
+  const _AlertInfoCSS = AlertInfoCSS(mainColor, opacityColor);
+
+  const _AlertTextCSS = AlertTextCSS(clearAble);
+
+  const _AlertPrimaryCSS = AlertPrimaryCSS(secondary, size);
+
+  const _AlertSecondaryCSS = AlertSecondaryCSS(size);
+
+  const _linearProgressCSS = linearProgressCSS(size);
 
   const onClearAlert = (el, urgency) => {
     var _el$parentNode;
@@ -144,10 +87,11 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     let node = children;
 
     if (!node) {
-      const IconComp = Icons[capitalize(iconMap.get(color))];
+      const iconName = iconMap.get(color);
 
-      if (IconComp) {
-        node = jsx(IconComp, {
+      if (iconName) {
+        node = jsx(Icon, {
+          name: iconName,
           width: iconSizeMap.get(size),
           height: iconSizeMap.get(size),
           color: 'currentColor',
@@ -155,27 +99,31 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         });
       } else {
         node = jsx("span", {
-          css: NotFoundIcon
+          css: NotFoundIconCSS
         });
       }
     }
 
     return jsx("div", {
-      css: AlertInfo,
-      className: ['DGN-UI-Alert', className].join(' ').trim(),
-      ...props
+      css: _AlertInfoCSS,
+      className: ['DGN-UI-Alert', className].join(' ').trim().replace(/\s+/g, ' ')
     }, jsx("span", {
-      css: AlertIcon
+      css: AlertIconCSS,
+      className: 'DGN-UI-Alert-Icon'
     }, node), jsx("span", {
-      css: AlertText
+      css: _AlertTextCSS,
+      className: 'DGN-UI-Alert-Content'
     }, jsx("span", {
-      css: AlertPrimary
+      css: _AlertPrimaryCSS,
+      className: 'DGN-UI-Alert-Content-Primary'
     }, children ? typeof children === 'string' ? children : jsx("children", null) : text), secondary && jsx("span", {
-      css: AlertSecondary
+      css: _AlertSecondaryCSS,
+      className: 'DGN-UI-Alert-Content-Secondary'
     }, secondary)), jsx("span", {
-      css: AlertClearIcon,
+      css: AlertClearIconCSS,
       onClick: e => onClearAlert(e.currentTarget, true),
-      ref: clearIconRef
+      ref: clearIconRef,
+      className: 'DGN-UI-Alert-Clear'
     }, clearAble ? jsx(ButtonIcon, {
       circular: true,
       viewType: 'text',
@@ -183,10 +131,11 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       color: color,
       name: 'Close'
     }) : null));
-  }, [color, text, clearAble, secondary, size]);
+  }, [color, text, clearAble, secondary, size, children, className]);
   const LinearView = useMemo(() => {
     return progressing ? jsx("span", {
-      css: linearProgressStyle
+      css: _linearProgressCSS,
+      className: 'DGN-UI-Progress'
     }, jsx(LinearProgress, {
       determinate: true,
       background: 'transparent',
@@ -198,10 +147,8 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         boxShadow: 'none'
       }
     })) : null;
-  }, [percentState]);
+  }, [progressing, size, percentState]);
   useEffect(() => {
-    if (refs) refs(ref);
-
     if (progressing) {
       setTimeout(() => {
         setPercentState(0);
@@ -213,17 +160,88 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, []);
   return jsx("div", {
-    css: AlertContainer,
+    css: _AlertContainerCSS,
+    className: 'DGN-UI-Container-Alert',
     ref: ref
   }, AlertView, LinearView);
 }));
+
+const AlertContainerCSS = (size, progressing, duration) => css`
+    ${positionRelative};
+    ${displayBlock};
+    max-width: ${maxWidthMap.get(size)}px;
+    transition: opacity ${progressing ? duration / 2 + 1 : duration * 1}s ease ${progressing ? duration / 2 : 0}s;
+    margin-bottom: 1rem;
+    pointer-events: auto;
+    z-index: 9001;
+`;
+
+const AlertInfoCSS = (mainColor, opacityColor) => css`
+    ${flexRow};
+    ${positionRelative};
+    ${borderBox};
+    ${borderRadius4px};
+    ${breakWord};
+    ${border(1, mainColor)};
+    color: ${mainColor};
+    background-image: linear-gradient(${opacityColor}, ${opacityColor});
+    background-color: ${white};
+    width: 100%;
+    min-width: 320px;
+    padding: 0 4px 0 16px;
+    opacity: 1;
+`;
+
+const AlertIconCSS = css`
+    display: inherit;
+    margin-right: 10px;
+    padding: 8px 0;
+`;
+
+const AlertTextCSS = clearAble => css`
+    ${displayBlock};
+    margin-right: ${clearAble ? '10px' : 0};
+    padding: 8px 0;
+`;
+
+const AlertPrimaryCSS = (secondary, size) => css`
+    ${flexRow};
+    ${positionRelative};
+    ${alignCenter};
+    ${justifyStart};
+    ${userSelectNone};
+    ${secondary ? primaryTypoMap.get(size) : paragraph1}
+`;
+
+const AlertSecondaryCSS = size => css`
+    ${displayBlock};
+    ${userSelectNone};
+    ${size === 'tiny' ? paragraph3 : paragraph2}
+`;
+
+const AlertClearIconCSS = css`
+    margin-left: auto;
+`;
+
+const linearProgressCSS = size => css`
+    ${displayBlock};
+    ${positionRelative};
+    margin-top: ${size === 'medium' ? '4px' : '2px'};
+    padding: 0 5px;
+`;
+
+const NotFoundIconCSS = css`
+    ${displayBlock};
+    width: 70%;
+    height: 70%;
+    border: 1px dashed ${rest};
+`;
 Alert.defaultProps = {
   color: 'info',
   size: 'medium',
   className: '',
   clearAble: true,
   progressing: false,
-  usedByNotify: false,
   autoDisappear: false,
   duration: 5
 };
@@ -255,16 +273,10 @@ Alert.propTypes = {
   /** The amount of time the alert is displayed. The unit is the second */
   duration: PropTypes.number,
 
-  /** refs is a function, use to get ref of Alert component */
-  refs: PropTypes.func,
-
   /** The function will run after remove an Alert component */
   onClose: PropTypes.func,
 
   /** The element to display in alert like text props (priority) */
-  children: PropTypes.node,
-
-  /** any props else */
-  props: PropTypes.any
+  children: PropTypes.node
 };
 export default Alert;

package/components/alert/notify.js

@@ -119,14 +119,12 @@ const AlertNotify = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
       ReactDOM.render( /*#__PURE__*/React.createElement(Alert, {
         onClose: e => onClose(e, position),
-        usedByNotify: true,
         ...props,
         ...options
       }, message), document.querySelector(`div[class^="Notify-Alert-${position.vertical}-${position.horizontal}"]`).appendChild(el));
     } else {
       ReactDOM.render( /*#__PURE__*/React.createElement(Alert, {
         onClose: onClose,
-        usedByNotify: true,
         ...props,
         ...options
       }, message), document.querySelector(`div[class^="Notify-Alert-"]`).appendChild(el));
@@ -154,28 +152,28 @@ AlertNotify.defaultProps = {
   }
 };
 AlertNotify.propTypes = {
-  /**
-   * used to set position of Alert (is a string or an object)
-   * string is center (obligatory) as {vertical: 'center', horizontal: 'center'}
+  /**
+   * used to set position of Alert (is a string or an object)
+   * string is center (obligatory) as {vertical: 'center', horizontal: 'center'}
    */
   position: PropTypes.oneOfType([PropTypes.oneOf(['center']), PropTypes.shape({
     vertical: PropTypes.oneOf(['top', 'center', 'bottom']).isRequired,
     horizontal: PropTypes.oneOf(['left', 'center', 'right']).isRequired
   })]),
 
-  /**
-   * get the function used to add a new alert<br />
-   * 2 parameters:<br />
-   * + message: message for notify<br />
-   * + options: is an object insist {<br />
-   *      position: position other than the default (if necessary)<br />
-   *      duration: new duration,<br />
-   *      color: new color,<br />
-   *      progressing: new progressing value,<br />
-   *      autoDisappear: new autoDisappear value,<br />
-   *      size: new autoDisappear,<br />
-   *      and any props else in Alert component <br />
-   * }
+  /**
+   * get the function used to add a new alert<br />
+   * 2 parameters:<br />
+   * + message: message for notify<br />
+   * + options: is an object insist {<br />
+   *      position: position other than the default (if necessary)<br />
+   *      duration: new duration,<br />
+   *      color: new color,<br />
+   *      progressing: new progressing value,<br />
+   *      autoDisappear: new autoDisappear value,<br />
+   *      size: new autoDisappear,<br />
+   *      and any props else in Alert component <br />
+   * }
    */
   getAddNotify: PropTypes.func.isRequired,
 

package/components/badge/index.js

@@ -210,11 +210,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

@@ -359,14 +359,14 @@ ButtonIcon.propTypes = {
   /** custom hover color for button with color 'default' */
   colorHover: PropTypes.string,
 
-  /**
-   * size of button
-   *
-   * * 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 of button
+   *
+   * * 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']),
 
@@ -403,19 +403,19 @@ ButtonIcon.propTypes = {
   /** status loading of button */
   loading: PropTypes.bool,
 
-  /**
-   * 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/button/index.js

@@ -484,19 +484,19 @@ Button.propTypes = {
   /** status loading of button */
   loading: PropTypes.bool,
 
-  /**
-   * 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/chart/Pie/Sector.js

@@ -111,8 +111,8 @@ Sector.propTypes = {
   onTouchEnd: PropTypes.func,
   onTouchStart: PropTypes.func,
 
-  /** function displays selected items by custom, example:<br/>
-   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** function displays selected items by custom, example:<br/>
+   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.func,
   path: PropTypes.string.isRequired,

package/components/chart/Pie-v2/Sector.js

@@ -97,8 +97,8 @@ Sector.propTypes = {
   onTouchEnd: PropTypes.func,
   onTouchStart: PropTypes.func,
 
-  /** function displays selected items by custom, example:<br/>
-   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** function displays selected items by custom, example:<br/>
+   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.func,
   path: PropTypes.string.isRequired,

package/components/chip/attach.js

@@ -156,11 +156,11 @@ const AttachChip = /*#__PURE__*/memo(({
   }))), attachView);
 });
 AttachChip.propTypes = {
-  /** the file info, such as:<br/>
-   * {<br/>
-   *  URL: https://url.com/pathname,<br/>
-   *  FileName: file.name,<br/>
-   * }
+  /** the file info, such as:<br/>
+   * {<br/>
+   *  URL: https://url.com/pathname,<br/>
+   *  FileName: file.name,<br/>
+   * }
    */
   file: PropTypes.shape({
     URL: PropTypes.string.isRequired,