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

package/.github/workflows/publish_to_npm.yml

@@ -94,7 +94,14 @@ jobs:
           fi
         # Note(Nishant): Unified step for version bump, respecting prerelease condition
 
-        # Push changes
+      # Publish version to NPM repository
+      - name: Publish to NPM
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
+        run: yarn publish --verbose --access public --tag "$RELEASE_TAG"
+
+      # Push changes only after a successful publish, so a failed publish
+      # never leaves a chore(release) commit/tag behind on the branch.
       - name: Push CHANGELOG.md and created release tag
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -103,9 +110,3 @@ jobs:
           git push --follow-tags origin "${GITHUB_REF_NAME}"
 
         # Note(Nishant): Push to selected branch, not hardcoded master
-
-      # Publish version to NPM repository
-      - name: Publish to NPM
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
-        run: yarn publish --verbose --access public --tag "$RELEASE_TAG"

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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.33](https://github.com/spaced-out/ui-design-system/compare/v0.6.32...v0.6.33) (2026-09-15)
+
+
+### Bug Fixes
+
+* **chore-release:** commit version update only after successful npm publish ([#503](https://github.com/spaced-out/ui-design-system/issues/503)) ([3e89b88](https://github.com/spaced-out/ui-design-system/commit/3e89b88492fb0461fb5e9ddf32481f13005e0633))
+* **truncated-text-with-tooltip:** re-attach ResizeObserver when truncated node changes ([#502](https://github.com/spaced-out/ui-design-system/issues/502)) ([5305ba6](https://github.com/spaced-out/ui-design-system/commit/5305ba6fceb6643f8432b4c8bd85c07ff25d4c4b))
+
+### [0.6.32](https://github.com/spaced-out/ui-design-system/compare/v0.6.31...v0.6.32) (2026-09-04)
+
+### [0.6.31](https://github.com/spaced-out/ui-design-system/compare/v0.6.30...v0.6.31) (2026-08-31)
+
+### [0.6.30](https://github.com/spaced-out/ui-design-system/compare/v0.6.29...v0.6.30) (2026-08-24)
+
+
+### Bug Fixes
+
+* **date-range-picker:** fixed year selection edge case behavior ([#499](https://github.com/spaced-out/ui-design-system/issues/499)) ([1bd840a](https://github.com/spaced-out/ui-design-system/commit/1bd840a70254127afe77d8e26905475395505189))
+
 ### [0.6.29](https://github.com/spaced-out/ui-design-system/compare/v0.6.28...v0.6.29) (2026-08-20)
 
 

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAEV,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,WAAW,CAAC;AAsBnB,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,OAAO,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,IAAI,CAAC,iBAAiB,CAClD,oBAAoB,EACpB,cAAc,CA2Of,CAAC"}
+{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAEV,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,WAAW,CAAC;AAsBnB,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,OAAO,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,IAAI,CAAC,iBAAiB,CAClD,oBAAoB,EACpB,cAAc,CAuQf,CAAC"}

package/lib/components/DateRangePicker/DateRangePicker.js

@@ -59,19 +59,39 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
   const [rangeStartMonth, setRangeStartMonth] = React.useState(validRangeStartMonth);
   const [rangeEndMonth, setRangeEndMonth] = React.useState(validRangeEndMonth);
   const [isMobileSyncedToStartMonth, setIsMobileSyncedToStartMonth] = React.useState(false);
-  const setRangeStartMonthValidated = date => {
-    if ((0, _dateRangePicker.isSameOrAfter)(date, validMinDate) && (0, _dateRangePicker.isBefore)(date, rangeEndMonth)) {
-      setRangeStartMonth(date);
-    } else {
-      setRangeStartMonth((0, _utils.getMonthEndDate)(validMinDate));
+  const clampMonthToBounds = date => {
+    const minMonth = (0, _utils.getMonthEndDate)(validMinDate);
+    const maxMonth = (0, _utils.getMonthEndDate)(validMaxDate);
+    if ((0, _dateRangePicker.isBefore)(date, minMonth)) {
+      return minMonth;
+    }
+    if ((0, _dateRangePicker.isAfter)(date, maxMonth)) {
+      return maxMonth;
     }
+    return date;
+  };
+
+  // The single mobile calendar drives both month cursors at once, so it only
+  // gets the minDate/maxDate clamp — the ordering is already worked out by
+  // handleMobileCalendarMonthSelection.
+  const setRangeStartMonthInBounds = date => {
+    setRangeStartMonth(clampMonthToBounds(date));
+  };
+  const setRangeEndMonthInBounds = date => {
+    setRangeEndMonth(clampMonthToBounds(date));
+  };
+
+  // The two desktop panes must stay ordered. A month/year pick that would
+  // collide with (or overshoot) the other pane lands on the month adjacent to
+  // it rather than resetting to minDate/maxDate, so the user still arrives in
+  // the year they asked for.
+  const setRangeStartMonthValidated = date => {
+    const latestAllowed = (0, _utils.getMonthEndDate)((0, _utils.getSubtractedDate)(rangeEndMonth, 1, 'M'));
+    setRangeStartMonthInBounds((0, _dateRangePicker.isSameOrAfter)(date, rangeEndMonth, 'month') ? latestAllowed : date);
   };
   const setRangeEndMonthValidated = date => {
-    if ((0, _dateRangePicker.isSameOrBefore)(date, validMaxDate) && (0, _dateRangePicker.isAfter)(date, rangeStartMonth)) {
-      setRangeEndMonth(date);
-    } else {
-      setRangeEndMonth((0, _utils.getMonthEndDate)(validMaxDate));
-    }
+    const earliestAllowed = (0, _utils.getMonthEndDate)((0, _utils.getAddedDate)(rangeStartMonth, 1, 'M'));
+    setRangeEndMonthInBounds((0, _dateRangePicker.isSameOrBefore)(date, rangeStartMonth, 'month') ? earliestAllowed : date);
   };
   const onMonthNavigate = (marker, action) => {
     if (marker === _utils.MARKERS.DATE_RANGE_START) {
@@ -106,8 +126,8 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
       syncToStart = (0, _dateRangePicker.isBefore)(newMonth, rangeEndMonth);
       [start, end] = syncToStart ? [newMonth, validMaxDate] : [(0, _utils.getSubtractedDate)(newMonth, 1, 'M'), newMonth];
     }
-    setRangeStartMonthValidated(start);
-    setRangeEndMonthValidated(end);
+    setRangeStartMonthInBounds(start);
+    setRangeEndMonthInBounds(end);
     setIsMobileSyncedToStartMonth(syncToStart);
   };
   const handleMobileMonthSelection = date => {

package/lib/components/DateRangePicker/DateRangeWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangeWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAE,qBAAqB,EAAC,MAAM,WAAW,CAAC;AAChE,OAAO,EAML,OAAO,EACP,iBAAiB,EAClB,MAAM,WAAW,CAAC;AAkEnB,UAAU,qBAAqB;IAC7B,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC5C,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE;QACR,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,EAC9C,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;IACF,sBAAsB,EAAE;QACtB,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAkSD,eAAO,MAAM,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,CACnD,qBAAqB,EACrB,cAAc,CAkHf,CAAC"}
+{"version":3,"file":"DateRangeWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangeWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAE,qBAAqB,EAAC,MAAM,WAAW,CAAC;AAChE,OAAO,EAOL,OAAO,EACP,iBAAiB,EAClB,MAAM,WAAW,CAAC;AAmEnB,UAAU,qBAAqB;IAC7B,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC5C,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE;QACR,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,EAC9C,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;IACF,sBAAsB,EAAE;QACtB,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAkSD,eAAO,MAAM,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,CACnD,qBAAqB,EACrB,cAAc,CAmHf,CAAC"}

package/lib/components/DateRangePicker/DateRangeWrapper.js

@@ -228,7 +228,9 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
     locale,
     testId
   } = _ref4;
-  const canNavigateCloser = _moment.default.utc(rangeStartMonth).year() !== _moment.default.utc(rangeEndMonth).year() || Math.abs(_moment.default.utc(rangeStartMonth).month() - _moment.default.utc(rangeEndMonth).month()) > 1;
+  // True only while the panes are ordered and more than one month apart, so
+  // the chevrons can never push them into (or further past) each other.
+  const canNavigateCloser = (0, _dateRangePicker.isBefore)((0, _utils.getMonthEndDate)((0, _utils.getAddedDate)(rangeStartMonth, 1, 'M')), rangeEndMonth);
   const handleApplyClick = () => {
     const {
       startDate,

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;AAS/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,sBAuF/B,CAAC"}
+{"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"}

package/lib/components/TruncatedTextWithTooltip/TruncatedTextWithTooltip.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.TruncatedTextWithTooltip = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _useWindowSize = require("../../hooks/useWindowSize");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _qa = require("../../utils/qa");
 var _ConditionalWrapper = require("../ConditionalWrapper");
@@ -29,23 +28,32 @@ const TruncatedTextWithTooltip = _ref => {
     wordBreak = 'break-all',
     testId
   } = _ref;
-  const {
-    width
-  } = (0, _useWindowSize.useWindowSize)();
   const [showMouseTip, setShowMouseTip] = React.useState(false);
-  const truncatedRef = React.useRef(null);
+  const [truncatedNode, setTruncatedNode] = React.useState(null);
   const checkIfTextOverflowing = React.useMemo(() => (0, _debounce.default)(() => {
-    if (!wrapText && truncatedRef && truncatedRef.current && truncatedRef.current.scrollHeight > truncatedRef.current.clientHeight) {
+    if (!wrapText && truncatedNode && truncatedNode.scrollHeight > truncatedNode.clientHeight) {
       setShowMouseTip(true);
     } else {
       setShowMouseTip(false);
     }
   }, 200, {
     leading: true
-  }), []);
+  }), [truncatedNode, wrapText]);
   React.useEffect(() => {
     checkIfTextOverflowing();
-  }, [width, line, children, wrapText]);
+  }, [line, children, wrapText, checkIfTextOverflowing]);
+  React.useEffect(() => {
+    if (!truncatedNode) {
+      return undefined;
+    }
+    const observer = new ResizeObserver(() => {
+      checkIfTextOverflowing();
+    });
+    observer.observe(truncatedNode);
+    return () => {
+      observer.disconnect();
+    };
+  }, [truncatedNode, checkIfTextOverflowing]);
   const styles = {
     '--line-clamp': wrapText ? 'unset' : line,
     '--word-break': wordBreak
@@ -94,7 +102,7 @@ const TruncatedTextWithTooltip = _ref => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: (0, _classify.default)(_TruncatedTextWithTooltipModule.default.truncateLineClamp, classNames?.wrapper),
       style: styles,
-      ref: truncatedRef,
+      ref: setTruncatedNode,
       "data-testid": (0, _qa.generateTestId)({
         base: testId,
         slot: 'text'

package/mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/genesis-mcp",
-  "version": "1.0.43",
+  "version": "1.0.45",
   "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.29",
+  "version": "0.6.33",
   "description": "Sense UI components library",
   "author": {
     "name": "Spaced Out"