diginet-core-ui 1.3.90 → 1.3.91

package/components/image/index.js

@@ -1,13 +1,12 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css, keyframes } from '@emotion/core';
-import OptionWrapper from "../others/option-wrapper";
-import { useIntersection } from "../../utils/intersectionObserver";
-import { classNames } from "../../utils";
+import { css, jsx, keyframes } from '@emotion/core';
 import AvatarDefault from "../../assets/avatar/default.svg";
-import { itemsCenter, displayInlineFlex, overflowHidden, parseWidthHeight, positionRelative } from "../../styles/general";
+import OptionWrapper from "../others/option-wrapper";
+import PropTypes from 'prop-types';
+import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { borderRadius, displayInlineFlex, itemsCenter, objectCover, overflowHidden, parseWidthHeight, positionRelative } from "../../styles/general";
+import { classNames, useIntersection } from "../../utils";
 const blurKeyframe = keyframes`
     0% { -webkit-filter: blur(4px);}
     25% { -webkit-filter: blur(3px);}
@@ -29,6 +28,7 @@ const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   style,
   width
 }, reference) => {
+  if (!reference) reference = useRef(null);
   if (!defaultSrc) defaultSrc = AvatarDefault;
   const ref = useRef(null);
   const [srcState, setSrcState] = useState(src);
@@ -53,6 +53,9 @@ const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         };
       }
     }
+    return () => {
+      setSrcState(defaultSrc);
+    };
   }, [src]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -66,21 +69,16 @@ const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   const renderImage = () => {
     const defaultImage = jsx("img", {
+      css: objectCover,
       src: defaultSrc,
       alt: '',
-      style: {
-        objectFit: 'cover'
-      },
       width: width,
       height: height
     });
     const image = jsx(Fragment, null, !onLoaded && defaultImage, jsx("img", {
-      css: blurAnimationCSS,
+      css: [blurAnimationCSS, objectCover],
       src: srcState,
       alt: alt || srcState,
-      style: {
-        objectFit: 'cover'
-      },
       onLoad: () => setOnLoaded(true),
       width: width,
       height: height
@@ -105,7 +103,7 @@ const ImageCSS = (width, height, circular) => css`
     ${itemsCenter};
     ${overflowHidden};
     ${parseWidthHeight(width, height)};
-    ${circular && `border-radius: 50%`};
+    ${circular && borderRadius('50%')};
 `;
 const blurAnimationCSS = css`
     animation: ${blurKeyframe} 1s ease;

package/components/index.js

@@ -29,6 +29,7 @@ export { default as Badge } from "./badge";
 // BUTTON
 export { default as Button } from "./button";
 export { default as ButtonIcon } from "./button/icon";
+export { default as ButtonMore } from "./button/more";
 
 // BREADCRUMB
 export { default as Breadcrumb } from "./breadcrumb";
@@ -120,7 +121,6 @@ export { default as PopoverFooter } from "./popover/footer";
 export { default as Popup } from "./popup/v2";
 export { default as PopupV2 } from "./popup/v2";
 export { default as DangerPopup } from "./popup/danger_popup";
-export { default as ProposalsPopup } from "./popup/proposals_popup";
 
 // SLIDER
 export { default as Slider } from "./slider/slider-container";

package/components/others/option-wrapper/index.js

@@ -2,6 +2,7 @@
 /** @jsx jsx */
 import { useState, forwardRef, useEffect } from 'react';
 import { jsx } from '@emotion/core';
+import sx from "../../../styles/sx";
 const OptionWrapper = WrappedComponent => {
   return /*#__PURE__*/forwardRef((props, ref) => {
     const [options, setOptions] = useState({});
@@ -28,7 +29,8 @@ const OptionWrapper = WrappedComponent => {
       action: {
         option
       },
-      ref: ref
+      ref: ref,
+      css: sx(props === null || props === void 0 ? void 0 : props.sx)
     });
   });
 };

package/components/popup/v2/index.js

@@ -8,7 +8,7 @@ import { forwardRef, Fragment, memo, useCallback, useEffect, useImperativeHandle
 import { createPortal } from 'react-dom';
 import { animations } from "../../../styles/animation";
 import { hexToRGBA } from "../../../styles/color-helper";
-import { itemsCenter, border, boxBorder, borderRadius4px, borderRadius50, breakWord, cursorPointer, displayBlock, truncate, flexCol, flexRow, justifyCenter, justifyEnd, overflowAuto, overflowHidden, parseHeight, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, positionFixed, positionRelative } from "../../../styles/general";
+import { bgColor, border, borderRadius, borderRadius50, boxBorder, breakWord, cursorPointer, displayBlock, displayFlex, flexCol, flexRow, inset, itemsCenter, justifyCenter, justifyEnd, mg, mgb, mgr, mgt, overflowAuto, overflowHidden, parseHeight, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, pd, positionFixed, positionRelative, textColor, textEllipsis, textUnderline, truncate, z } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { classNames, refType as ref, useDelayUnmount } from "../../../utils";
 const {
@@ -26,9 +26,7 @@ const {
       'scrollbar-tabbar': fillScrollbarTabbar,
       hover: fillHover
     }
-  },
-  spacing,
-  zIndex: zIndexCORE
+  }
 } = useTheme();
 const colorMap = new Map([['yesno', semanticInfo], ['success', semanticSuccess], ['warning', semanticWarning], ['danger', semanticDanger], ['info', semanticInfo]]);
 const titleMap = new Map([['yesno', 'notify'], ['success', 'confirm'], ['warning', 'warning'], ['danger', 'error'], ['info', 'notify']]);
@@ -57,6 +55,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   yesText,
   ...props
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const statusAction = useRef('');
   const [openState, setOpenState] = useState(open);
