@box/blueprint-web 9.1.2 → 9.1.3

package/lib-esm/utils/useFullTextTooltip.d.ts

@@ -1,16 +1,15 @@
-import { type MutableRefObject, type ReactNode } from 'react';
-export declare const useFullTextTooltip: ({ ref, children, textValue, skipOverflowCheck, }: {
-    ref: MutableRefObject<null> | MutableRefObject<HTMLSpanElement>;
-    children?: ReactNode;
-    textValue?: string;
-    skipOverflowCheck?: boolean;
-}) => {
-    Wrapper: ((props: import("../tooltip").TooltipProps) => import("react/jsx-runtime").JSX.Element) | import("react").ExoticComponent<{
-        children?: ReactNode | undefined;
-    }>;
-    wrapperProps: {
-        content: ReactNode;
-    } | {
-        content?: undefined;
+import { type ComponentType, type MutableRefObject, type ReactNode } from 'react';
+import { type TooltipProps } from '../tooltip';
+interface UseFullTextTooltip {
+    (args: {
+        ref: MutableRefObject<HTMLSpanElement | null>;
+        children?: ReactNode;
+        textValue?: string;
+        skipOverflowCheck?: boolean;
+    }): {
+        Wrapper: ComponentType<TooltipProps>;
+        wrapperProps: Record<symbol, never>;
     };
-};
+}
+export declare const useFullTextTooltip: UseFullTextTooltip;
+export {};

package/lib-esm/utils/useFullTextTooltip.js

@@ -1,48 +1,23 @@
-import { useState, useEffect, Fragment } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { Fragment } from 'react';
 import { Tooltip } from '../tooltip/tooltip.js';
-import { debounce } from './debounce.js';
+import { useIsEllipsized } from './useIsEllipsized.js';
 
 const useFullTextTooltip = ({
   ref,
   children,
   textValue,
-  skipOverflowCheck
+  skipOverflowCheck = false
 }) => {
-  const [isOverflowing, setIsOverflowing] = useState(false);
-  useEffect(() => {
-    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);
-    }
-    // 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 ? {
+  const isEllipsized = useIsEllipsized(ref);
+  const shouldWrapInTooltip = isEllipsized && !skipOverflowCheck;
+  const Wrapper = shouldWrapInTooltip ? props => jsx(Tooltip, {
+    ...props,
     content: textValue ?? children
-  } : {};
+  }) : Fragment;
   return {
     Wrapper,
-    wrapperProps
+    wrapperProps: {}
   };
 };
 

package/lib-esm/utils/useIsEllipsized.d.ts

@@ -0,0 +1 @@
+export declare const useIsEllipsized: (ref: React.RefObject<HTMLElement>) => boolean;

package/lib-esm/utils/useIsEllipsized.js

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+import noop from 'lodash/noop';
+
+const useIsEllipsized = ref => {
+  const [isEllipsized, setIsEllipsized] = useState(false);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return noop;
+    }
+    let rafID;
+    const checkIfEllipsized = () => {
+      rafID = requestAnimationFrame(() => {
+        const isOverflowing = element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+        setIsEllipsized(isOverflowing);
+      });
+    };
+    const observer = new ResizeObserver(checkIfEllipsized);
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(rafID);
+    };
+  }, [ref, isEllipsized]);
+  return isEllipsized;
+};
+
+export { useIsEllipsized };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "9.1.2",
+    "version": "9.1.3",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "422c5a76116e547d351ab83cdab9d97b4d7ce621",
+    "gitHead": "9a853cf5c13b885475cc76128d6eebeb1de4788a",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {