diginet-core-ui 1.3.35 → 1.3.36

package/components/tooltip/index.js

@@ -1,22 +1,38 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
+import { forwardRef, memo, useEffect, useRef, useState, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useRef, useState } from 'react';
-import Portal from './portal';
+import { createPortal } from 'react-dom';
 import { randomString } from '../../utils';
 import { jsx, css } from '@emotion/core';
 import { typography } from '../../styles/typography';
-const defaultColor = 'rgba(255, 255, 255, 0.9)';
-const defaultBg = 'rgba(21, 26, 48, 0.9)';
+import { color as colors } from '../../styles/colors';
+import { borderBox, borderRadius4px, displayInlineBlock, positionAbsolute, userSelectNone } from '../../styles/general';
+const {
+  paragraph2,
+  paragraph3
+} = typography;
+const {
+  system: {
+    white
+  },
+  fill: {
+    tooltip: fillTooltip
+  }
+} = colors;
 const defaultViewPadding = 4;
 
 const getScrollTop = () => {
-  return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+  var _ref, _ref2, _window$pageYOffset;
+
+  return (_ref = (_ref2 = (_window$pageYOffset = window.pageYOffset) !== null && _window$pageYOffset !== void 0 ? _window$pageYOffset : document.documentElement.scrollTop) !== null && _ref2 !== void 0 ? _ref2 : document.body.scrollTop) !== null && _ref !== void 0 ? _ref : 0;
 };
 
 const getScrollLeft = () => {
-  return window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+  var _ref3, _ref4, _window$pageXOffset;
+
+  return (_ref3 = (_ref4 = (_window$pageXOffset = window.pageXOffset) !== null && _window$pageXOffset !== void 0 ? _window$pageXOffset : document.documentElement.scrollLeft) !== null && _ref4 !== void 0 ? _ref4 : document.body.scrollLeft) !== null && _ref3 !== void 0 ? _ref3 : 0;
 };
 
 const getArrowSpacing = (arrow, arrowSize, distance) => {
@@ -30,71 +46,44 @@ const parseAlignMode = alignMode => {
   }
 
   return 'middle';
-}; // const getScrollParent = (element) => {
-// 	const style = getComputedStyle(element);
-// 	let scrollParent = window;
-// 	if (style.position !== 'fixed') {
-// 		let parent = element.parentElement;
-// 		while (parent) {
-// 			const parentStyle = getComputedStyle(parent);
-// 			if (/(auto|scroll)/.test(parentStyle.overflow + parentStyle.overflowY + parentStyle.overflowX)) {
-// 				scrollParent = parent;
-// 				parent = undefined;
-// 			} else {
-// 				parent = parent.parentElement;
-// 			}
-// 		}
-// 	}
-// 	return scrollParent;
-// };
-
-
-const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    alignMode,
-    arrow,
-    arrowSize,
-    backgroundColor,
-    children,
-    color,
-    direction,
-    distance,
-    size,
-    forceDirection,
-    hoverDelay,
-    onToggle,
-    padding,
-    style,
-    tagCreatedName: TagCreatedName,
-    textAlign,
-    title,
-    tooltipMaxWidth,
-    viewportPadding,
-    ...other
-  } = props;
+};
+
+const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  alignMode,
+  arrow,
+  arrowSize,
+  backgroundColor,
+  children,
+  color,
+  direction,
+  distance,
+  size,
+  forceDirection,
+  hoverDelay,
+  onToggle,
+  padding,
+  style,
+  tagCreatedName: TagCreatedName,
+  textAlign,
+  title,
+  tooltipMaxWidth,
+  viewportPadding,
+  className,
+  ...props
+}, reference) => {
   const Id = randomString(length = 6, {
     allowSymbol: false
-  }),
-        IDs = {
-    arrow: 'DCUI-tooltip-arrow-' + Id,
-    container: 'DCUI-tooltip-container-' + Id,
-    main: 'DCUI-tooltip-main-' + Id
-  },
-        arrowRef = useRef(null),
-        containerRef = useRef(null),
-        tooltipRef = useRef(null),
-        containerProps = { ...other,
-    ref: ref || containerRef,
-    className: IDs.container,
-    style: {
-      boxSizing: 'border-box',
-      height: 'max-content',
-      position: 'relative',
-      width: 'max-content',
-      ...style
-    }
-  },
-        hiddenPositions = {
+  });
+  const IDs = {
+    arrow: 'DGN-UI-tooltip-arrow-' + Id,
+    container: 'DGN-UI-tooltip-container-' + Id,
+    main: 'DGN-UI-tooltip-main-' + Id
+  };
+  const [open, setOpen] = useState(false);
+  const arrowRef = useRef(null);
+  const containerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const hiddenPositions = {
     tooltip: {
       left: '-10000000px',
       opacity: 0
@@ -105,36 +94,8 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
       opacity: 0,
       top: '-10000000px'
     }
-  },
-        [existed, setExisted] = useState(false);
-  let calculateTimeout, hoverTimeout, tooltip;
-  const styles = {
-    arrow: css`
-                height: 0;
-                opacity: 0;
-                position: absolute;
-                transition: opacity 0.1s ease-in-out;
-                user-select: none;
-                width: 0;
-                z-index: 9005;
-            `,
-    main: css`
-                background-color: ${backgroundColor};
-                border-radius: 3px;
-                box-sizing: border-box;
-                color: ${color};
-                display: inline-block;
-                ${size === 'small' ? typography.paragraph3 : typography.paragraph2};
-                opacity: 0;
-                padding: ${padding};
-                position: absolute;
-                text-align: ${textAlign};
-                transition: opacity 0.1s ease-in-out;
-                user-select: none;
-                word-wrap: break-word;
-                z-index: 9004;
-            `
   };