@@ -86,14 +85,14 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       };
       const popup = jsx(Fragment, null, PopupHeaderView(newProps.title, newProps.type), jsx("div", {
         className: 'DGN-UI-Popup-Body'
-      }, newProps.icon !== false && jsx("div", {
+      }, newProps.icon !== false ? jsx("div", {
         className: 'DGN-UI-Popup-Body-Icon'
       }, jsx(Icon, {
         name: newProps.icon === true ? iconMap.get(newProps.type) : newProps.icon,
         width: 40,
         height: 40,
         color: colorMap.get(newProps.type)
-      })), jsx("div", {
+      })) : null, jsx("div", {
         className: 'DGN-UI-Popup-Body-Description'
       }, jsx(Typography, {
         type: 'p2'
@@ -174,28 +173,28 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const PopupBodyView = (icon, type, subtitle, description) => {
     return jsx("div", {
       className: 'DGN-UI-Popup-Body'
-    }, icon !== false && jsx("div", {
+    }, icon !== false ? jsx("div", {
       className: 'DGN-UI-Popup-Body-Icon'
     }, jsx(Icon, {
       name: icon === true ? iconMap.get(type) : icon,
       width: 40,
       height: 40,
       color: colorMap.get(type)
-    })), jsx("div", {
+    })) : null, jsx("div", {
       className: 'DGN-UI-Popup-Body-Description'
     }, jsx(Typography, {
       type: 'p2'
-    }, subtitle && jsx(Typography, {
+    }, subtitle ? jsx(Typography, {
       className: 'DGN-UI-Popup-Body-Subtitle',
       fullWidth: true
-    }, subtitle), jsx(Typography, {
+    }, subtitle) : null, jsx(Typography, {
       ref: onRefChange,
       type: 'p2',
       className: 'DGN-UI-Popup-Body-Detail'
-    }, description), (subtitle && descriptionLines > 1 || descriptionLines > 3) && jsx("span", {
+    }, description), subtitle && descriptionLines > 1 || descriptionLines > 3 ? jsx("span", {
       className: 'DGN-More-Action',
       onClick: () => setShowMoreDescription(!showMoreDescription)
-    }, getGlobal(showMoreDescription ? 'showLess' : 'showMore')))));
+    }, getGlobal(showMoreDescription ? 'showLess' : 'showMore')) : null)));
   };
   const PopupActionView = (onConfirm, confirmProps, onCancel, cancelProps, type, yesText, noText) => {
     return onConfirm || onCancel || type === 'yesno' ? jsx("div", {
@@ -226,29 +225,29 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     style: style,
     className: classNames('DGN-UI-Portal DGN-UI-Popup-Portal', className)
   }, jsx("div", {
-    className: `DGN-UI-Popup ${openState ? 'DGN-Show' : 'DGN-Hide'}`,
+    className: classNames('DGN-UI-Popup', openState ? 'DGN-Show' : 'DGN-Hide'),
     ...props
   }, custom ? custom : jsx(Fragment, null, PopupHeaderView(title, type), PopupBodyView(icon, type, subtitle, description), PopupActionView(onConfirm, confirmProps, onCancel, cancelProps, type, yesText, noText)))), document.body);
 }));
 const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescription, descriptionLines) => css`
+    ${displayFlex};
     ${flexRow};
     ${positionFixed};
     ${justifyCenter};
     ${breakWord};
     ${parseWidthHeight('100%')};
-    top: 0;
-    left: 0;
-    inset: 0;
-    background-color: rgba(21, 26, 48, 0.5);
-    z-index: ${zIndexCORE(2)};
+    ${inset(0)};
+    ${bgColor('rgba(21, 26, 48, 0.5)')}
+    ${z(2)};
     .DGN-UI-Popup {
+        ${displayFlex};
         ${flexCol};
-        ${borderRadius4px};
         ${boxBorder};
+        ${borderRadius(4)};
         ${parseWidthHeight(width, 'fit-content')};
         ${parseMaxWidthHeight('80%')};
+        ${bgColor(systemWhite)};
         margin: ${isNaN(top) ? top : top + 'px'} auto auto;
-        background-color: ${systemWhite};
         box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
         &.DGN-Show {
             animation: ${fadeInDown} 0.2s ease;
@@ -258,40 +257,43 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
             animation-fill-mode: forwards;
         }
         .DGN-UI-Popup-Header {
+            ${displayFlex};
             ${flexRow};
             ${itemsCenter};
             ${parseMinHeight(40)};
-            padding: ${spacing([0, 2, 0, 4])};
-            border-radius: 4px 4px 0px 0px;
+            ${pd([0, 2, 0, 4])};
+            ${borderRadius('4px 4px 0px 0px')};
             .DGN-UI-Popup-Header-Title {
+                ${displayFlex};
                 ${flexRow};
                 ${truncate};
                 ${parseWidth('calc(100% - 24px)')};
             }
             color: ${colorMap.get(type)};
-            background-color: ${hexToRGBA(colorMap.get(type), 0.15)};
+            ${bgColor(hexToRGBA(colorMap.get(type), 0.15))};
         }
         .DGN-UI-Popup-Body {
+            ${displayFlex};
             ${flexRow};
             ${positionRelative};
             ${overflowAuto};
+            ${pd([4])};
             flex: 1 1 auto;
-            padding: ${spacing([4])};
             &::-webkit-scrollbar {
-                ${borderRadius4px};
+                ${borderRadius(4)};
                 ${parseWidth(24)};
                 background-color: ${systemWhite} !important;
             }
             &::-webkit-scrollbar-thumb {
                 ${border(8, 'transparent')};
-                border-radius: 24px;
+                ${borderRadius(24)};
                 mix-blend-mode: normal;
                 background-color: ${fillScrollbarTabbar} !important;
                 background-clip: content-box;
             }
             &::-webkit-scrollbar-thumb:hover {
                 ${border(8, 'transparent')};
-                border-radius: 24px;
+                ${borderRadius(24)};
                 mix-blend-mode: normal;
                 background-color: ${fillHover} !important;
                 background-clip: content-box;
@@ -300,20 +302,21 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
                 ${displayBlock};
                 ${borderRadius50};
                 ${parseWidth(40)};
-                margin-right: ${spacing([4])};
+                ${mgr([4])};
             }
             .DGN-UI-Popup-Body-Description {
+                ${displayFlex};
                 ${flexRow};
                 ${positionRelative};
                 ${itemsCenter};
                 ${parseMinHeight(40)};
                 ${parseHeight('max-content')};
                 .DGN-UI-Popup-Body-Subtitle {
-                    margin-bottom: ${(description === null || description === void 0 ? void 0 : description.length) > 0 ? spacing([2]) : spacing([0])};
+                    ${mgb([(description === null || description === void 0 ? void 0 : description.length) > 0 ? 2 : 0])};
                 }
                 .DGN-UI-Popup-Body-Detail {
                     ${overflowHidden};
-                    text-overflow: ellipsis;
+                    ${textEllipsis};
                     display: -webkit-box;
                     -webkit-line-clamp: ${showMoreDescription ? 'none' : subtitle && descriptionLines > 1 ? 1 : descriptionLines > 3 ? 3 : 'none'};
                     -webkit-box-orient: vertical;
@@ -321,23 +324,24 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
                 .DGN-More-Action {
                     ${displayBlock};
                     ${cursorPointer};
-                    width: fit-content;
-                    margin-top: ${spacing([4])};
-                    margin-bottom: ${type === 'yesno' ? spacing([0]) : spacing([2])};
-                    text-decoration: underline;
-                    color: ${semanticInfo};
+                    ${parseWidth('fit-content')};
+                    ${mgt([4])};
+                    ${mgb([type === 'yesno' ? 0 : 2])};
+                    ${textUnderline};
+                    ${textColor('semantic.info')};
                 }
             }
         }
         .DGN-UI-Popup-Action {
+            ${displayFlex};
             ${flexRow};
             ${justifyEnd};
-            padding: ${spacing([2, 4, 4, 4])};
+            ${pd([2, 4, 4, 4])};
             .DGN-UI-Button {
                 ${parseMinWidth(80)};
-                margin: 0;
+                ${mg(0)};
                 &.filled {
-                    margin-right: ${spacing([2])};
+                    ${mgr([2])};
                 }
             }
         }
@@ -345,6 +349,7 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
 `;
 Popup.defaultProps = {
   className: '',
+  description: '',
   icon: true,
   open: false,
   pressESCToClose: false,

package/components/rating/index.js

@@ -243,14 +243,14 @@ Rating.propTypes = {
   className: PropTypes.string,
   /** Style inline of component. */
   style: PropTypes.object,
-  /**
-  * Callback fired when the value changes.
-  * 
-    function(event: React.SyntheticEvent, value: number) => void
-  *
-  * event: The event source of the callback.
-  * 
-  * value: The new value.
+  /**
+  * Callback fired when the value changes.
+  * 
+   function(event: React.SyntheticEvent, value: number) => void
+  *
+  * event: The event source of the callback.
+  * 
+  * value: The new value.
   */
   onRating: PropTypes.func
 };

package/components/tab/tab-container.js

@@ -93,8 +93,8 @@ TabContainer.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Any props else. */
   props: PropTypes.any,
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tab/tab-header.js

@@ -142,8 +142,8 @@ TabHeader.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Any props else. */
   props: PropTypes.any,
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tab/tab-panel.js

@@ -79,8 +79,8 @@ TabPanel.propTypes = {
   style: PropTypes.object,
   /** Any props else. */
   props: PropTypes.any,
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tab/tab.js

@@ -189,8 +189,8 @@ TabItem.propTypes = {
   style: PropTypes.object,
   /** Any props else. */
   props: PropTypes.any,
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/transfer/index.js

@@ -416,9 +416,9 @@ Transfer.propTypes = {
   height: oneOfType([string, number]),
   /** field name used for icon display */
   iconExpr: string,
-  /** field name used for text display<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** field name used for text display<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: oneOfType([string, array]),
   /** display header to select all choices if true */