diginet-core-ui 1.3.37 → 1.3.39

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

@@ -7,11 +7,30 @@ import { forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
 import theme from '../../../theme/settings';
 import generateRandom from '../../../utils/randomString';
 import Typography from '../../typography';
+import { alignCenter, cursorNotAllowed, cursorPointer, displayBlock, flexRow, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../../styles/general';
+const {
+  colors: {
+    system: {
+      rest: clRest,
+      active: clActive
+    },
+    text: {
+      main: clTextMain
+    },
+    fill: {
+      focus: clFillFocus
+    },
+    primary: clPrimary,
+    hover: clHover,
+    disabled: clDisabled,
+    white: clWhite
+  },
+  spacing
+} = theme;
 const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   disabled,
   name,
-  size,
   height,
   width,
   label,
@@ -20,6 +39,8 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onChange,
   inputRef,
   inputProps,
+  lineClamp,
+  hoverTooltip,
   ...props
 }, ref) => {
   if (!inputRef) {
@@ -27,115 +48,88 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }
 
   const [checkedState, setCheckedState] = useState(Boolean(checked !== undefined ? checked : defaultChecked));
-
-  if (size === 'small') {
-    height = 10;
-    width = 20;
-  } else {
-    width = 38;
-    height = 19;
-  }
-
   const formCheck = css`
-                position: relative;
-                cursor: pointer;
-                user-select: none;
-                padding-left: 3px;
+                ${positionRelative};
+                ${cursorPointer};
+                ${userSelectNone};
+                min-height: ${height}px;
                 &.disabled {
-                    pointer-events: none;
+                    ${pointerEventsNone};
                 }
             `;
   const toggle = css`
-                display: flex;
-                align-items: center;
-                cursor: pointer;
-                position: relative;
-                box-sizing: border-box;
+                ${flexRow};
+                ${alignCenter};
+                ${cursorPointer};
+                ${positionRelative};
                 margin: 0;
             `;
   const slider = css`
-                position: relative;
-                cursor: pointer;
-                display: block;
+                ${positionRelative};
+                ${cursorPointer};
+                ${displayBlock};
                 height: ${height}px;
                 width: ${width}px;
+                min-width: ${width}px;
                 border-radius: ${height}px;
-                background: white;
-                border: 1px solid ${theme.colors.border};
-                margin: 0px auto;
+                background: ${clWhite};
+                outline: 1px solid ${clRest};
                 &::after {
+                    ${positionAbsolute};
+                    background: ${clRest};
+                    width: ${height - spacing(1)}px;
+                    height: ${height - spacing(1)}px;
                     content: '';
-                    box-sizing: border-box;
-                    position: absolute;
+                    top: 2px;
+                    left: 2px;
                     border-radius: 100%;
-                    left: 3%;
-                    z-index: 2;
-                    background: ${theme.colors.border};
                     transition: 0.3s ease-in-out;
-                    top: 49%;
-                    transform: translateY(-49%);
                     margin: 0px auto;
-                    width: ${width / 12 * 5}px;
-                    height: ${width / 12 * 5}px;
                 }
                 &:hover {
-                    box-shadow: 0 0 2px 2px ${theme.colors.focus};
-                    background-color: ${theme.colors.focus};
-                    border: 1px solid ${theme.colors.primary};
+                    box-shadow: 0 0 0 2px ${clHover};
+                    background-color: ${clHover};
+                    outline-color: ${clPrimary};
+                }
+                &:hover:after {
+                    background-color: ${clActive};
+                }
+                &:active,
+                &:focus {
+                    box-shadow: 0 0 0 2px ${clFillFocus};
+                    background-color: ${clFillFocus};
                 }
             `;
   const checkbox = css`
-                box-sizing: border-box;
                 left: 0;
-                top: 50%;
-                z-index: 2;
                 &:checked + label > span.css-${slider.name} {
-                    border: none;
-                    background: ${theme.colors.primary};
-                    border: 1px solid transparent;
-                    transition: 0.3s ease-in-out;
-                    box-shadow: 0 0 2px 2px ${theme.colors.focus};
+                    background: ${clPrimary};
+                    outline-color: ${clPrimary};
                     &::after {
-                        transform: translate(${height}px, -50%);
-                        background: white;
-                    }
-                }
-                &:hover:checked + label > span.css-${slider.name} {
-                    border: none;
-                    background: ${theme.colors.primary};
-                    border: 1px solid transparent;
-                    &::after {
-                        background: ${theme.colors.hover};
+                        background: ${clWhite};
+                        left: ${width - height}px;
                     }
                 }
                 &:disabled:checked + label > span.css-${slider.name} {
-                    user-select: none;
-                    pointer-events: none;
-                    cursor: not-allowed;
-                    border: none;
-                    background: ${theme.colors.disabled};
-                    border: 1px solid transparent;
-                    box-shadow: initial;
-                    &::after {
-                        background: ${theme.colors.dark12};
-                    }
+                    ${userSelectNone};
+                    ${pointerEventsNone};
+                    ${cursorNotAllowed};
+                    background: ${clDisabled};
+                    outline-color: ${clDisabled};
                 }
                 &:hover:not(:checked) + label > span.css-${slider.name} {
-                    background: ${theme.colors.hover};
-                    border: 1px solid ${theme.colors.primary};
+                    background: ${clHover};
+                    outline: 1px solid ${clPrimary};
                     transition: 0.3s ease-in-out;
                     ::after {
-                        background: ${theme.colors.primary};
+                        background: ${clPrimary};
                     }
                 }
                 &:disabled:not(:checked) + label > span.css-${slider.name} {
-                    background: ${theme.colors.dark12};
-                    cursor: not-allowed;
-                    user-select: none;
-                    border: 1px solid ${theme.colors.disabled};
-                    pointer-events: none;
+                    ${pointerEventsNone};
+                    outline-color: ${clDisabled};
                     ::after {
-                        background: ${theme.colors.disabled};
+                        background: ${clDisabled};
                     }
                 }
             `;
@@ -180,6 +174,7 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, jsx("input", { ...inputProps,
     ref: inputRef,
     hidden: true,
+    name: name,
     type: "checkbox",
     css: checkbox,
     checked: checkedState,
@@ -190,10 +185,14 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, jsx("span", {
     css: slider
   }), label !== undefined && jsx(Typography, {
+    type: 'p1',
     style: {
-      marginLeft: '8px',
-      marginBottom: 0
+      color: disabled ? clDisabled : clTextMain,
+      marginBottom: 0,
+      marginLeft: spacing(2.5)
     },
+    hoverTooltip: hoverTooltip,
+    lineClamp: lineClamp || null,
     mapping: 'label'
   }, label))), [disabled, onChange, checkedState]);
 }));
