@spaced-out/ui-design-system 0.2.0 → 0.2.2-beta.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.2.2-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.2.1...v0.2.2-beta.0) (2024-09-30)
+
+
+### Bug Fixes
+
+* support lines in truncate text with tooltip ([#272](https://github.com/spaced-out/ui-design-system/issues/272)) ([e8e4d3c](https://github.com/spaced-out/ui-design-system/commit/e8e4d3c3def11b2efd9f86f43ec03197891b1cb5))
+
+### [0.2.1](https://github.com/spaced-out/ui-design-system/compare/v0.2.0...v0.2.1) (2024-09-30)
+
+
+### Bug Fixes
+
+* 🖼️ support for custom text in sidemenu link component  ([#271](https://github.com/spaced-out/ui-design-system/issues/271)) ([3fd98b8](https://github.com/spaced-out/ui-design-system/commit/3fd98b8ba58c1b60b164a1d43ea5a47c503eaed1))
+
 ## [0.2.0](https://github.com/spaced-out/ui-design-system/compare/v0.1.130...v0.2.0) (2024-09-27)
 
 

package/lib/components/SideMenuLink/SideMenuLink.js

@@ -194,6 +194,7 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     linkComponent: LinkComponent,
     rightSlot,
     to,
+    customTitle,
     ...restButtonProps
   } = _ref;
   const selected = selectedValue === pageNameKey;
@@ -201,6 +202,7 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const onChangeHandler = e => {
     onChange && onChange(e, pageNameKey);
   };
+  const linkTitle = customTitle || MENU_NAME_LIST[pageNameKey].title;
   return /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
     condition: to !== undefined,
     wrapper: children => /*#__PURE__*/React.createElement(_Link.Link, {
@@ -215,7 +217,7 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
     condition: Boolean(!opened && !inActive),
     wrapper: children => /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({
-      body: MENU_NAME_LIST[pageNameKey].title
+      body: linkTitle
     }, tooltip), children)
   }, /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, restButtonProps, {
     className: (0, _classify.default)(_SideMenuLinkModule.default.linkWrapper, {
@@ -239,9 +241,9 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className: _SideMenuLinkModule.default.menuLabelContainer
   }, pageNameKey && MENU_NAME_LIST[pageNameKey] ? isGroupMenuLink ? /*#__PURE__*/React.createElement(_Text.SubTitleSmall, {
     className: _SideMenuLinkModule.default.groupMenuLinkText
-  }, MENU_NAME_LIST[pageNameKey].title) : /*#__PURE__*/React.createElement(_Text.BodyMedium, {
+  }, linkTitle) : /*#__PURE__*/React.createElement(_Text.BodyMedium, {
     className: _SideMenuLinkModule.default.menuLinkText
-  }, MENU_NAME_LIST[pageNameKey].title) : null, rightSlot ? rightSlot : null) : null)));
+  }, linkTitle) : null, rightSlot ? rightSlot : null) : null)));
 });
 exports.SideMenuLink = SideMenuLink;
 SideMenuLink.displayName = 'SideMenuLink';

package/lib/components/SideMenuLink/SideMenuLink.js.flow

@@ -183,6 +183,7 @@ type ClassNames = $ReadOnly<{wrapper?: string}>;
 export type SideMenuLinkProps = {
   classNames?: ClassNames,
   children?: React.Node,
+  customTitle?: string,
   pageNameKey: string,
   disabled?: boolean,
   hovered?: boolean,
@@ -216,6 +217,7 @@ export const SideMenuLink: React$AbstractComponent<
       linkComponent: LinkComponent,
       rightSlot,
       to,
+      customTitle,
       ...restButtonProps
     }: SideMenuLinkProps,
     ref,
@@ -226,6 +228,8 @@ export const SideMenuLink: React$AbstractComponent<
       onChange && onChange(e, pageNameKey);
     };
 
+    const linkTitle = customTitle || MENU_NAME_LIST[pageNameKey].title;
+
     return (
       <ConditionalWrapper
         condition={to !== undefined}
@@ -246,7 +250,7 @@ export const SideMenuLink: React$AbstractComponent<
         <ConditionalWrapper
           condition={Boolean(!opened && !inActive)}
           wrapper={(children) => (
-            <Tooltip body={MENU_NAME_LIST[pageNameKey].title} {...tooltip}>
+            <Tooltip body={linkTitle} {...tooltip}>
               {children}
             </Tooltip>
           )}
@@ -283,11 +287,11 @@ export const SideMenuLink: React$AbstractComponent<
                 {pageNameKey && MENU_NAME_LIST[pageNameKey] ? (
                   isGroupMenuLink ? (
                     <SubTitleSmall className={css.groupMenuLinkText}>
-                      {MENU_NAME_LIST[pageNameKey].title}
+                      {linkTitle}
                     </SubTitleSmall>
                   ) : (
                     <BodyMedium className={css.menuLinkText}>
-                      {MENU_NAME_LIST[pageNameKey].title}
+                      {linkTitle}
                     </BodyMedium>
                   )
                 ) : null}

package/lib/components/TruncatedTextWithTooltip/TruncatedTextWithTooltip.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.TruncatedTextWithTooltip = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _size = require("../../styles/variables/_size");
+var _useWindowSize = require("../../hooks/useWindowSize");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _ConditionalWrapper = require("../ConditionalWrapper");
 var _Tooltip = require("../Tooltip");
 var _TruncatedTextWithTooltipModule = _interopRequireDefault(require("./TruncatedTextWithTooltip.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -20,57 +21,39 @@ const TruncatedTextWithTooltip = _ref => {
     children,
     tooltip,
     wrapText = false,
+    line = 1,
+    wordBreak = 'break-all',
     ...props
   } = _ref;
+  const {
+    width
+  } = (0, _useWindowSize.useWindowSize)();
   const [showMouseTip, setShowMouseTip] = React.useState(false);
   const truncatedRef = React.useRef();
-  const checkWidths = React.useMemo(() => (0, _debounce.default)(() => {
-    const span = truncatedRef.current;
-    if (span) {
-      setShowMouseTip(span.offsetWidth < span.scrollWidth);
+  const checkIfTextOverflowing = React.useMemo(() => (0, _debounce.default)(() => {
+    if (!wrapText && truncatedRef && truncatedRef.current && truncatedRef.current.scrollHeight > truncatedRef.current.clientHeight) {
+      setShowMouseTip(true);
+    } else {
+      setShowMouseTip(false);
     }
   }, 200), []);
-
-  // Running only on mount and unmount
-  React.useEffect(() => {
-    const span = truncatedRef.current;
-    if (span) {
-      // Note(Nishant): This is a fix for the issue where the parent width is not set
-      // explicitly by the calling component, for truncation to work the parent wrapper should
-      // have a defined width. For cases where width is not set the component would set the
-      // width of the parent to 100%(sizeFluid) for the auto truncation to kick in
-      const parent = span.parentNode;
-      if (parent && parent instanceof HTMLElement) {
-        const computedStyles = window.getComputedStyle(parent);
-        const computedWidth = computedStyles.getPropertyValue('width');
-        const clientWidth = parent.clientWidth;
-        if (computedWidth !== `${clientWidth}px`) {
-          // Set the parent width to 100% if not explicitly set
-          parent.style.width = _size.sizeFluid;
-        }
-      }
-    }
-    window.addEventListener('resize', checkWidths);
-    return () => {
-      window.removeEventListener('resize', checkWidths);
-    };
-  }, [checkWidths]);
   React.useEffect(() => {
-    checkWidths();
-  }, [children]);
-  const content = showMouseTip ? /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({}, tooltip, {
-    body: tooltip?.body ?? children,
-    elevation: tooltip?.elevation ?? 'toast'
-  }), /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: (0, _classify.default)(_TruncatedTextWithTooltipModule.default.truncatedText, classNames?.wrapper),
-    ref: truncatedRef
-  }), children)) : /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: (0, _classify.default)({
-      [_TruncatedTextWithTooltipModule.default.truncatedText]: !wrapText,
-      [_TruncatedTextWithTooltipModule.default.wrapText]: wrapText
-    }, classNames?.wrapper),
+    checkIfTextOverflowing();
+  }, [width, line, children, wrapText]);
+  const styles = {
+    '--line-clamp': wrapText ? 'unset' : line,
+    '--word-break': wordBreak
+  };
+  return /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
+    condition: Boolean(showMouseTip),
+    wrapper: children => /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({}, tooltip, {
+      body: tooltip?.body ?? children,
+      elevation: tooltip?.elevation ?? 'toast'
+    }), children)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: (0, _classify.default)(_TruncatedTextWithTooltipModule.default.truncateLineClamp, classNames?.wrapper),
+    style: styles,
     ref: truncatedRef
-  }), children);
-  return content;
+  }, children));
 };
 exports.TruncatedTextWithTooltip = TruncatedTextWithTooltip;

package/lib/components/TruncatedTextWithTooltip/TruncatedTextWithTooltip.js.flow

@@ -3,8 +3,9 @@
 import * as React from 'react';
 import debounce from 'lodash/debounce';
 
-import {sizeFluid} from '../../styles/variables/_size';
+import {useWindowSize} from '../../hooks/useWindowSize';
 import classify from '../../utils/classify';
+import {ConditionalWrapper} from '../ConditionalWrapper';
 import type {BaseTooltipProps} from '../Tooltip';
 import {Tooltip} from '../Tooltip';
 
@@ -17,6 +18,8 @@ export type TruncatedTextWithTooltipProps = {
   children?: React.Node,
   tooltip?: BaseTooltipProps,
   classNames?: ClassNames,
+  line?: number,
+  wordBreak?: string,
   wrapText?: boolean,
   ...
 };
@@ -26,85 +29,59 @@ export const TruncatedTextWithTooltip = ({
   children,
   tooltip,
   wrapText = false,
+  line = 1,
+  wordBreak = 'break-all',
   ...props
 }: TruncatedTextWithTooltipProps): React.Node => {
+  const {width} = useWindowSize();
   const [showMouseTip, setShowMouseTip] = React.useState(false);
   const truncatedRef = React.useRef<?HTMLSpanElement>();
 
-  const checkWidths = React.useMemo(
+  const checkIfTextOverflowing = React.useMemo(
     () =>
       debounce(() => {
-        const span = truncatedRef.current;
-
-        if (span) {
-          setShowMouseTip(span.offsetWidth < span.scrollWidth);
+        if (
+          !wrapText &&
+          truncatedRef &&
+          truncatedRef.current &&
+          truncatedRef.current.scrollHeight > truncatedRef.current.clientHeight
+        ) {
+          setShowMouseTip(true);
+        } else {
+          setShowMouseTip(false);
         }
       }, 200),
     [],
   );
-
-  // Running only on mount and unmount
-  React.useEffect(() => {
-    const span = truncatedRef.current;
-
-    if (span) {
-      // Note(Nishant): This is a fix for the issue where the parent width is not set
-      // explicitly by the calling component, for truncation to work the parent wrapper should
-      // have a defined width. For cases where width is not set the component would set the
-      // width of the parent to 100%(sizeFluid) for the auto truncation to kick in
-      const parent = span.parentNode;
-      if (parent && parent instanceof HTMLElement) {
-        const computedStyles = window.getComputedStyle(parent);
-        const computedWidth = computedStyles.getPropertyValue('width');
-        const clientWidth = parent.clientWidth;
-
-        if (computedWidth !== `${clientWidth}px`) {
-          // Set the parent width to 100% if not explicitly set
-          parent.style.width = sizeFluid;
-        }
-      }
-    }
-
-    window.addEventListener('resize', checkWidths);
-
-    return () => {
-      window.removeEventListener('resize', checkWidths);
-    };
-  }, [checkWidths]);
-
   React.useEffect(() => {
-    checkWidths();
-  }, [children]);
-
-  const content = showMouseTip ? (
-    <Tooltip
-      {...tooltip}
-      body={tooltip?.body ?? children}
-      elevation={tooltip?.elevation ?? 'toast'}
+    checkIfTextOverflowing();
+  }, [width, line, children, wrapText]);
+
+  const styles = {
+    '--line-clamp': wrapText ? 'unset' : line,
+    '--word-break': wordBreak,
+  };
+
+  return (
+    <ConditionalWrapper
+      condition={Boolean(showMouseTip)}
+      wrapper={(children) => (
+        <Tooltip
+          {...tooltip}
+          body={tooltip?.body ?? children}
+          elevation={tooltip?.elevation ?? 'toast'}
+        >
+          {children}
+        </Tooltip>
+      )}
     >
       <span
-        {...props}
-        className={classify(css.truncatedText, classNames?.wrapper)}
+        className={classify(css.truncateLineClamp, classNames?.wrapper)}
+        style={styles}
         ref={truncatedRef}
       >
         {children}
       </span>
-    </Tooltip>
-  ) : (
-    <span
-      {...props}
-      className={classify(
-        {
-          [css.truncatedText]: !wrapText,
-          [css.wrapText]: wrapText,
-        },
-        classNames?.wrapper,
-      )}
-      ref={truncatedRef}
-    >
-      {children}
-    </span>
+    </ConditionalWrapper>
   );
-
-  return content;
 };

package/lib/components/TruncatedTextWithTooltip/TruncatedTextWithTooltip.module.css

@@ -1,18 +1,4 @@
-@value (sizeFluid) from '../../styles/variables/_size.css';
-
-.wrapper {
-  display: flex;
-  width: sizeFluid;
-}
-
-.truncatedText {
-  width: sizeFluid;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.wrapText,
-.truncatedText {
-  width: sizeFluid;
+.truncateLineClamp {
+  composes: truncate from '../../styles/typography.module.css';
+  white-space: normal;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.2.0",
+  "version": "0.2.2-beta.0",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {