diginet-core-ui 1.3.76-beta.2 → 1.3.76-beta.4

package/components/typography/index.js

@@ -1,21 +1,20 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useRef, forwardRef, useImperativeHandle, Fragment, useMemo, useState } from 'react';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import { classNames, renderHTML } from '../../utils';
+import { forwardRef, Fragment, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Popover } from '..';
-import { cursorPointer, displayBlock, displayInlineBlock, overflowHidden, positionRelative, textCapitalize, textCenter, textUppercase } from '../../styles/general';
-import { color as colors } from '../../styles/colors';
-import theme from '../../theme/settings';
+import { breakAll, breakWord, cursorPointer, displayBlock, displayInlineBlock, overflowHidden, pointerEventsNone, positionRelative, textCapitalize, textCenter, textUppercase } from '../../styles/general';
+import { useColor as colors, useTheme, useTypography as typography } from '../../theme';
+import { classNames, renderHTML } from '../../utils';
 const {
   colors: {
     system: {
-      rest
+      rest: systemRest
     },
     text: {
-      main,
+      main: textMain,
       tooltip: textTooltip
     },
     fill: {
@@ -23,24 +22,11 @@ const {
     }
   },
   typography: {
-    title1,
-    title2,
-    title3,
-    title4,
-    heading1,
-    heading2,
-    heading3,
-    heading4,
-    heading5,
-    heading6,
-    paragraph1,
-    paragraph2,
-    paragraph3
+    paragraph1
   },
   spacing
-} = theme;
-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], ['secondary', rest]]);
+} = useTheme();
+const colorMap = new Map([['default', textMain], ['secondary', systemRest]]);
 
 const isTextClamped = elm => (elm === null || elm === void 0 ? void 0 : elm.scrollHeight) > (elm === null || elm === void 0 ? void 0 : elm.clientHeight);
 
@@ -61,10 +47,28 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   uppercase,
   ...props
 }, reference) => {
+  var _ref$current;
+
   const ref = useRef(null);
   const [openTooltip, setOpenTooltip] = useState(false);
 
-  const _TextRootCSS = TextRootCSS(color, type, lineClamp, onClick);
+  const _TextRootCSS = TextRootCSS(color, type, lineClamp, onClick, hoverTooltip);
+
+  const showTooltip = () => {
+    if (!hoverTooltip) return;
+
+    if (isTextClamped(ref.current)) {
+      setOpenTooltip(true);
+    }
+  };
+
+  const hideTooltip = () => {
+    if (!hoverTooltip) return;
+
+    if (isTextClamped(ref.current)) {
+      setOpenTooltip(false);
+    }
+  };
 
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -78,90 +82,76 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
 
-  const classes = inTooltip => 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 setHoverTooltip = (open, isTooltip) => {
-    !isTooltip && setOpenTooltip(false);
-
-    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(() => {
-    var _ref$current;
-
-    return jsx(Popover, {
-      open: openTooltip,
-      pressESCToClose: false,
-      bgColor: fillTooltip,
-      anchor: ref,
-      fullScreen: false,
-      width: ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientWidth) || 'max-content',
-      style: {
-        color: textTooltip
-      },
-      onMouseEnter: () => setHoverTooltip(true, true),
-      onMouseLeave: () => setHoverTooltip(false, true),
-      direction: tooltipDirection
-    }, renderHTML(renderChildren(), mapping, {
+  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 content = Array.isArray(children) && !children.some(node => node && String(node.$$typeof) === 'Symbol(react.element)') ? children.join('') : children;
+  const renderTooltip = hoverTooltip ? jsx(Popover, {
+    css: PopoverCSS,
+    open: openTooltip,
+    pressESCToClose: false,
+    bgColor: fillTooltip,
+    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)
+  })) : null;
+  return useMemo(() => {
+    return jsx(Fragment, null, renderHTML(content, mapping, {
+      ref: ref,
       css: _TextRootCSS,
-      className: classes(true),
-      style: {
-        color: textTooltip,
-        padding: spacing([1, 1.5]),
-        height: 'fit-content'
-      }
-    }));
-  }, [openTooltip, capitalize, center, children, className, color, fullWidth, hoverTooltip, lineClamp, mapping, onClick, tooltipDirection, type, uppercase]);
-  return jsx(Fragment, null, renderHTML(renderChildren(), mapping, {
-    ref: ref,
-    css: _TextRootCSS,
-    className: classes(false),
-    onMouseEnter: () => setHoverTooltip(true),
-    onMouseLeave: () => setHoverTooltip(false),
-    onClick: onClick,
-    ...props
-  }), hoverTooltip && renderTooltip);
+      className: classes(),
+      onMouseEnter: showTooltip,
+      onMouseLeave: hideTooltip,
+      onClick: onClick,
+      ...props
+    }), renderTooltip);
+  }, [capitalize, center, children, className, color, fullWidth, hoverTooltip, lineClamp, mapping, onClick, tooltipDirection, type, uppercase, props, openTooltip]);
 }));
 
-const TextRootCSS = (color, type, lineClamp, onClick) => css`
+const TextRootCSS = (color, type, lineClamp, onClick, hoverTooltip) => css`
     ${displayInlineBlock};
     ${positionRelative};
     ${paragraph1};
     ${onClick && cursorPointer};
-    word-break: break-all;
+    ${hoverTooltip && lineClamp === 1 ? breakAll : breakWord};
     white-space: break-spaces;
     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
+        ${typography[type]};
     }
     &.DGN-Typography-center {
-        ${textCenter}
+        ${textCenter};
     }
     &.DGN-Typography-fullWidth {
-        ${displayBlock}
+        ${displayBlock};
         max-width: initial;
     }
     &.DGN-Typography-Uppercase {
-        ${textUppercase}
+        ${textUppercase};
     }
     &.DGN-Typography-Capitalize {
-        ${textCapitalize}
+        ${textCapitalize};
     }
     &.DGN-Typography-Clamp {
-        ${overflowHidden}
+        ${overflowHidden};
         display: -webkit-box;
         -webkit-line-clamp: ${lineClamp};
         -webkit-box-orient: vertical;
     }
 `;
 
+const PopoverCSS = css`
+    ${pointerEventsNone};
+    color: ${textTooltip};
+`;
+const PopoverContentCSS = css`
+    color: ${textTooltip};
+    padding: ${spacing([1, 1.5])};
+    height: 'fit-content';
+`;
 Typography.defaultProps = {
   center: false,
   className: '',

package/package.json

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