+  let calculateTimeout, hoverTimeout;
 
   const checkHorizontal = (distance, el, parent) => {
     const {
@@ -254,11 +215,11 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
     const clientW = document.documentElement.clientWidth;
     const parentRect = parent.getBoundingClientRect();
     const arrowSpacing = getArrowSpacing(arrow, arrowSize, distance);
-    const wrapperHight = el.offsetHeight + arrowSpacing + viewportPadding;
+    const wrapperHeight = el.offsetHeight + arrowSpacing + viewportPadding;
     const spaceBelow = window.innerHeight - parentRect.bottom;
     const spaceAbove = parentRect.top;
-    const enoughBelow = spaceBelow >= wrapperHight;
-    const enoughAbove = spaceAbove >= wrapperHight;
+    const enoughBelow = spaceBelow >= wrapperHeight;
+    const enoughAbove = spaceAbove >= wrapperHeight;
 
     switch (currentDirection) {
       case 'right':
@@ -425,7 +386,7 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
 
     if (el) {
       const space = el.style.width ? 0 : 5;
-      width = Math.min(el.offsetWidth, maxWidth) + space + 'px';
+      width = Math.min(el.offsetWidth, parseInt(maxWidth)) + space + 'px';
       tooltipPosition = trueDirection === 'up' || trueDirection === 'down' ? getVertical(align, trueDirection, el, parent) : getHorizontal(align, trueDirection, el, parent);
     }
 
@@ -438,15 +399,6 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
     };
   };
 
-  const onSettingTooltip = (arrow, parent) => {
-    if (!existed) {
-      setExisted(true);
-      onShowTooltip(arrow, parent);
-    } else {
-      onShowTooltip(arrow, parent);
-    }
-  };
-
   const onShowTooltip = (arrow, parent) => {
     if (!tooltipRef.current || !arrowRef.current) return;
     const arrowEl = arrowRef.current,
@@ -483,56 +435,104 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
       Object.assign(el.style, hiddenPositions.tooltip);
       Object.assign(arrowEl.style, hiddenPositions.arrow);
     }, hoverDelay);
