diginet-core-ui 1.3.96-beta.1 → 1.3.96-beta.3

package/components/breadcrumb/index.js

@@ -87,27 +87,24 @@ const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     // <ButtonIcon key="ellipsis" name={'MoreHoriz'} width={24} height={16} onClick={handleClickExpand} />,
     ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
   };
-  const allItems = data !== null && data !== void 0 && data.length ? data.map((item, idx) => {
-    var _item$onClick2;
-    return jsx("li", {
-      css: _BreadcrumbLiCSS,
-      className: 'DGN-UI-Breadcrumb-li',
-      key: `child-${idx}`
-    }, item !== null && item !== void 0 && item.icon ? jsx(Icon, {
-      className: 'DGN-UI-Breadcrumb-li-icon',
-      name: item === null || item === void 0 ? void 0 : item.icon,
-      color: color,
-      width: sizeIcon,
-      height: sizeIcon
-    }) : null, jsx(Typography, {
-      className: 'DGN-UI-Breadcrumb-li-label',
-      type: (data === null || data === void 0 ? void 0 : data.length) === idx + 1 ? sizeTypographyH : sizeTypographyP,
-      mapping: 'a',
-      color: 'currentColor',
-      href: item === null || item === void 0 ? void 0 : item.href,
-      onClick: item === null || item === void 0 ? void 0 : (_item$onClick2 = item.onClick) === null || _item$onClick2 === void 0 ? void 0 : _item$onClick2.call(item)
-    }, (item === null || item === void 0 ? void 0 : item.label) || (item === null || item === void 0 ? void 0 : item.name)), (data === null || data === void 0 ? void 0 : data.length) !== idx + 1 ? renderSeparator : null);
-  }) : React.Children.toArray(children).filter(child => {
+  const allItems = data !== null && data !== void 0 && data.length ? data.map((item, idx) => jsx("li", {
+    css: _BreadcrumbLiCSS,
+    className: 'DGN-UI-Breadcrumb-li',
+    key: `child-${idx}`
+  }, item !== null && item !== void 0 && item.icon ? jsx(Icon, {
+    className: 'DGN-UI-Breadcrumb-li-icon',
+    name: item === null || item === void 0 ? void 0 : item.icon,
+    color: color,
+    width: sizeIcon,
+    height: sizeIcon
+  }) : null, jsx(Typography, {
+    className: 'DGN-UI-Breadcrumb-li-label',
+    type: (data === null || data === void 0 ? void 0 : data.length) === idx + 1 ? sizeTypographyH : sizeTypographyP,
+    mapping: 'a',
+    color: 'currentColor',
+    href: item === null || item === void 0 ? void 0 : item.href,
+    onClick: item === null || item === void 0 ? void 0 : item.onClick
+  }, (item === null || item === void 0 ? void 0 : item.label) || (item === null || item === void 0 ? void 0 : item.name)), (data === null || data === void 0 ? void 0 : data.length) !== idx + 1 ? renderSeparator : null)) : React.Children.toArray(children).filter(child => {
     return /*#__PURE__*/React.isValidElement(child);
   }).map((child, idx) => {
     var _React$Children$toArr;
@@ -184,6 +181,7 @@ Breadcrumb.propTypes = {
   /** Class for component. */
   data: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
+    icon: PropTypes.string,
     href: PropTypes.string,
     onClick: PropTypes.func
   })),

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

@@ -360,7 +360,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const length = currentObjectDefault[unique].length;
       let existItemQuantity = 0;
       for (let index = length - 1; index >= 0; index--) {
-        if (!dataSourceUsable.some(data => data[valueExpr] === currentObjectDefault[unique][index][valueExpr])) {
+        if ((currentObjectDefault[unique][index][valueExpr] || currentObjectDefault[unique][index][valueExpr] === 0) && !dataSourceUsable.some(data => data[valueExpr] === currentObjectDefault[unique][index][valueExpr])) {
           dataSourceUsable.unshift(currentObjectDefault[unique][index]);
         } else {
           // Nếu số lượng phần tử của valueObjectDefault tồn tại trong dataSource nhiều hơn hoặc bằng limit thì không remove nữa

package/components/image/index.js

@@ -1,11 +1,11 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx, keyframes } from '@emotion/core';
-import AvatarDefault from "../../assets/avatar/default.svg";
+import ImageDefault from "../../assets/image/default.jpg";
 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 { animation, borderRadius, displayInlineFlex, itemsCenter, objectCover, overflowHidden, parseWidthHeight, positionRelative } from "../../styles/general";
 import { classNames, useIntersection } from "../../utils";
 const blurKeyframe = keyframes`
     0% { -webkit-filter: blur(4px);}
@@ -29,7 +29,7 @@ const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width
 }, reference) => {
   if (!reference) reference = useRef(null);
-  if (!defaultSrc) defaultSrc = AvatarDefault;
+  if (!defaultSrc) defaultSrc = ImageDefault;
   const ref = useRef(null);
   const [srcState, setSrcState] = useState(src);
   const [isInView, setIsInView] = useState(false);
@@ -106,7 +106,10 @@ const ImageCSS = (width, height, circular) => css`
     ${circular && borderRadius('50%')};
 `;
 const blurAnimationCSS = css`
-    animation: ${blurKeyframe} 1s ease;
+    ${animation({
+  keyframes: blurKeyframe,
+  duration: '1s'
+})}
 `;
 Image.defaultProps = {
   circular: false,

package/components/modal/modal.js

@@ -7,7 +7,7 @@ import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useS
 import { createPortal } from 'react-dom';
 import { animations } from "../../styles/animation";
 import { bgColor, borderRadius, boxBorder, cursorMove, displayFlex, flexCol, flexRow, justifyCenter, left, parseMaxWidthHeight, parseMinWidth, parseWidthHeight, pdt, positionAbsolute, positionRelative, top } from "../../styles/general";
-import { useTheme } from "../../theme";
+import { makeStyles, useTheme } from "../../theme";
 import { classNames, useDelayUnmount } from "../../utils";
 import ModalContext from "./context";
 const {
@@ -16,6 +16,12 @@ const {
   },
   zIndex: zIndexCORE
 } = useTheme();
+const useStyles = makeStyles({
+  noScroll: {
+    key: props => `DGN-Modal-${props}`,
+    overflow: 'hidden'
+  }
+});
 const fadeInDown = animations.fadeInDown;
 const fadeOutUp = animations.fadeOutUp;
 const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -38,7 +44,8 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, reference) => {
   if (!reference) reference = useRef(null);
   const ref = useRef(null);
-  const overflow = useRef(null);
+
+  // const overflow = useRef(null);
   const modalBoxRef = useRef(null);
   const [openState, setOpenState] = useState(open);
   const showModal = useDelayUnmount(openState, 200);
@@ -48,7 +55,6 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setOpenState(true);
   };
   const onCloseModal = () => {
-    document.body.style.overflow = overflow.current; // reset overflow of <body /> before open modal
     onClose && onClose();
     setOpenState(false);
   };
@@ -109,36 +115,34 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       modalBoxRef.current.style.left = newLeft + 'px';
     };
   };
-  useEffect(() => {
-    return () => {
-      document.body.style.overflow = overflow.current; // reset overflow of <body /> before open modal
-    };
-  }, []);
   useEffect(() => {
     setOpenState(open);
   }, [open]);
   useEffect(() => {
-    if (openState) {
-      if (ref.current) {
-        const modals = document.querySelectorAll('.DGN-UI-Modal');
-        if (!darkTheme && modals && modals.length > 1) {
-          ref.current.style.backgroundColor = 'transparent';
-        }
-        if (autoFocus) {
-          if (!ref.current.contains(document.activeElement)) {
-            ref.current.tabIndex = -1;
-            ref.current.focus();
-          }
+    if (openState && ref.current) {
+      const modals = document.querySelectorAll('.DGN-UI-Modal');
+      if (!darkTheme && modals && modals.length > 1) {
+        ref.current.style.backgroundColor = 'transparent';
+      }
+      if (autoFocus) {
+        if (!ref.current.contains(document.activeElement)) {
+          ref.current.tabIndex = -1;
+          ref.current.focus();
         }
       }
-      overflow.current = document.body.style.overflow; // overflow of <body /> before open modal
-      document.body.style.overflow = 'hidden';
+      const timestamp = Date.now();
+      const classes = useStyles(timestamp);
+      const noScrollClass = classes.noScroll.split(' ');
+      document.body.classList.add(...noScrollClass);
+      // overflow.current = document.body.style.overflow; // overflow of <body /> before open modal
+      // document.body.style.overflow = 'hidden';
       // Allow press ESC to close popup
       if (pressESCToClose) {
         document.addEventListener('keydown', pressESCHandler);
       }
       return () => {
-        document.body.style.overflow = overflow.current; // reset overflow of <body /> before open modal
+        document.body.classList.remove(...noScrollClass);
+        // document.body.style.overflow = overflow.current; // reset overflow of <body /> before open modal
         if (pressESCToClose) {
           document.removeEventListener('keydown', pressESCHandler);
         }

package/components/popover/index.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { bgColor, borderBottom, borderRadius4px, displayFlex, displayNone, flexCol, inset, justifyBetween, overflowAuto, parseMaxWidthHeight, parseMinWidthHeight, parseWidthHeight, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative } from "../../styles/general";
-import { useTheme } from "../../theme";
+import { makeStyles, useTheme } from "../../theme";
 import { classNames, isMobile, refType as ref } from "../../utils";
 const {
   typography: {
@@ -15,6 +15,12 @@ const {
   spacing,
   zIndex: zIndexCORE
 } = useTheme();
+const useStyles = makeStyles({
+  noScroll: {
+    key: props => `DGN-Popover-${props}`,
+    overflow: 'hidden'
+  }
+});
 const eventMap = new Map([['click', ['click']], ['hover', ['mouseenter', 'mouseleave']], ['focus', ['focus', 'blur']]]);
 const getArrowPosition = (anchorOrigin, transformOrigin, translate) => {
   if (anchorOrigin.horizontal === 'right' && transformOrigin.horizontal === 'left') {
@@ -139,7 +145,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 overflow = useRef(null);
   const anchorRef = useRef(anchor);
   const [openState, setOpenState] = useState(open);
   const [element, setElement] = useState(null);
@@ -406,10 +412,14 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [open]);
   useEffect(() => {
     if (openState && ref.current) {
-      if (document.body.style.overflow !== 'hidden') {
-        overflow.current = document.body.style.overflow; // store overflow of <body /> before open
-        document.body.style.overflow = 'hidden';
-      }
+      // if (document.body.style.overflow !== 'hidden') {
+      //     overflow.current = document.body.style.overflow; // store overflow of <body /> before open
+      //     document.body.style.overflow = 'hidden';
+      // }
+      const timestamp = Date.now();
+      const classes = useStyles(timestamp);
+      const noScrollClass = classes.noScroll.split(' ');
+      document.body.classList.add(...noScrollClass);
       // Position's anchor
       updatePositionPopover();
 
@@ -424,7 +434,8 @@ 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
+        document.body.classList.remove(...noScrollClass);
+        // document.body.style.overflow = overflow.current; // reset overflow of <body /> before open
         if (pressESCToClose) {
           document.removeEventListener('keydown', pressESCHandler);
         }
@@ -432,9 +443,10 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         window.removeEventListener('resize', updatePositionPopover);
         if (trigger === 'hover' && ref.current) ref.current.removeEventListener('mouseleave', handleEventTrigger, false);
       };
-    } else if (!openState) {
-      document.documentElement.style.overflow = overflow.current;
     }
+    // else if (!openState) {
+    //     document.documentElement.style.overflow = overflow.current;
+    // }
   }, [openState]);
   useEffect(() => {
     clickOutsideToClose ? document.addEventListener('click', onClickOutside) : document.removeEventListener('click', onClickOutside);

package/components/typography/index.js

@@ -5,24 +5,15 @@ import { Popover } from "./..";
 import PropTypes from 'prop-types';
 import { forwardRef, Fragment, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { breakAll, breakWord, cursorPointer, displayBlock, displayInlineBlock, italic, overflowHidden, parseHeight, parseMaxWidth, parseMinWidth, pd, positionRelative, textCapitalize, textCenter, textColor, textLineThrough, textLowercase, textSentence, textUnderline, textUppercase, whiteSpaceBreakSpaces } from "../../styles/general";
-import { useTheme, useTypography as typography } from "../../theme";
+import { useTypography as typography } from "../../theme";
 import { classNames, renderHTML } from "../../utils";
-const {
-  colors: {
-    text: {
-      main: textMain
-    },
-    fill: {
-      tooltip: fillTooltip
-    }
-  }
-} = useTheme();
-const colorMap = new Map([['default', textMain]]);
+const colorMap = new Map([['default', 'text/main']]);
 const formatMap = new Map([['capitalize', textCapitalize], ['uppercase', textUppercase], ['lowercase', textLowercase], ['italic', italic], ['line-through', textLineThrough], ['underline', textUnderline], ['sentence', textSentence]]);
 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(({
   action = {},
   capitalize,
+  // deprecated
   center,
   children,
   className,
@@ -37,17 +28,20 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   tooltipDirection,
   type,
   uppercase,
+  // deprecated
   ...props
 }, reference) => {
   var _ref$current;
   if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const formatCSS = [];
-  format.forEach(item => {
-    formatCSS.push(formatMap.get(item));
-  });
+  if (Array.isArray(format)) {
+    format.forEach(item => {
+      formatCSS.push(formatMap.get(item));
+    });
+  }
   const [openTooltip, setOpenTooltip] = useState(false);
-  const _TextRootCSS = [TextRootCSS(color, type, lineClamp, onClick, hoverTooltip), ...formatCSS];
+  const _TextRootCSS = [TextRootCSS(color, type, lineClamp, onClick, hoverTooltip, center, fullWidth, uppercase, capitalize), ...formatCSS];
   const showTooltip = () => {
     if (!hoverTooltip) return;
     if (isTextClamped(ref.current)) {
@@ -70,26 +64,26 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
-  const classes = (inTooltip = false) => classNames('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);
+  const classes = classNames('DGN-UI-Typography', `DGN-UI-Typography-${type}`, className);
   const content = Array.isArray(children) && !children.some(node => node && String(node.$$typeof) === 'Symbol(react.element)') ? children.join('') : children;
   const renderTooltip = hoverTooltip ? jsx(Popover, {
-    css: [parseMinWidth(300)],
+    css: parseMinWidth(300),
     open: openTooltip,
     pressESCToClose: false,
     fullScreen: false,
-    bgColor: fillTooltip,
+    bgColor: 'fill/tooltip',
     anchor: ref,
     width: ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientWidth) || 'max-content',
     direction: tooltipDirection
   }, renderHTML(content, mapping, {
     css: [_TextRootCSS, PopoverContentCSS],
-    className: classes(true)
+    className: classes
   })) : null;
   return useMemo(() => {
     return jsx(Fragment, null, renderHTML(content, mapping, {
       ref: ref,
-      css: _TextRootCSS,
-      className: classes(),
+      css: [_TextRootCSS, lineClamp && ClampCSS(lineClamp)],
+      className: classes,
       onMouseEnter: showTooltip,
       onMouseLeave: hideTooltip,
       onClick: onClick,
@@ -97,7 +91,7 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }), renderTooltip);
   }, [capitalize, center, children, className, color, format, fullWidth, hoverTooltip, italic, lineClamp, mapping, onClick, props, tooltipDirection, type, uppercase, openTooltip]);
 }));
-const TextRootCSS = (color, type, lineClamp, onClick, hoverTooltip) => css`
+const TextRootCSS = (color, type, lineClamp, onClick, hoverTooltip, center, fullWidth, uppercase, capitalize) => css`
     ${displayInlineBlock};
     ${positionRelative};
     ${onClick && cursorPointer};
@@ -106,28 +100,22 @@ const TextRootCSS = (color, type, lineClamp, onClick, hoverTooltip) => css`
     ${textColor(colorMap.get(color) || color)};
     ${parseMaxWidth('max-content')};
     ${type !== 'inherit' && typography[type]};
-    &.DGN-Typography-center {
-        ${textCenter};
-    }
-    &.DGN-Typography-fullWidth {
+    ${center && textCenter};
+    ${uppercase && textUppercase};
+    ${capitalize && textCapitalize};
+    ${fullWidth && css`
         ${displayBlock};
         ${parseMaxWidth('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 ClampCSS = lineClamp => css`
+    ${overflowHidden};
+    display: -webkit-box;
+    -webkit-line-clamp: ${lineClamp};
+    -webkit-box-orient: vertical;
 `;
 const PopoverContentCSS = css`
-    ${textColor('text.tooltip')};
+    ${textColor('text/tooltip')};
     ${pd([1, 1.5])};
     ${parseHeight('fit-content')};
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.96-beta.1",
+  "version": "1.3.96-beta.3",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/utils/renderHTML.js

@@ -11,7 +11,7 @@ const renderHTML = (text = null, TagName = 'div', options = {}) => {
   return jsx(TagName, {
     ...options,
     dangerouslySetInnerHTML: {
-      __html: parseTextToHTML(String(text))
+      __html: parseTextToHTML(String(text !== null && text !== void 0 ? text : ''))
     }
   });
 };