@@ -203,7 +202,9 @@ Toggle.defaultProps = {
   label: '',
   value: '',
   id: '',
-  size: ''
+  width: 40,
+  height: 20,
+  lineClamp: null
 };
 Toggle.propTypes = {
   /** * If `true`, the component is disabled. */
@@ -215,33 +216,34 @@ Toggle.propTypes = {
   /** If `true`, the component is checked. */
   checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([0, 1])]),
 
-  /** the size options default and small */
-  size: PropTypes.string,
-
   /** Id is randomized randomly to avoid duplication. */
   id: PropTypes.string,
 
-  /**
-   * Name attribute of the `input` element.
-   */
+  /** Name attribute of the `input` element. */
   name: PropTypes.string,
 
   /** The name of the Radio is displayed on the interface */
   label: PropTypes.string,
 
-  /** height is a number, height of Toggle default 19 */
+  /** height is a number, height of Toggle default 20 */
   height: PropTypes.number,
 
-  /** width is a number, width of Toggle default 38 */
+  /** width is a number, width of Toggle default 40 */
   width: PropTypes.number,
 
   /** props for input */
   inputProps: PropTypes.object,
 
-  /** * Callback fired when the state is changed.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+  /** The line-clamp property truncates text at a specific number of Label. */
+  lineClamp: PropTypes.number,
+
+  /** Shows tooltip containing Label on hover */
+  hoverTooltip: PropTypes.bool,
+
+  /** * Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
   onChange: PropTypes.func
 };

package/components/index.js

@@ -52,7 +52,7 @@ export { default as Label } from './form-control/label';
 export { default as HelperText } from './form-control/helper-text';
 export { default as TextInput } from './form-control/text-input';
 export { default as MoneyInput } from './form-control/money-input';
-export { default as NumberInput } from './form-control/number-input';
+export { default as NumberInput } from './form-control/number-input/index2';
 export { default as Toggle } from './form-control/toggle'; // List
 
 export { default as List } from './list/list';

package/components/paging/page-selector.js

@@ -6,6 +6,10 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import theme from '../../theme/settings';
 import { typography } from '../../styles/typography';
+import { useTheme } from '../../theme';
+const {
+  zIndex
+} = useTheme();
 const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   size,
   style,
@@ -23,57 +27,57 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [currentPage, setCurrentPage] = useState(currentPageProps);
   const [paging, setPaging] = useState([1]);
   const PageItemNum = css`
-        color: #FFF;
-        ${typography.heading3};
-        z-index: 1502;
-    `;
+                color: #fff;
+                ${typography.heading3};
+                z-index: ${zIndex(2)};
+            `;
   const morePaging = css`
-        position: absolute;
-        display: inline-flex;
-        opacity: 0;
-        transform: scaleX(0);
-        transition: all 0.5s;
-        z-index: 1503;
-        max-width: 176px;
-        overflow: scroll hidden;
-        padding-bottom: 2px;
-        outline: none;
-        &.visible {
-            opacity: 1;
-            transform: scaleX(1);
-        }
-        &::-webkit-scrollbar {
-            height: 4px;
-        }
-        &::-webkit-scrollbar-thumb {
-            border-radius: 10px;
-            background-color: #c1c1c1;
-        }
-    `;
+                position: absolute;
+                display: inline-flex;
+                opacity: 0;
+                transform: scaleX(0);
+                transition: all 0.5s;
+                z-index: ${zIndex(3)};
+                max-width: 176px;
+                overflow: scroll hidden;
+                padding-bottom: 2px;
+                outline: none;
+                &.visible {
+                    opacity: 1;
+                    transform: scaleX(1);
+                }
+                &::-webkit-scrollbar {
+                    height: 4px;
+                }
+                &::-webkit-scrollbar-thumb {
+                    border-radius: 10px;
+                    background-color: #c1c1c1;
+                }
+            `;
   const PageItem = css`
-        width: ${size === 'small' ? 20 : 24}px;
-        height: ${size === 'small' ? 20 : 24}px;
-        font-size: ${size === 'small' ? 12 : 14}px;
-        background-color: ${theme.colors.border};
-        border-radius: 50%;
-        text-align: center;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin: 0px 4px;
-        user-select: none;
-        cursor: pointer;
-        position: relative;
-        &:hover {
-            background-color: ${theme.colors.hover};
-            &:not(.active) .css-${PageItemNum.name} {
-                color: ${theme.colors.primary};
-            }
-        }
-        &.active {
-            background-color: ${theme.colors.brand};
-        }
-    `;
+                width: ${size === 'small' ? 20 : 24}px;
+                height: ${size === 'small' ? 20 : 24}px;
+                font-size: ${size === 'small' ? 12 : 14}px;
+                background-color: ${theme.colors.border};
+                border-radius: 50%;
+                text-align: center;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin: 0px 4px;
+                user-select: none;
+                cursor: pointer;
+                position: relative;
+                &:hover {
+                    background-color: ${theme.colors.hover};
+                    &:not(.active) .css-${PageItemNum.name} {
+                        color: ${theme.colors.primary};
+                    }
+                }
+                &.active {
+                    background-color: ${theme.colors.brand};
+                }
+            `;
 
   const setPagination = (newCurrentPage = 1) => {
     const newLastPage = Math.ceil(totalItems / itemsPerPage);

package/components/popover/index.js

@@ -437,32 +437,32 @@ Popover.propTypes = {
   /** An HTML element, or a function that returns one. It's used to set the position of the popover. */
   anchor: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.func, PropTypes.object]),
 
-  /**
-   * This is the point on the anchor where the popover's anchor will attach to.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+  /**
+   * This is the point on the anchor where the popover's anchor will attach to.
+   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
    */
   anchorOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
     vertical: PropTypes.oneOf(['bottom', 'center', 'top'])
   }),
 
-  /**
-   * This is the point on the popover which will attach to the anchor's origin.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+  /**
+   * This is the point on the popover which will attach to the anchor's origin.
+   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
    */
   transformOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
     vertical: PropTypes.oneOf(['bottom', 'center', 'top'])
   }),
 
-  /**
-   * Direction when Popover shown.
-   * Note: This prop will overwrite anchorOrigin & transformOrigin.
-   *
-   * * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
-   * * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
-   * * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
-   * * right: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
+  /**
+   * Direction when Popover shown.
+   * Note: This prop will overwrite anchorOrigin & transformOrigin.
+   *
+   * * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
+   * * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
+   * * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
+   * * right: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
    */
   direction: PropTypes.oneOf(['top', 'left', 'right', 'bottom']),
 
@@ -481,13 +481,13 @@ Popover.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
 
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * show: Show popover
-   * * close: Close popover
-   * * setPosition(element): Set position of popover
-   *  * @param {element} - element
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * show: Show popover
+   * * close: Close popover
+   * * setPosition(element): Set position of popover
+   *  * @param {element} - element
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/popup/index.js

@@ -10,6 +10,10 @@ import { Info, ApprovalFilled, Warning, Failed } from '../../icons';
 import theme from '../../theme/settings';
 import { getGlobal } from '../../global';
 import { typography } from '../../styles/typography';
+import { useTheme } from '../../theme';
+const {
+  zIndex
+} = useTheme();
 export const icons = {
   info: jsx(Info, {
     viewBox: true
@@ -72,7 +76,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 pointer-events: ${!fullScreen ? 'none' : 'auto'};
                 opacity: 0;
                 transition: opacity 0.3s ease;
-                z-index: 9001;
+                z-index: ${zIndex(1)};
             `;
   const fadeInDown = keyframes`
         from {

package/components/popup/proposals_popup.js

@@ -8,6 +8,10 @@ import theme from '../../theme/settings';
 import { Button, ButtonIcon } from '../';
 import { Close, Approval } from '../../icons';
 import TextInput from '../form-control/text-input';
+import { useTheme } from '../../theme';
+const {
+  zIndex
+} = useTheme();
 const ProposalsPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   open,
   clearAble,
@@ -42,7 +46,7 @@ const ProposalsPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 position: fixed;
                 width: 80%;
                 max-width: 480px;
-                z-index: 1000;
+                z-index: ${zIndex()};
                 transform: scale(0);
                 transition: transform 0.2s linear;
                 &.open {

package/components/popup/v2/index.js

@@ -13,6 +13,10 @@ import { capitalize, renderIcon } from '../../../utils';
 import { animations } from '../../../styles/animation';
 import { color as colors } from '../../../styles/colors';
 import { alignCenter, border, borderBox, borderRadius4px, cursorPointer, displayBlock, ellipsis, flexCol, flexRow, justifyCenter, justifyEnd, overflowHidden, positionFixed, positionRelative } from '../../../styles/general';
+import { useTheme } from '../../../theme';
+const {
+  zIndex
+} = useTheme();
 const {
   system: {
     white
@@ -102,7 +106,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 background-color: rgba(21, 26, 48, 0.5);
                 opacity: 0;
                 transition: opacity 0.3s ease;
-                z-index: 9002;
+                z-index: ${zIndex(2)};
                 word-break: break-word;
                 .DGN-UI-Popup {
                     ${flexCol}
@@ -461,13 +465,13 @@ Popup.propTypes = {
   /** the function will run when click on cancel button */
   onCancel: func,
 
-  /**
-   * named ref: get ref of Popup component, insist:<br />
-   * * element<br />
-   * * show: the method to show Popup (ref.current.show(options, callback))<br />
-   * &nbsp;&nbsp; + options: {type, title, icon, yesNo, description, confirmProps, cancelProps, onCancel, onConfirm}<br />
-   * &nbsp;&nbsp; + callback: the function will run after click on button (callback(true) with confirm Button and callback(false) with cancel Button). Alternate both onCancel, onConfirm methods of options<br />
-   * * close: the method to close Popup<br />
+  /**
+   * named ref: get ref of Popup component, insist:<br />
+   * * element<br />
+   * * show: the method to show Popup (ref.current.show(options, callback))<br />
+   * &nbsp;&nbsp; + options: {type, title, icon, yesNo, description, confirmProps, cancelProps, onCancel, onConfirm}<br />
+   * &nbsp;&nbsp; + callback: the function will run after click on button (callback(true) with confirm Button and callback(false) with cancel Button). Alternate both onCancel, onConfirm methods of options<br />
+   * * close: the method to close Popup<br />
    */
   reference: oneOfType([func, shape({
     current: instanceOf(elementType)

package/components/progress/circular.js

@@ -63,8 +63,8 @@ const getDimension = size => {
     strokeWidth
   };
 };
-/**
- * Determinate circular progress
+/**
+ * Determinate circular progress
  */
 
 
@@ -113,8 +113,8 @@ const Determinate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     return angle;
   };
-  /**
-   * style
+  /**
+   * style
    */
 
 
@@ -216,8 +216,8 @@ Determinate.propTypes = {
   width: PropTypes.number
 };
 export const DeterminateCircularProgress = Determinate;
-/**
- * Indeterminate circular progress
+/**
+ * Indeterminate circular progress
  */
 
 const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -254,8 +254,8 @@ const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             stroke-dashoffset: -${r * 124 / 200};
         }
     `;
-  /**
-   * style
+  /**
+   * style
    */
 
 
@@ -286,8 +286,8 @@ const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             stroke-linecap: round;
             stroke-width: ${circleStrokeW};
         `;
-  /**
-   * component
+  /**
+   * component
    */
 
   const CircleBackgroundMemo = useMemo(() => jsx("circle", {
@@ -330,8 +330,8 @@ Indeterminate.propTypes = {
   width: PropTypes.number
 };
 export const IndeterminateCircularProgress = Indeterminate;
-/**
- * Circular progress
+/**
+ * Circular progress
  */
 
 const CircularProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({

package/components/rating/index.js

@@ -264,9 +264,9 @@ Rating.propTypes = {
   /** style inline of stars icon */
   starStyle: PropTypes.object,
 
-  /**
-   * the function for rating handler, return e:{value, ...element}<br />
-   * value: the quantity of star was selected (insist half)
+  /**
+   * the function for rating handler, return e:{value, ...element}<br />
+   * value: the quantity of star was selected (insist half)
    */
   onRating: PropTypes.func
 };

package/components/tab/tab-container.js

@@ -93,8 +93,8 @@ TabContainer.propTypes = {
   /** any props else */
   props: PropTypes.any,
 
-  /**
-   * ref methods
+  /**
+   * ref methods
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/tab/tab-header.js

@@ -157,8 +157,8 @@ TabHeader.propTypes = {
   /** any props else */
   props: PropTypes.any,
 
-  /**
-   * ref methods
+  /**
+   * ref methods
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)