@ultraviolet/ui 1.27.1 → 1.27.2

package/dist/src/components/Text/index.js

@@ -1,6 +1,7 @@
 import _styled from '@emotion/styled/base';
-import { useState, useRef, useEffect } from 'react';
+import { useRef } from 'react';
 import recursivelyGetChildrenString from '../../helpers/recursivelyGetChildrenString.js';
+import { useIsOverflowing } from '../../hooks/useIsOverflowing.js';
 import capitalize from '../../utils/capitalize.js';
 import { Tooltip } from '../Tooltip/index.js';
 import { jsx } from '@emotion/react/jsx-runtime';
@@ -79,20 +80,11 @@ const Text = _ref2 => {
     'data-testid': dataTestId
   } = _ref2;
   const computedSentiment = sentiment ?? color;
-  const [isTruncated, setIsTruncated] = useState(false);
   const elementRef = useRef(null);
+  const isOverflowing = useIsOverflowing(elementRef);
   const finalStringChildren = recursivelyGetChildrenString(children);
-  useEffect(() => {
-    if (oneLine && elementRef?.current) {
-      const {
-        offsetWidth,
-        scrollWidth
-      } = elementRef.current;
-      setIsTruncated(offsetWidth < scrollWidth);
-    }
-  }, [oneLine]);
   return jsx(Tooltip, {
-    text: oneLine && isTruncated ? finalStringChildren : '',
+    text: oneLine && isOverflowing ? finalStringChildren : '',
     children: jsx(StyledText, {
       ref: elementRef,
       as: as,

package/dist/src/hooks/useIsOverflowing.js

@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * This hook checks if the element has overflow based on the offsetWidth and scrollWidth of the element.
+ */
+const useIsOverflowing = (ref, callback) => {
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  useEffect(() => {
+    const handleResize = () => {
+      if (!ref.current) {
+        return;
+      }
+      const element = ref.current;
+      const hasOverflow = element.clientWidth < element.scrollWidth;
+      setIsOverflowing(hasOverflow);
+      if (callback) callback(hasOverflow);
+    };
+
+    // This will add the function into the browser event queue after the DOM is painted
+    // which is needed to get the correct offsetWidth and scrollWidth
+    setTimeout(() => handleResize(), 0);
+
+    // Listen for resize events
+    window.addEventListener('resize', handleResize);
+
+    // Cleanup the event listener
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [ref, callback]);
+  return isOverflowing;
+};
+
+export { useIsOverflowing };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.27.1",
+  "version": "1.27.2",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {