diginet-core-ui 1.3.97 → 1.3.98

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/date-range-picker/index.js

@@ -7,7 +7,7 @@ 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 { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexCol, flexRow, invisible, justifyEnd, left, mg, parseHeight, parseMaxWidth, parseMinWidth, parseWidthHeight, pd, pointerEventsNone, positionFixed, textCenter, top, userSelectNone, whiteSpaceNoWrap, z } from "../../../styles/general";
+import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexCol, flexRow, invisible, justifyEnd, left, mg, parseHeight, parseMaxWidth, parseMinWidth, pd, pointerEventsNone, positionFixed, textCenter, top, userSelectNone, whiteSpaceNoWrap, z } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { capitalizeSentenceCase, classNames, date as moment, isEqual, randomString, updatePosition } from "../../../utils";
 import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from "../calendar/function";
@@ -123,6 +123,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [, setValueFr] = useState(Date.now());
   const [, setValueTo] = useState(Date.now());
   const [, setSelected] = useState(Date.now());
+  const [valueState, setValueState] = useState();
   const navigatorFromRefs = {
     doubleLeft: useRef(null),
     doubleRight: useRef(null),
@@ -332,7 +333,11 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const timeFr = new Date(times[0]);
     const timeTo = new Date(times[1]);
     const from = new Date(timeFr.getFullYear(), timeFr.getMonth());
-    const to = new Date(timeTo.getFullYear(), +moment(timeTo).diff(timeFr, 'months') === 0 ? timeTo.getMonth() + 1 : timeTo.getMonth());
+    const to = new Date(timeTo.getFullYear(), timeTo.getMonth());
+    // const to = new Date(
+    //     timeTo.getFullYear(),
+    //     +moment(timeTo).diff(timeFr, 'months') === 0 ? timeTo.getMonth() + 1 : timeTo.getMonth()
+    // );
     updateValueFr(from);
     updateValueTo(to);
   };
@@ -365,8 +370,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const {
       left,
       height,
-      top,
-      width
+      top
     } = anchor instanceof Element ? anchor.getBoundingClientRect() : ref.current.getBoundingClientRect();
     const pickerHeight = innerWidth < 567 ? controls ? 550 : 495 : controls ? 310 : 256;
     let style = {};
@@ -388,7 +392,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         style.left = (innerWidth - pickerWidth) / 2;
       }
     }
-    return pickerCSS.picker(style, width).styles;
+    return pickerCSS.picker(style).styles;
   };
   const clearDayHovering = arr => {
     if (values.current.length !== 2) {
@@ -740,6 +744,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       tempValue = formatValue(time, displayFormat);
     }
     el.value = capitalizeSentenceCase(tempValue);
+    setValueState(capitalizeSentenceCase(tempValue));
     clearAble && onSwap(false);
   };
   const onClear = () => {
@@ -932,7 +937,9 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     startIconProps: {
       className: 'non-effect allow-disabled'
     },
-    endIcon: endIcon
+    endIcon: endIcon,
+    value: valueState,
+    onClick: onInputFocus
   }), error ? jsx(HelperText, {
     ...helperTextProps,
     disabled: disabled
@@ -1062,10 +1069,10 @@ const pickerCSS = {
             }
         }
     `,
-  picker: (position, width) => css`
+  picker: position => css`
         ${borderRadius4px};
         ${positionFixed};
-        ${parseWidthHeight(width, 'max-content')};
+        ${parseHeight('max-content')};
         ${parseMinWidth(window.innerWidth <= 633 ? 300 : 633)};
         ${parseMaxWidth(805)};
         ${top(position.top)};

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

@@ -306,10 +306,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   //     }
   // };
 
-  /**
-   * So sánh text đầu vào cáo map với txtSearch
-   * @param text
-   * @return {boolean}
+  /**
+   * So sánh text đầu vào cáo map với txtSearch
+   * @param text
+   * @return {boolean}
    */
   const handleRenderBySearch = (text = '') => {
     if (!txtSearch || typeof text !== 'string') return true;
@@ -320,10 +320,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else return text.toLowerCase().includes(txtSearch.toLowerCase());
   };
 
-  /**
-   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
-   * @param data {object} rowData of dataSource
-   * @return {string}
+  /**
+   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
+   * @param data {object} rowData of dataSource
+   * @return {string}
    */
   const displayValue = data => {
     let text = '';
@@ -1634,9 +1634,9 @@ Dropdown.propTypes = {
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-  /** Field name used for text display in dropdown list.<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** Field name used for text display in dropdown list.<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /**  Style inline of dropdown items. */
@@ -1645,14 +1645,14 @@ Dropdown.propTypes = {
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   /** Props applied to the [HelperText](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) element. */
   helperTextProps: PropTypes.object,
-  /** Field name used for icon display.<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** Field name used for icon display.<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1686,8 +1686,8 @@ Dropdown.propTypes = {
   onChange: PropTypes.func,
   /** Callback fired when dropdown closed. */
   onClosed: PropTypes.func,
-  /** Callback fired when the input value changes.<br/>
-   * if undefined: the filter function will run (default)
+  /** Callback fired when the input value changes.<br/>
+   * if undefined: the filter function will run (default)
    */
   onInput: PropTypes.func,
   /** Callback fired when key down input */
@@ -1698,21 +1698,21 @@ Dropdown.propTypes = {
   placeholder: PropTypes.string,
   /** If `true`, the component is read-only. */
   readOnly: PropTypes.bool,
-  /** Function displays items by custom.<br/>
-   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
-   * --> such as: displayExpr={'name - role'}
+  /** Function displays items by custom.<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
-  /** Function or field name used for display selected items, example:<br/>
-   * renderSelectedItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** Function or field name used for display selected items, example:<br/>
+   * renderSelectedItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /** If `true`, the label will indicate that the input is required. */
   required: PropTypes.bool,
-  /**
-   * Duration wait enter search content on search.<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If `true`, used default delayOnInput.
+  /**
+   * Duration wait enter search content on search.<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   * If `true`, used default delayOnInput.
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   /** Specifies a data object's field name or an expression whose value is compared to the search string. */
@@ -1739,19 +1739,19 @@ Dropdown.propTypes = {
   valueObjectDefault: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   /**The variant to use. */
   viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * showDropdown(): Show dropdown
-   * * closeDropdown(): Close dropdown
-   * * onClear(): Clear selected value
-   * * setPreviousValue(): Set value to previous value
-   * * setValue(value): Set value of dropdown
-   *  * @param {value} - string || number || array
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * showDropdown(): Show dropdown
+   * * closeDropdown(): Close dropdown
+   * * onClear(): Clear selected value
+   * * setPreviousValue(): Set value to previous value
+   * * setValue(value): Set value of dropdown
+   *  * @param {value} - string || number || array
    */
 };
 

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.png";
 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')};
 `;