diginet-core-ui 1.3.80 → 1.3.81

package/components/form-control/date-range-picker/index.js

@@ -1,12 +1,12 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { render } from 'react-dom';
 import { Button, ButtonIcon, Divider, HelperText, InputBase, Label, Typography } from "../..";
 import { getGlobal } from "../../../global";
 import locale from "../../../locale";
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { render } from 'react-dom';
 import { alignCenter, borderRadius4px, cursorPointer, displayBlock, displayNone, flexCol, flexRow, justifyEnd, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, parseWidthHeight, pointerEventsNone, positionFixed, textCenter, userSelectNone, whiteSpaceNoWrap } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { capitalizeSentenceCase, classNames, date as moment, isEqual, randomString, updatePosition } from "../../../utils";
@@ -76,7 +76,7 @@ const isAfter = (max, time) => {
 const parseDate = day => {
   return Date.parse(new Date(day));
 };
-const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   actionIconAt,
   clearAble,
@@ -185,7 +185,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return '';
   };
   const countDay = v => {
-    if (v && Array.isArray(v) && v.length === 2) {
+    if ((v === null || v === void 0 ? void 0 : v.length) === 2) {
       return Number(+moment(v[1]).diff(v[0]) + (startFromZero ? 0 : 1));
     }
     return Number(startFromZero ? 0 : 1);
@@ -273,7 +273,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       tableData.push(jsx("td", {
         key: `this_month-${i + 1}`,
         "data-time": Date.parse(day),
-        className: classNames(unique.table.data, 'this_month', isToday(day), isActive(day), (max && max !== undefined || min && min !== undefined) && isLimit(day, new Date(max).setHours(0, 0, 0, 0), new Date(min).setHours(0, 0, 0, 0)), isBetween(Date.parse(day))),
+        className: classNames(unique.table.data, 'this_month', isToday(day), isActive(day), (max || min) && isLimit(day, new Date(max).setHours(0, 0, 0, 0), new Date(min).setHours(0, 0, 0, 0)), isBetween(Date.parse(day))),
         onClick: onDayClick
       }, jsx(Typography, {
         className: unique.day.day,
@@ -421,7 +421,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const setPrevTime = (e, level, time, type) => {
     if (!valueFr.current || !time) return;
-    const firstDayOfMin = min && min !== null && new Date(new Date(min).setDate(1)).setHours(0, 0, 0, 0);
+    const firstDayOfMin = min && new Date(new Date(min).setDate(1)).setHours(0, 0, 0, 0);
     const firstDayOfTime = new Date(new Date(time).setDate(1)).setHours(0, 0, 0, 0);
     if (level === 'month') {
       if (firstDayOfMin) {
@@ -461,7 +461,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const setNextTime = (e, level, time, type) => {
     if (!valueTo.current || !time) return;
-    const firstDayOfMax = max && max !== null && new Date(new Date(max).setDate(1)).setHours(0, 0, 0, 0);
+    const firstDayOfMax = max && new Date(new Date(max).setDate(1)).setHours(0, 0, 0, 0);
     const firstDayOfTime = new Date(new Date(time).setDate(1)).setHours(0, 0, 0, 0);
     if (level === 'month') {
       if (firstDayOfMax) {
@@ -780,8 +780,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     };
   }, [onChange]);
   useEffect(() => {
-    if (min && min !== null) {
-      let arr = new Array();
+    if (min) {
+      let arr = [];
       const newMin = new Date(min).setHours(0, 0, 0, 0);
       if (isBefore(newMin, values.current[0])) {
         arr.push(newMin);
@@ -793,7 +793,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         update(arr);
       }
     }
-    if (max && max !== null) {
+    if (max) {
       let arr = [];
       const newMax = max && new Date(max).setHours(0, 0, 0, 0);
       if (isAfter(newMax, values.current[1])) {
@@ -822,7 +822,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     // }
 
     if (isEnable) {
-      iconRef.current.childNodes[0].style.pointerEvents = 'none';
+      // iconRef.current.childNodes[0].style.pointerEvents = 'none';
       closePicker();
     }
     return () => {
@@ -834,9 +834,9 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       // } else {
       //     iconRef.current.childNodes[0].style.pointerEvents = null;
       // }
-      if (isEnable) {
-        iconRef.current.childNodes[0].style.pointerEvents = null;
-      }
+      // if (isEnable) {
+      //     iconRef.current.childNodes[0].style.pointerEvents = null;
+      // }
       closePicker();
     };
   }, [actionIconAt, clearAble, controls, disabled, displayFormat, max, min, pressESCToClose, readOnly, startFromZero, unitCount, viewType]);
@@ -853,7 +853,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
-  const iconComp = isEnable && jsx("div", {
+  const iconComp = isEnable ? jsx("div", {
     css: IconAreaCSS,
     ref: iconRef
   }, jsx(ButtonIcon, {
@@ -868,7 +868,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: `${unique.icon} ${unique.icon}-cancel`,
     viewBox: true,
     name: 'Close'
-  }));
+  })) : null;
   const endIcon = actionIconAt === 'end' && iconComp;
   const startIcon = actionIconAt === 'start' && iconComp;
   const footerMemo = jsx("div", {
@@ -927,18 +927,18 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       height: '226px',
       margin: spacing([4.5, 0.5, 0])
     }
-  }), rightCalendarComp), tooltipComp, !!controls && footerMemo);
+  }), rightCalendarComp), tooltipComp, controls ? footerMemo : null);
   return jsx(ControlComp, {
     ...props,
     disabled: disabled,
     error: error,
     ref: ref,
     style: style
-  }, !!label && jsx(Label, {
+  }, label ? jsx(Label, {
     ...labelProps,
     disabled: disabled,
     required: required
-  }, label), jsx(InputBase, {
+  }, label) : null, jsx(InputBase, {
     inputProps: {
       placeholder: !readOnly && !disabled ? placeholder : '',
       ...inputProps
@@ -958,49 +958,49 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'non-effect allow-disabled'
     },
     endIcon: endIcon
-  }), !!error && jsx(HelperText, {
+  }), error ? jsx(HelperText, {
     ...helperTextProps,
     disabled: disabled
-  }, error));
+  }, error) : null);
 }));
 const unique = {
   backGr: 'DGN-UI-Portal',
-  close: 'DGN-UI-DateRangePickerV2-close',
-  cancel: 'DGN-UI-DateRangePickerV2-cancel',
-  confirm: 'DGN-UI-DateRangePickerV2-confirm',
-  divider: 'DGN-UI-DateRangePickerV2-Divider',
-  disabled: 'DGN-UI-DateRangePickerV2-disabled',
-  error: 'DGN-UI-DateRangePickerV2-error',
-  focus: 'DGN-UI-DateRangePickerV2-focus',
-  footer: 'DGN-UI-DateRangePickerV2-Footer',
-  picker: 'DGN-UI-DateRangePickerV2-Picker-' + randomString(6, {
+  close: 'DGN-UI-DateRangePicker-close',
+  cancel: 'DGN-UI-DateRangePicker-cancel',
+  confirm: 'DGN-UI-DateRangePicker-confirm',
+  divider: 'DGN-UI-DateRangePicker-Divider',
+  disabled: 'DGN-UI-DateRangePicker-disabled',
+  error: 'DGN-UI-DateRangePicker-error',
+  focus: 'DGN-UI-DateRangePicker-focus',
+  footer: 'DGN-UI-DateRangePicker-Footer',
+  picker: 'DGN-UI-DateRangePicker-Picker-' + randomString(6, {
     allowSymbol: false
   }),
-  wrapper: 'DGN-UI-DateRangePickerV2-Wrapper',
-  container: 'DGN-UI-DateRangePickerV2',
-  icon: 'DGN-UI-DateRangePickerV2-Icon',
-  tooltip: 'DGN-UI-DateRangePickerV2-Tooltip',
+  wrapper: 'DGN-UI-DateRangePicker-Wrapper',
+  container: 'DGN-UI-DateRangePicker',
+  icon: 'DGN-UI-DateRangePicker-Icon',
+  tooltip: 'DGN-UI-DateRangePicker-Tooltip',
   navigator: {
-    navigator: 'DGN-UI-DateRangePickerV2-Navigator',
-    around: 'DGN-UI-DateRangePickerV2-Navigator-Around',
-    center: 'DGN-UI-DateRangePickerV2-Navigator-Center'
+    navigator: 'DGN-UI-DateRangePicker-Navigator',
+    around: 'DGN-UI-DateRangePicker-Navigator-Around',
+    center: 'DGN-UI-DateRangePicker-Navigator-Center'
   },
   table: {
-    container: 'DGN-UI-DateRangePickerV2-Table-Container',
-    table: 'DGN-UI-DateRangePickerV2-Table-Table',
-    header: 'DGN-UI-DateRangePickerV2-Table-Header',
-    raw: 'DGN-UI-DateRangePickerV2-Table-Raw',
-    data: 'DGN-UI-DateRangePickerV2-Table-Data'
+    container: 'DGN-UI-DateRangePicker-Table-Container',
+    table: 'DGN-UI-DateRangePicker-Table-Table',
+    header: 'DGN-UI-DateRangePicker-Table-Header',
+    raw: 'DGN-UI-DateRangePicker-Table-Raw',
+    data: 'DGN-UI-DateRangePicker-Table-Data'
   },
   day: {
-    day: 'DGN-UI-DateRangePickerV2-Day',
-    week: 'DGN-UI-DateRangePickerV2-Week',
-    today: 'DGN-UI-DateRangePickerV2-Day-today',
-    active: 'DGN-UI-DateRangePickerV2-Day-active',
-    limit: 'DGN-UI-DateRangePickerV2-Day-limit',
-    from: 'DGN-UI-DateRangePickerV2-Day-from',
-    to: 'DGN-UI-DateRangePickerV2-Day-to',
-    between: 'DGN-UI-DateRangePickerV2-Day-between'
+    day: 'DGN-UI-DateRangePicker-Day',
+    week: 'DGN-UI-DateRangePicker-Week',
+    today: 'DGN-UI-DateRangePicker-Day-today',
+    active: 'DGN-UI-DateRangePicker-Day-active',
+    limit: 'DGN-UI-DateRangePicker-Day-limit',
+    from: 'DGN-UI-DateRangePicker-Day-from',
+    to: 'DGN-UI-DateRangePicker-Day-to',
+    between: 'DGN-UI-DateRangePicker-Day-between'
   }
 };
 const hiddenStyle = {
@@ -1078,10 +1078,10 @@ const pickerCSS = {
             z-index: ${zIndexCORE(3)};
         }
         @media only screen and (max-width: 599px) {
-            max-width: 400px;
+            ${parseMaxWidth(400)};
             .${unique.wrapper} {
                 flex-direction: column;
-                min-width: 260px;
+                ${parseMinWidth(260)};
             }
             .${unique.divider} {
                 height: 1px !important;
@@ -1096,9 +1096,9 @@ const pickerCSS = {
         ${parseWidthHeight(width, 'max-content')};
         ${parseMinWidth(window.innerWidth <= 633 ? 300 : 633)};
         ${parseMaxWidth(805)};
+        top: ${position.top}px;
         left: ${position.left}px;
         opacity: 0;
-        top: ${position.top}px;
         transform: scale(0);
         transform-origin: ${position.transformOrigin};
         transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
@@ -1114,7 +1114,7 @@ const pickerCSS = {
     transform: 'scale(0)'
   }
 };
-DateRangePickerV2.defaultProps = {
+DateRangePicker.defaultProps = {
   actionIconAt: 'end',
   clearAble: false,
   controls: false,
@@ -1131,7 +1131,7 @@ DateRangePickerV2.defaultProps = {
   unitCount: 'day',
   viewType: 'underlined'
 };
-DateRangePickerV2.propTypes = {
+DateRangePicker.propTypes = {
   /** Position of action icons. */
   actionIconAt: PropTypes.oneOf(['end', 'start']),
   /** If `true`, display the clear icon. */
@@ -1187,4 +1187,4 @@ DateRangePickerV2.propTypes = {
   /** The variant to use. */
   viewType: PropTypes.oneOf(['outlined', 'underlined'])
 };
-export default DateRangePickerV2;
+export default DateRangePicker;

package/components/index.js

@@ -114,7 +114,7 @@ export { default as PopoverBody } from "./popover/body";
 export { default as PopoverFooter } from "./popover/footer";
 
 // POPUP
-export { default as Popup } from "./popup";
+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";

package/components/popover/body.js

@@ -1,21 +1,21 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { flexCol, overflowAuto, positionRelative } from "../../styles/general";
+import { useTheme } from "../../theme";
 import { classNames } from "../../utils";
-import theme from "../../theme/settings";
 const {
   colors: {
     fill: {
-      'scrollbar-rest': scrollbarRest,
-      'scrollbar-active': scrollbarActive
+      'scrollbar-rest': fillScrollbarRest,
+      'scrollbar-active': fillScrollbarActive
     }
   },
   spacing
-} = theme;
+} = useTheme();
 const PopoverBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -54,11 +54,11 @@ const PopoverBodyCSS = css`
     &::-webkit-scrollbar-thumb {
         border-radius: 10px;
         mix-blend-mode: normal;
-        background-color: ${scrollbarRest};
+        background-color: ${fillScrollbarRest};
         background-clip: content-box;
         border: 8px solid transparent;
         :hover {
-            background-color: ${scrollbarActive};
+            background-color: ${fillScrollbarActive};
         }
     }
 `;

package/components/popover/footer.js

@@ -1,20 +1,20 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { alignCenter, borderBox, flexRow, justifyEnd, parseWidth, positionRelative } from "../../styles/general";
+import { useTheme } from "../../theme";
 import { classNames } from "../../utils";
-import theme from "../../theme/settings";
 const {
   colors: {
     system: {
-      white
+      white: systemWhite
     }
   },
   spacing
-} = theme;
+} = useTheme();
 const PopoverFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   boxShadow,
@@ -52,7 +52,7 @@ const PopoverFooterCSS = boxShadow => css`
     ${parseWidth('100%')};
     min-height: 56px;
     padding: ${spacing([4])};
-    background: ${white};
+    background: ${systemWhite};
     border-radius: 0px 0px 4px 4px;
     box-shadow: ${boxShadow ? '0px -2px 2px rgba(0, 0, 0, 0.1)' : 'none'};
     order: 3;

package/components/popover/header.js

@@ -1,22 +1,22 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { Typography } from "./..";
 import OptionWrapper from "../others/option-wrapper";
-import { Typography } from "../";
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { alignCenter, borderBox, flexRow, parseWidthHeight, positionRelative } from "../../styles/general";
+import { useTheme } from "../../theme";
 import { classNames } from "../../utils";
-import theme from "../../theme/settings";
 const {
   colors: {
     fill: {
-      headerbar
+      headerbar: fillHeaderbar
     }
   },
   spacing,
   zIndex: zIndexCORE
-} = theme;
+} = useTheme();
 const PopoverHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -58,7 +58,7 @@ const PopoverHeaderCSS = css`
     ${positionRelative};
     ${borderBox};
     ${parseWidthHeight('100%', 56)};
-    background-color: ${headerbar};
+    background-color: ${fillHeaderbar};
     padding: ${spacing([4])};
     border-radius: 4px 4px 0px 0px;
     box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);

package/components/popover/index.js

@@ -1,17 +1,17 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import React, { memo, useState, useEffect, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
-import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
-import { borderRadius4px, displayBlock, flexCol, justifyBetween, overflowAuto, parseWidthHeight, positionAbsolute, positionFixed, positionRelative } from "../../styles/general";
-import theme from "../../theme/settings";
+import PropTypes from 'prop-types';
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { borderRadius4px, displayBlock, flexCol, justifyBetween, overflowAuto, parseMaxWidthHeight, parseMinWidthHeight, parseWidthHeight, positionAbsolute, positionFixed, positionRelative } from "../../styles/general";
+import { useTheme } from "../../theme";
 import { classNames, isMobile, refType as ref } from "../../utils";
 const {
   colors: {
     system: {
-      white
+      white: systemWhite
     }
   },
   typography: {
@@ -19,7 +19,7 @@ const {
   },
   spacing,
   zIndex: zIndexCORE
-} = theme;
+} = useTheme();
 const eventMap = new Map([['click', ['click']], ['hover', ['mouseenter', 'mouseleave']], ['focus', ['focus', 'blur']]]);
 const getArrowPosition = (anchorOrigin, transformOrigin, translate) => {
   if (anchorOrigin.horizontal === 'right' && transformOrigin.horizontal === 'left') {
@@ -142,6 +142,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (isMobile.any() && trigger === 'hover') trigger = 'click';
   const ref = useRef(null);
   const arrowRef = useRef(null);
+  const overflow = useRef(null);
   const [openState, setOpenState] = useState(open);
   const [element, setElement] = useState(null);
   const _PortalPopoverCSS = PortalPopoverCSS(zIndex, fullScreen);
@@ -400,6 +401,8 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [open]);
   useEffect(() => {
     if (openState && ref.current) {
+      overflow.current = document.body.style.overflow; // store overflow of <body /> before open
+      document.body.style.overflow = 'hidden';
       // Position's anchor
       updatePositionPopover();
 
@@ -414,6 +417,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       window.addEventListener('resize', updatePositionPopover);
       if (trigger === 'hover') ref.current.addEventListener('mouseleave', handleEventTrigger, false);
       return () => {
+        document.body.style.overflow = overflow.current; // reset overflow of <body /> before open
         if (pressESCToClose) {
           document.removeEventListener('keydown', pressESCHandler);
         }
@@ -422,7 +426,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         if (trigger === 'hover' && ref.current) ref.current.removeEventListener('mouseleave', handleEventTrigger, false);
       };
     } else if (!openState) {
-      document.documentElement.style.overflow = 'auto';
+      document.documentElement.style.overflow = overflow.current;
     }
   }, [openState]);
   useEffect(() => {
@@ -503,10 +507,8 @@ const PopoverContainerCSS = (bgColor, width, height) => css`
     ${borderRadius4px};
     ${paragraph1};
     ${parseWidthHeight(width, height)};
-    min-width: ${spacing([4])};
-    min-height: ${spacing([4])};
-    max-width: calc(100% - ${spacing([8])});
-    max-height: calc(100% - ${spacing([8])});
+    ${parseMinWidthHeight(spacing([4]))};
+    ${parseMaxWidthHeight(`calc(100% - ${spacing([8])})`)};
     transition: opacity 0.3s ease;
     pointer-events: initial;
     opacity: 0;
@@ -527,10 +529,10 @@ Popover.defaultProps = {
     horizontal: 'center'
   },
   arrow: false,
-  bgColor: white,
+  bgColor: systemWhite,
   className: '',
   clickOutsideToClose: true,
-  fullScreen: false,
+  fullScreen: true,
   height: 'max-content',
   marginThreshold: spacing(4),
   pressESCToClose: true,