@box/blueprint-web 7.33.4 → 7.34.0

package/lib-esm/index.d.ts

@@ -68,4 +68,5 @@ export * from './util-components/scrollable-container/scrollable-container';
 export * from './util-components/text-with-info-badge';
 export * from './utils/keyboardUtils';
 export * from './utils/useBreakpoint';
+export * from './utils/useFullTextTooltip';
 export * from './visually-hidden';

package/lib-esm/index.js

@@ -82,6 +82,7 @@ export { ScrollContext, ScrollableContainer, useScroll, useScrollContext } from
 export { TextWithInfoBadge } from './util-components/text-with-info-badge/text-with-info-badge.js';
 export { isCtrlKeyPressed, isDeleteKeyPressed, keys } from './utils/keyboardUtils.js';
 export { Breakpoint, useBreakpoint } from './utils/useBreakpoint.js';
+export { useFullTextTooltip } from './utils/useFullTextTooltip.js';
 export { VisuallyHidden } from './visually-hidden/visually-hidden.js';
 export { useNotification } from './primitives/notification/notification-provider.js';
 export { useTabs } from './primitives/tabs/use-tabs.js';

package/lib-esm/utils/useFullTextTooltip.js

@@ -1,5 +1,6 @@
 import { useState, useEffect, Fragment } from 'react';
 import { Tooltip } from '../tooltip/tooltip.js';
+import { debounce } from './debounce.js';
 
 const useFullTextTooltip = ({
   ref,
@@ -9,13 +10,32 @@ const useFullTextTooltip = ({
 }) => {
   const [isOverflowing, setIsOverflowing] = useState(false);
   useEffect(() => {
-    if (!ref?.current || skipOverflowCheck) {
-      return;
+    const checkIfOverflowing = () => {
+      const element = ref?.current;
+      if (element && !skipOverflowCheck) {
+        setIsOverflowing(element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth);
+      }
+    };
+    // Create debounced version of checkIfOverflowing
+    const debouncedCheckIfOverflowing = debounce(checkIfOverflowing, 100);
+    const element = ref?.current;
+    let resizeObserver = null;
+    if (element) {
+      // Create a ResizeObserver to observe the size of the element
+      resizeObserver = new ResizeObserver(debouncedCheckIfOverflowing);
+      resizeObserver.observe(element);
     }
-    if (ref.current.scrollHeight > ref.current.clientHeight || ref.current.scrollWidth > ref.current.clientWidth) {
-      setIsOverflowing(true);
-    }
-  }, [ref, skipOverflowCheck]);
+    // Initial check
+    debouncedCheckIfOverflowing();
+    // Cleanup function to disconnect the observer and clear debounced timeouts
+    return () => {
+      if (resizeObserver && element) {
+        resizeObserver.unobserve(element);
+        resizeObserver.disconnect();
+      }
+      debouncedCheckIfOverflowing.clear();
+    };
+  }, [ref, skipOverflowCheck, textValue, children]);
   const Wrapper = isOverflowing ? Tooltip : Fragment;
   const wrapperProps = isOverflowing ? {
     content: textValue ?? children

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.33.4",
+    "version": "7.34.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "44327d93e1b72fc57a60ca5bcd8c1d59e53d5939",
+    "gitHead": "a7a7ecec4025edfd157a90e5a0700b7baef995a1",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {