@spaced-out/ui-design-system 0.6.33 → 0.6.34

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.6.34](https://github.com/spaced-out/ui-design-system/compare/v0.6.33...v0.6.34) (2026-09-16)
+
+
+### Bug Fixes
+
+* truncated text with tooltip issues ([#507](https://github.com/spaced-out/ui-design-system/issues/507)) ([8dd98b9](https://github.com/spaced-out/ui-design-system/commit/8dd98b903010b1fccf2e42cd3d370c56a5ab21be))
+
 ### [0.6.33](https://github.com/spaced-out/ui-design-system/compare/v0.6.32...v0.6.33) (2026-09-15)
 
 

package/lib/components/TruncatedTextWithTooltip/TruncatedTextWithTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TruncatedTextWithTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/TruncatedTextWithTooltip/TruncatedTextWithTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AAM7D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAYD,eAAO,MAAM,wBAAwB,GAAI,uEAQtC,6BAA6B,sBAkG/B,CAAC"}
+{"version":3,"file":"TruncatedTextWithTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/TruncatedTextWithTooltip/TruncatedTextWithTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AAM7D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,wBAAwB,GAAI,uEAQtC,6BAA6B,sBAiH/B,CAAC"}

package/lib/components/TruncatedTextWithTooltip/TruncatedTextWithTooltip.js

@@ -8,16 +8,11 @@ var React = _interopRequireWildcard(require("react"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _qa = require("../../utils/qa");
-var _ConditionalWrapper = require("../ConditionalWrapper");
 var _Tooltip = require("../Tooltip");
 var _TruncatedTextWithTooltipModule = _interopRequireDefault(require("./TruncatedTextWithTooltip.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-// Define the expected props for the child element that can be cloned
-
-// Type for a child element that can be cloned
-
 const TruncatedTextWithTooltip = _ref => {
   let {
     classNames,
@@ -41,6 +36,15 @@ const TruncatedTextWithTooltip = _ref => {
   }), [truncatedNode, wrapText]);
   React.useEffect(() => {
     checkIfTextOverflowing();
+    // Cancel the outgoing debounce instance's pending trailing-edge call.
+    // checkIfTextOverflowing is recreated whenever truncatedNode changes
+    // (e.g. once on mount, null -> real node). Without this cancel, the
+    // stale instance's trailing call still fires ~200ms later using its
+    // frozen closure (truncatedNode as it was when THAT instance was
+    // created) and can stomp a correct value the new instance already set.
+    return () => {
+      checkIfTextOverflowing.cancel();
+    };
   }, [line, children, wrapText, checkIfTextOverflowing]);
   React.useEffect(() => {
     if (!truncatedNode) {
@@ -58,57 +62,66 @@ const TruncatedTextWithTooltip = _ref => {
     '--line-clamp': wrapText ? 'unset' : line,
     '--word-break': wordBreak
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.ConditionalWrapper, {
-    condition: Boolean(showMouseTip),
-    wrapper: children => {
-      const child = React.Children.only(children);
 
-      // Type guard to ensure child is a ReactElement
-      if (! /*#__PURE__*/React.isValidElement(child)) {
-        return child;
-      }
-
-      // Cast to our typed child element
-      const childElement = child;
-      const childProps = childElement.props;
+  // Always render the same <span>, always wrapped in the same <Tooltip>,
+  // toggling only Tooltip's `hidden` prop. Previously a ConditionalWrapper
+  // swapped between a bare <span> and <Tooltip><div>{span}</div></Tooltip>
+  // based on showMouseTip — changing the element type at this tree position
+  // forces React to unmount/remount the span every time showMouseTip
+  // toggles. The remounted span (now a flex child of an extra wrapper div)
+  // measures different scrollHeight/clientHeight than the bare span, so the
+  // ResizeObserver above sees its own self-inflicted resize and flips
+  // showMouseTip again — an infinite loop where the tooltip never
+  // stabilizes. Tooltip clones its trigger prop onto the same element (no
+  // wrapper element inserted), so keeping the span's identity stable here
+  // means toggling showMouseTip no longer causes a remount.
+  const truncatedSpan = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: (0, _classify.default)(_TruncatedTextWithTooltipModule.default.truncateLineClamp, classNames?.wrapper),
+    style: styles,
+    ref: setTruncatedNode,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
+    children: children
+  });
 
-      //Vivek: This children in tooltip body is modified to remove line clamp style
-      const modifiedChild = /*#__PURE__*/React.cloneElement(childElement, {
-        ...childProps,
-        style: {
-          ...childProps.style,
-          '--line-clamp': tooltip?.bodyMaxLines || line,
-          '--word-break': wordBreak
-        }
-      });
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
-        ...tooltip,
-        body: tooltip?.body || modifiedChild,
-        elevation: tooltip?.elevation ?? 'toast',
-        testId: (0, _qa.generateTestId)({
-          base: testId,
-          slot: 'tooltip'
-        }),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: _TruncatedTextWithTooltipModule.default.childrenWrapper,
-          "data-testid": (0, _qa.generateTestId)({
-            base: testId,
-            slot: 'wrapper'
-          }),
-          children: children
-        })
-      });
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _classify.default)(_TruncatedTextWithTooltipModule.default.truncateLineClamp, classNames?.wrapper),
-      style: styles,
-      ref: setTruncatedNode,
-      "data-testid": (0, _qa.generateTestId)({
-        base: testId,
-        slot: 'text'
-      }),
-      children: children
+  // `ref: null` is required here: React.cloneElement inherits the source
+  // element's ref unless explicitly overridden. Without this, this
+  // body-only clone (rendered separately inside Tooltip's floating panel,
+  // gated by `hidden`) would share the trigger span's ref. Mounting/
+  // unmounting this clone as `hidden` toggles would hijack truncatedNode
+  // away from the actual trigger, eventually losing the ref to the real
+  // trigger permanently once this clone unmounts.
+  //
+  // No className/style here (rather than trying to override --line-clamp):
+  // Tooltip already wraps body in <Truncate line={bodyMaxLines}>, which puts
+  // its own webkit-box line-clamp on the containing div. Keeping
+  // css.truncateLineClamp on this span would make it a second, nested
+  // webkit-box with its own --word-break (this component's `wordBreak` prop,
+  // meant for the single-line trigger) — since that inner box is what
+  // actually renders the text, it silently wins over the outer div's
+  // word-break even when both clamp to the same line count. Dropping the
+  // class/style lets the outer div be the only clamp in the chain.
+  const modifiedChild = /*#__PURE__*/React.cloneElement(truncatedSpan, {
+    ref: null,
+    className: undefined,
+    style: undefined,
+    'data-testid': (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'body-text'
     })
   });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+    ...tooltip,
+    hidden: tooltip?.hidden ?? !showMouseTip,
+    body: tooltip?.body || modifiedChild,
+    elevation: tooltip?.elevation ?? 'toast',
+    testId: (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'tooltip'
+    }),
+    children: truncatedSpan
+  });
 };
 exports.TruncatedTextWithTooltip = TruncatedTextWithTooltip;

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

@@ -2,6 +2,3 @@
   composes: truncate from '../../styles/typography.module.css';
   white-space: normal;
 }
-.childrenWrapper {
-  display: flex;
-}

package/mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/genesis-mcp",
-  "version": "1.0.45",
+  "version": "1.0.46",
   "description": "MCP server for Genesis UI Design System - provides AI assistants with access to components, hooks, and design tokens",
   "type": "module",
   "main": "index.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.6.33",
+  "version": "0.6.34",
   "description": "Sense UI components library",
   "author": {
     "name": "Spaced Out"