diginet-core-ui 1.3.78 → 1.3.79

package/components/accordion/details.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, forwardRef, useRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -29,11 +28,10 @@ const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -74,10 +72,8 @@ AccordionDetails.defaultProps = {
 AccordionDetails.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** Style inline of component. */
   style: PropTypes.object
 };

package/components/accordion/group.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useRef, forwardRef, Children, cloneElement, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -18,7 +17,6 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   style
 }, reference) => {
   const ref = useRef(null);
-
   const onCollapseOther = (e, onExpand) => {
     if (collapseOther) {
       const accordions = ref.current.querySelectorAll('.DGN-UI-Accordion');
@@ -31,15 +29,13 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       !!onExpand && onExpand(e);
     }
   };
-
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -123,13 +119,10 @@ AccordionGroup.defaultProps = {
 AccordionGroup.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** If `true`, collapse other when expand */
   collapseOther: PropTypes.bool,
-
   /** Style inline of component. */
   style: PropTypes.object
 };

package/components/accordion/index.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useEffect, useRef, forwardRef, useState, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -35,7 +34,6 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (ref.current) {
       const previous = ref.current.previousElementSibling;
-
       if (previous) {
         expandState ? previous.classList.add('previousExpanding') : previous.classList.remove('previousExpanding');
       }
@@ -44,21 +42,18 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     expanded !== undefined ? setExpandState(expanded) : setExpandState(expand);
   }, [expand, expanded]);
-
   const onClickAccordion = () => {
     !!onClick && onClick({
       target: ref.current
     });
   };
-
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -112,28 +107,20 @@ Accordion.defaultProps = {
 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,
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-
   /** If `true`, expand immediate after render (shouldn't use this). */
   expand: PropTypes.bool,
-
   /** Expand state of accordion (should use this). */
   expanded: PropTypes.bool,
-
   /** Callback fired when Accordion is collapsed. */
   onCollapse: PropTypes.func,
-
   /** Callback fired when Accordion is expanded. */
   onExpand: PropTypes.func,
-
   /** Style inline of component. */
   style: PropTypes.object
 };

package/components/accordion/summary.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useEffect, useRef, useContext, forwardRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -44,23 +43,18 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   const expandIconRef = useRef(null);
   const timer = useRef(null);
-
   const _SummaryRootCSS = SummaryRootCSS(background);
-
   const _onClick = e => {
     if (disabled) return;
     const target = e.target;
-
     if (onClickAccordion) {
       onClickAccordion();
       return;
     }
-
     if (onClick && (!expandIconRef.current || !expandIconRef.current.contains(target))) {
       onClick(e);
       return;
     }
-
     if (expandState) {
       if (expanded === undefined) setExpandState(false);
       !!onCollapse && onCollapse(ref.current);
@@ -69,25 +63,20 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       !!onExpand && onExpand(ref.current);
     }
   };
-
   const showHideDetailHandler = type => {
     if (ref.current) {
       const detailsEl = ref.current.nextElementSibling;
-
       if (type === 'show') {
         if (detailsEl) {
           const scrollHeight = detailsEl.scrollHeight;
           const duration = Math.max(Math.min(scrollHeight, 1500), 200);
           detailsEl.style.height = scrollHeight + 'px';
-
           if (!detailsEl.style.transitionDuration) {
             detailsEl.style.transitionDuration = duration + 'ms';
           }
-
           if (timer.current) {
             clearTimeout(timer.current);
           }
-
           timer.current = setTimeout(() => {
             detailsEl.style.height = 'auto';
           }, (detailsEl.firstChild.childNodes.length || 2.5) * 100);
@@ -95,11 +84,9 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       } else {
         if (detailsEl && detailsEl.style.height) {
           detailsEl.style.height = detailsEl.scrollHeight + 'px';
-
           if (timer.current) {
             clearTimeout(timer.current);
           }
-
           timer.current = setTimeout(() => {
             detailsEl.style.height = null;
           }, 10);
@@ -107,7 +94,6 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   };
-
   useEffect(() => {
     if (expandState) {
       showHideDetailHandler('show');
@@ -118,11 +104,10 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -146,7 +131,8 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }, title || ''), children), !!expandIcon && jsx("div", {
       className: 'Accordion-Icon-Root'
-    }, jsx("div", { ...expandIconProps,
+    }, jsx("div", {
+      ...expandIconProps,
       ref: expandIconRef,
       className: classNames('Accordion-Icon', !collapseIcon && 'rotate-able', expandIconProps === null || expandIconProps === void 0 ? void 0 : expandIconProps.className)
     }, typeof expandIcon === 'string' ? jsx(ButtonIcon, {
@@ -174,31 +160,22 @@ AccordionSummary.defaultProps = {
 AccordionSummary.propTypes = {
   /** Background for label summary. */
   background: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-
   /** The content of the component. */
   children: PropTypes.node,
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** Icon display for collapse icon. */
   collapseIcon: PropTypes.any,
-
   /** Icon display for expand icon. */
   expandIcon: 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,
-
   /** The title of the component. */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };

package/components/alert/index.js

@@ -1,21 +1,20 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
-import { memo, useState, useEffect, useMemo, useRef, forwardRef } from 'react';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import LinearProgress from '../progress/linear';
-import { color as colors } from '../../styles/colors';
 import ButtonIcon from '../button/icon';
 import Icon from '../../icons';
 import { hexToRGBA } from '../../styles/color-helper';
+import { animations } from '../../styles/animation';
+import { classNames, useDelayUnmount } from '../../utils';
 import { alignCenter, border, borderBox, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from '../../styles/general';
-import theme from '../../theme/settings';
+import { useTheme, useColor as colors } from '../../theme';
 const {
   colors: {
     system: {
-      rest,
-      white
+      white: systemWhite
     }
   },
   typography: {
@@ -28,89 +27,85 @@ const {
   },
   spacing,
   zIndex: zIndexCORE
-} = theme;
+} = useTheme();
 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]]);
 const iconSizeMap = new Map([['tiny', 16], ['small', 20], ['medium', 24]]);
 const linearProgressSizeMap = new Map([['tiny', 2], ['small', 3], ['medium', 4]]);
+const transitionTime = 300;
 const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  color,
-  text,
-  secondary,
-  size,
-  className,
-  progressing,
+  action = {},
   autoDisappear,
-  duration,
+  children,
+  className,
   clearAble,
+  color,
+  duration,
   onClose,
-  children
-}, ref) => {
+  progressing,
+  secondary,
+  size,
+  text,
+  type
+}, reference) => {
+  type = type || color;
+  const ref = useRef(null);
   const clearIconRef = useRef(null);
   const [percentState, setPercentState] = useState(100);
-  const mainColor = colors[color];
+  const [isClose, setIsClose] = useState(false);
+  const showAlert = useDelayUnmount(!isClose, transitionTime);
+  const mainColor = colors[type];
   const opacityColor = hexToRGBA(mainColor, 0.15);
-
-  const _AlertContainerCSS = AlertContainerCSS(size, progressing, duration);
-
+  const iconName = iconMap.get(type);
+  const iconSize = iconSizeMap.get(size);
+  const _AlertContainerCSS = AlertContainerCSS(size);
   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;
-
-    if (!el) return;
-    el.style.pointerEvent = 'none';
-    const alertNode = el === null || el === void 0 ? void 0 : (_el$parentNode = el.parentNode) === null || _el$parentNode === void 0 ? void 0 : _el$parentNode.parentNode;
-
-    if (alertNode) {
-      if (urgency) {
-        alertNode.style.transition = `opacity 1s ease`;
-        alertNode.style.opacity = 1;
-      }
-
-      setTimeout(() => {
-        alertNode.style.opacity = 0;
-      }, 0);
-      setTimeout(() => {
-        if (onClose) onClose(alertNode);
-        alertNode.remove();
-      }, !urgency && progressing ? duration * 1000 + 300 : duration * 1000);
-    }
+  const _onClose = () => {
+    setIsClose(true);
+    onClose === null || onClose === void 0 ? void 0 : onClose();
   };
-
+  useEffect(() => {
+    setTimeout(() => {
+      setPercentState(0);
+    }, 100);
+  }, []);
+  useEffect(() => {
+    if (ref.current && isClose) ref.current.style.opacity = 0;
+  }, [isClose]);
+  useEffect(() => {
+    setTimeout(() => {
+      if (autoDisappear) _onClose();
+    }, duration);
+  }, [autoDisappear]);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
+      ...action
+    }; // methods
+    _instance.__proto__ = {}; // hidden methods
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   const AlertView = useMemo(() => {
     let node = children;
-
     if (!node) {
-      const iconName = iconMap.get(color);
-
-      if (iconName) {
-        node = jsx(Icon, {
-          name: iconName,
-          width: iconSizeMap.get(size),
-          height: iconSizeMap.get(size),
-          color: 'currentColor',
-          viewBox: true
-        });
-      } else {
-        node = jsx("span", {
-          css: NotFoundIconCSS
-        });
-      }
+      node = jsx(Icon, {
+        name: iconName,
+        width: iconSize,
+        height: iconSize,
+        color: 'currentColor',
+        viewBox: true
+      });
     }
-
     return jsx("div", {
       css: _AlertInfoCSS,
-      className: ['DGN-UI-Alert', className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('DGN-UI-Alert', className)
     }, jsx("span", {
       css: AlertIconCSS,
       className: 'DGN-UI-Alert-Icon'
@@ -125,17 +120,17 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'DGN-UI-Alert-Content-Secondary'
     }, secondary)), jsx("span", {
       css: AlertClearIconCSS,
-      onClick: e => onClearAlert(e.currentTarget, true),
+      onClick: _onClose,
       ref: clearIconRef,
       className: 'DGN-UI-Alert-Clear'
     }, clearAble ? jsx(ButtonIcon, {
       circular: true,
       viewType: 'text',
       size: size,
-      color: color,
+      color: type,
       name: 'Close'
     }) : null));
-  }, [color, text, clearAble, secondary, size, children, className]);
+  }, [color, text, clearAble, secondary, size, children, className, type, onClose, mainColor, opacityColor, isClose]);
   const LinearView = useMemo(() => {
     return progressing ? jsx("span", {
       css: _linearProgressCSS,
@@ -145,41 +140,30 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       background: 'transparent',
       color: mainColor,
       percent: percentState,
-      duration: duration,
+      duration: duration / 1000,
       height: linearProgressSizeMap.get(size),
       style: {
         boxShadow: 'none'
       }
     })) : null;
-  }, [progressing, size, percentState]);
-  useEffect(() => {
-    if (progressing) {
-      setTimeout(() => {
-        setPercentState(0);
-      }, 1);
-    }
-
-    if (autoDisappear) {
-      onClearAlert(clearIconRef.current);
-    }
-  }, []);
-  return jsx("div", {
+  }, [progressing, size, duration, percentState]);
+  return showAlert ? jsx("div", {
     css: _AlertContainerCSS,
     className: 'DGN-UI-Container-Alert',
     ref: ref
-  }, AlertView, LinearView);
+  }, AlertView, LinearView) : null;
 }));
-
-const AlertContainerCSS = (size, progressing, duration) => css`
+const fadeIn = animations.fadeIn;
+const AlertContainerCSS = size => css`
     ${positionRelative};
     ${displayBlock};
     max-width: ${maxWidthMap.get(size)}px;
-    transition: opacity ${progressing ? duration / 2 + 1 : duration * 1}s ease ${progressing ? duration / 2 : 0}s;
+    transition: opacity ${transitionTime}ms ease;
     margin-bottom: 1rem;
     pointer-events: auto;
     z-index: ${zIndexCORE(1)};
+    animation: ${fadeIn} ${transitionTime}ms ease;
 `;
-
 const AlertInfoCSS = (mainColor, opacityColor) => css`
     ${flexRow};
     ${positionRelative};
@@ -189,26 +173,23 @@ const AlertInfoCSS = (mainColor, opacityColor) => css`
     ${border(1, mainColor)};
     color: ${mainColor};
     background-image: linear-gradient(${opacityColor}, ${opacityColor});
-    background-color: ${white};
+    background-color: ${systemWhite};
     width: 100%;
     min-width: 320px;
     padding: ${spacing([0, 1, 0, 4])};
     opacity: 1;
 `;
-
 const AlertIconCSS = css`
     display: inherit;
-    margin-right: 10px;
+    margin-right: ${spacing([2.5])};
     padding: ${spacing([2, 0])};
 `;
-
 const AlertTextCSS = clearAble => css`
     ${displayBlock};
-    margin-right: ${clearAble ? '10px' : 0};
+    margin-right: ${spacing([clearAble ? 2.5 : 0])};
     padding: ${spacing([2, 0])};
     align-self: center;
 `;
-
 const AlertPrimaryCSS = (secondary, size) => css`
     ${flexRow};
     ${positionRelative};
@@ -217,71 +198,51 @@ const AlertPrimaryCSS = (secondary, size) => css`
     ${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};
+    margin-top: ${spacing([size === 'medium' ? 1 : 0.5])};
+    padding: ${spacing([0, 1.25])};
 `;
 Alert.defaultProps = {
-  color: 'info',
-  size: 'medium',
+  autoDisappear: false,
   className: '',
   clearAble: true,
+  color: 'info',
+  duration: 2000,
   progressing: false,
-  autoDisappear: false,
-  duration: 5
+  size: 'medium'
 };
 Alert.propTypes = {
-  /** color is a string, it's background color of Alert */
-  color: PropTypes.oneOf(['info', 'success', 'warning', 'danger']),
-
-  /** class for Alert component */
+  /** Automatically remove the Alert component after the timer ends (milliseconds). */
+  autoDisappear: PropTypes.bool,
+  /** The element to display in alert like text props (priority). */
+  children: PropTypes.node,
+  /** Class for component. */
   className: PropTypes.string,
-
-  /** The text to show in alert */
-  text: PropTypes.string,
-
-  /** The secondary text to show in alert (under primary) */
-  secondary: PropTypes.string,
-
-  /** size is a string, size of Alert */
-  size: PropTypes.oneOf(['tiny', 'small', 'medium']),
-
-  /** Display clear icon to close alert */
+  /** If `true`, show clear icon to close alert. */
   clearAble: PropTypes.bool,
-
-  /** use to display linear progress in duration time show Alert */
-  progressing: PropTypes.bool,
-
-  /** Automatically remove the Alert component after the timer ends (duration) */
-  autoDisappear: PropTypes.bool,
-
-  /** The amount of time the alert is displayed. The unit is the second */
+  /** The amount of time the alert is displayed. The unit is the milliseconds. */
   duration: PropTypes.number,
-
-  /** The function will run after remove an Alert component */
+  /** Callback fired when the component closed. */
   onClose: PropTypes.func,
-
-  /** The element to display in alert like text props (priority) */
-  children: PropTypes.node
+  /** If `true`, show linear progress in duration time.*/
+  progressing: PropTypes.bool,
+  /** The secondary text to show in alert (under primary). */
+  secondary: PropTypes.string,
+  /** The size of the component. */
+  size: PropTypes.oneOf(['tiny', 'small', 'medium']),
+  /** The text to show in alert. */
+  text: PropTypes.string,
+  /** Type of the component. */
+  type: PropTypes.oneOf(['info', 'success', 'warning', 'danger'])
 };
 export default Alert;