-  }; // const handleEvent = (arrow, parent) => {
-  //     onHideTooltip();
-  //     onShowTooltip(arrow, parent);
-  // };
-
-
-  tooltip = existed && title ? jsx(Portal, {
-    id: 'DGN-UI-Portal'
-  }, jsx("span", {
-    className: IDs.arrow,
-    css: styles.arrow,
-    ref: arrowRef,
-    style: { ...hiddenPositions.arrow
-    }
-  }), jsx("span", {
-    className: IDs.main,
-    css: styles.main,
-    ref: tooltipRef,
-    style: { ...hiddenPositions.tooltip
-    }
-  }, title)) : null;
-  useEffect(() => {
-    const parent = containerProps.ref.current; // const scrollableParent = getScrollParent(parent);
-
-    parent.addEventListener('mouseenter', () => onSettingTooltip(arrow, parent)); // parent.addEventListener('touchstart', () => onSettingTooltip(arrow, parent), { passive: true });
+  };
 
-    parent.addEventListener('mouseleave', () => onHideTooltip()); // parent.addEventListener('touchend', () => onHideTooltip(), { passive: true });
-    // window.addEventListener('resize', handleEvent(arrow, parent));
-    // scrollableParent.addEventListener('scroll', handleEvent(arrow, parent));
+  const setOpenTrue = () => {
+    setOpen(true);
+  };
 
-    return () => {
-      parent.removeEventListener('mouseenter', () => onSettingTooltip(arrow, parent)); // parent.removeEventListener('touchstart', () => onSettingTooltip(arrow, parent), { passive: true });
+  const setOpenFalse = () => {
+    setOpen(false);
+  };
 
-      parent.removeEventListener('mouseleave', () => onHideTooltip()); // parent.removeEventListener('touchend', () => onHideTooltip(), { passive: true });
-      // window.removeEventListener('resize', handleEvent(arrow, parent));
-      // scrollableParent.removeEventListener('scroll', handleEvent(arrow, parent));
+  useEffect(() => {
+    if (open) {
+      onShowTooltip(arrow, containerRef.current);
+    } else {
+      onHideTooltip();
+    }
+  }, [open]);
+  useImperativeHandle(reference, () => {
+    const currentRef = containerRef.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  const renderTooltip = useMemo(() => {
+    if (open && title) {
+      const node = jsx("div", {
+        className: 'DGN-UI-Portal DGN-Tooltip'
+      }, jsx("span", {
+        className: IDs.arrow,
+        css: arrowCSS,
+        ref: arrowRef,
+        style: { ...hiddenPositions.arrow
+        }
+      }), jsx("span", {
+        className: [IDs.main, className].join(' ').trim().replace(/\s+/g, ' '),
+        css: mainCSS(backgroundColor, color, size, padding, textAlign),
+        ref: tooltipRef,
+        style: { ...hiddenPositions.tooltip
+        }
+      }, title));
+      return /*#__PURE__*/createPortal(node, document.body);
+    }
 
-      clearTimeout(calculateTimeout);
-      clearTimeout(hoverTimeout);
-    };
-  }, []);
-  return jsx(TagCreatedName, { ...containerProps
-  }, children, tooltip);
+    return null;
+  }, [open, title, backgroundColor, color, size, padding, textAlign]);
+  return jsx(TagCreatedName, {
+    ref: containerRef,
+    className: IDs.container,
+    style: {
+      boxSizing: 'border-box',
+      height: 'max-content',
+      width: 'max-content',
+      position: 'relative',
+      ...style
+    },
+    onMouseEnter: setOpenTrue,
+    onMouseLeave: setOpenFalse,
+    onFocus: setOpenTrue,
+    onBlur: setOpenFalse,
+    ...props
+  }, children, renderTooltip);
 }));
+const arrowCSS = css`
+    ${positionAbsolute}
+    ${userSelectNone}
+    height: 0;
+    opacity: 0;
+    transition: opacity 0.1s ease-in-out;
+    width: 0;
+    z-index: 9005;
+`;
+
+const mainCSS = (backgroundColor, color, size, padding, textAlign) => css`
+    ${displayInlineBlock}
+    ${borderBox}
+    ${positionAbsolute}
+    ${userSelectNone}
+    ${borderRadius4px}
+    ${size === 'small' ? paragraph3 : paragraph2};
+    background-color: ${backgroundColor};
+    color: ${color};
+    padding: ${padding};
+    text-align: ${textAlign};
+    opacity: 0;
+    transition: opacity 0.1s ease-in-out;
+    word-wrap: break-word;
+    z-index: 9004;
+`;
+
 Tooltip.defaultProps = {
   alignMode: 'middle',
   arrow: false,
   arrowSize: 6,
-  backgroundColor: defaultBg,
-  color: defaultColor,
+  backgroundColor: fillTooltip,
+  color: white,
   direction: 'down',
   size: 'medium',
   forceDirection: false,
@@ -540,7 +540,8 @@ Tooltip.defaultProps = {
   padding: '4px 6px',
   tagCreatedName: 'div',
   textAlign: 'center',
-  viewportPadding: defaultViewPadding
+  viewportPadding: defaultViewPadding,
+  className: ''
 };
 Tooltip.propTypes = {
   /** alignMode use to set align-items of the tooltip*/
@@ -582,6 +583,9 @@ Tooltip.propTypes = {
   /** style is a object like style-inline, use to set the style for the element will be created to contain the children */
   style: PropTypes.object,
 
+  /** class of Tooltip-main */
+  className: PropTypes.string,
+
   /** tagName of the element will be created to contain the children */
   tagCreatedName: PropTypes.oneOf(['div', 'span']),
 

package/components/typography/index.js

@@ -1,8 +1,11 @@
 /** @jsxRuntime classic */
-import { memo, useRef, forwardRef, useImperativeHandle } from 'react';
+
+/** @jsx jsx */
+import { memo, useRef, forwardRef, useImperativeHandle, Fragment, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { jsx, css } from '@emotion/core';
 import { renderHTML } from '../../utils';
+import { Popover } from '..';
 import { typography } from '../../styles/typography';
 import { breakWord, displayBlock, displayInlineBlock, overflowHidden, positionRelative, textCapitalize, textCenter, textUppercase } from '../../styles/general';
 import { color as colors } from '../../styles/colors';
@@ -34,10 +37,71 @@ const {
   },
   text: {
     main
+  },
+  fill: {
+    tooltip: fillTooltip
+  },
+  text: {
+    tooltip: textTooltip
   }
 } = colors;
 const typographyMap = new Map([['t1', title1], ['t2', title2], ['t3', title3], ['t4', title4], ['h1', heading1], ['h2', heading2], ['h3', heading3], ['h4', heading4], ['h5', heading5], ['h6', heading6], ['p1', paragraph1], ['p2', paragraph2], ['p3', paragraph3]]);
 const colorMap = new Map([['default', main], ['primary', active], ['secondary', rest], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
+
+const getDirectionPopover = direction => {
+  switch (direction) {
+    case 'top':
+      return {
+        anchorOrigin: {
+          vertical: 'top',
+          horizontal: 'center'
+        },
+        transformOrigin: {
+          vertical: 'bottom',
+          horizontal: 'center'
+        }
+      };
+
+    case 'left':
+      return {
+        anchorOrigin: {
+          vertical: 'center',
+          horizontal: 'left'
+        },
+        transformOrigin: {
+          vertical: 'center',
+          horizontal: 'right'
+        }
+      };
+
+    case 'right':
+      return {
+        anchorOrigin: {
+          vertical: 'center',
+          horizontal: 'right'
+        },
+        transformOrigin: {
+          vertical: 'center',
+          horizontal: 'left'
+        }
+      };
+
+    default:
+      return {
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'center'
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'center'
+        }
+      };
+  }
+};
+
+const isTextClamped = elm => (elm === null || elm === void 0 ? void 0 : elm.scrollHeight) > (elm === null || elm === void 0 ? void 0 : elm.clientHeight);
+
 const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   type,
   color,
@@ -49,42 +113,14 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   className,
   lineClamp,
   children,
+  hoverTooltip,
+  tooltipDirection,
   ...props
 }, reference) => {
-  const typographyRef = useRef(null);
-  const TextRoot = css`
-                ${displayInlineBlock}
-                ${positionRelative}
-        ${breakWord}
-        ${paragraph1};
-                white-space: normal;
-                color: ${colorMap.get(color) || colors[color] || color};
-                max-width: max-content;
-                &.DGN-Typography-${type} {
-                    ${typographyMap.get(type.charAt(0) + type.slice(-1))}; //Get first and last character of type
-                }
-                &.DGN-Typography-center {
-                    ${textCenter}
-                }
-                &.DGN-Typography-fullWidth {
-                    ${displayBlock}
-                    max-width: initial;
-                }
-                &.DGN-Typography-Uppercase {
-                    ${textUppercase}
-                }
-                &.DGN-Typography-Capitalize {
-                    ${textCapitalize}
-                }
-                &.DGN-Typography-Clamp {
-                    ${overflowHidden}
-                    display: -webkit-box;
-                    -webkit-line-clamp: ${lineClamp};
-                    -webkit-box-orient: vertical;
-                }
-            `;
+  const ref = useRef(null);
+  const [openTooltip, setOpenTooltip] = useState(false);
   useImperativeHandle(reference, () => {
-    const currentRef = typographyRef.current || {};
+    const currentRef = ref.current || {};
     const _instance = {}; // methods
 
     _instance.__proto__ = {}; // hidden methods
@@ -92,21 +128,92 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
-  const classNames = ['DGN-UI-Typography', center && 'DGN-Typography-center', fullWidth && 'DGN-Typography-fullWidth', `DGN-Typography-${type}`, uppercase && `DGN-Typography-Uppercase`, capitalize && 'DGN-Typography-Capitalize', lineClamp && 'DGN-Typography-Clamp', className].join(' ').trim().replace(/\s+/g, ' ');
-  return renderHTML(Array.isArray(children) && !children.some(node => node && String(node.$$typeof) === 'Symbol(react.element)') ? children.join('') : children, mapping, {
-    ref: typographyRef,
-    css: TextRoot,
-    className: classNames,
+
+  const classNames = inTooltip => ['DGN-UI-Typography', center && 'DGN-Typography-center', fullWidth && 'DGN-Typography-fullWidth', `DGN-Typography-${type}`, uppercase && `DGN-Typography-Uppercase`, capitalize && 'DGN-Typography-Capitalize', !inTooltip && lineClamp && 'DGN-Typography-Clamp', className].join(' ').trim().replace(/\s+/g, ' ');
+
+  const setHoverTooltip = open => {
+    if (hoverTooltip && isTextClamped(ref.current)) {
+      setOpenTooltip(open);
+    }
+  };
+
+  const renderChildren = () => {
+    return Array.isArray(children) && !children.some(node => node && String(node.$$typeof) === 'Symbol(react.element)') ? children.join('') : children;
+  };
+
+  const renderTooltip = useMemo(() => jsx(Popover, {
+    open: openTooltip,
+    pressESCToClose: false,
+    bgColor: fillTooltip,
+    anchor: ref,
+    fullScreen: false,
+    width: 'max-content',
+    style: {
+      color: textTooltip
+    },
+    onMouseEnter: () => setHoverTooltip(true),
+    onMouseLeave: () => setHoverTooltip(false),
+    ...getDirectionPopover(tooltipDirection)
+  }, renderHTML(renderChildren(), mapping, {
+    css: TextRoot(color, type, lineClamp),
+    className: classNames(true),
+    style: {
+      color: textTooltip,
+      padding: '4px 6px'
+    }
+  })), [openTooltip, tooltipDirection, children, mapping, color, type, lineClamp]);
+  return jsx(Fragment, null, renderHTML(renderChildren(), mapping, {
+    ref: ref,
+    css: TextRoot(color, type, lineClamp),
+    className: classNames(false),
+    onMouseEnter: () => setHoverTooltip(true),
+    onMouseLeave: () => setHoverTooltip(false),
     ...props
-  });
+  }), hoverTooltip && renderTooltip);
 }));
+
+const TextRoot = (color, type, lineClamp) => css`
+    ${displayInlineBlock};
+    ${positionRelative};
+    ${breakWord};
+    ${paragraph1};
+    white-space: normal;
+    color: ${colorMap.get(color) || colors[color] || color};
+    max-width: max-content;
+    &.DGN-Typography-${type} {
+        ${typographyMap.get(type.charAt(0) + type.slice(-1))}; //Get first and last character of type
+    }
+    &.DGN-Typography-center {
+        ${textCenter}
+    }
+    &.DGN-Typography-fullWidth {
+        ${displayBlock}
+        max-width: initial;
+    }
+    &.DGN-Typography-Uppercase {
+        ${textUppercase}
+    }
+    &.DGN-Typography-Capitalize {
+        ${textCapitalize}
+    }
+    &.DGN-Typography-Clamp {
+        ${overflowHidden}
+        word-break: break-all;
+        display: -webkit-box;
+        -webkit-line-clamp: ${lineClamp};
+        -webkit-box-orient: vertical;
+    }
+`;
+
 Typography.defaultProps = {
   type: 'p1',
   color: 'default',
   center: false,
   fullWidth: true,
   mapping: 'span',
-  className: ''
+  className: '',
+  hoverTooltip: false,
+  tooltipDirection: 'down'
 };
 /** type of text<br/>
  * h1: Title <br/>
@@ -145,6 +252,12 @@ Typography.propTypes = {
   /** The line-clamp property truncates text at a specific number of lines. */
   lineClamp: PropTypes.number,
 
+  /** If true, hover will show tooltip when text clamped. */
+  hoverTooltip: PropTypes.bool,
+
+  /** Tooltip direction */
+  tooltipDirection: PropTypes.oneOf(['top', 'down', 'left', 'right']),
+
   /** allows maximum screen width if true */
   fullWidth: PropTypes.bool,
 

package/icons/effect.js

@@ -96,8 +96,8 @@ Icon.propTypes = {
   /** name of icon in icons store */
   name: PropTypes.string.isRequired,
 
-  /** color of icon<br />
-   * default: #7F828E
+  /** color of icon<br />
+   * default: #7F828E
    */
   color: PropTypes.string,
 
@@ -119,19 +119,19 @@ Icon.propTypes = {
   /** have view box if true */
   onClick: PropTypes.func,
 
-  /**
-   * 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.35",
+  "version": "1.3.36",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",