@trackunit/react-components 1.0.8 → 1.0.9

package/index.cjs.js

@@ -290,18 +290,19 @@ const PackageNameStoryComponent = ({ packageJSON }) => {
 /**
  * Hook to detect if text content is wrapping to multiple lines
  *
- * @param {HTMLElement | null} element - The element to check for text wrapping
+ * @param {RefObject<HTMLElement>} ref - The ref to the element to check for text wrapping
  * @returns {boolean} True if the text spans multiple lines
  */
-const useIsTextWrapping = (element) => {
+const useIsTextWrapping = (ref) => {
+    var _a, _b;
     const [isWrapping, setIsWrapping] = React.useState(false);
     React.useEffect(() => {
-        if (!element) {
+        if (!ref.current) {
             setIsWrapping(false);
             return;
         }
-        setIsWrapping(element.clientHeight > element.scrollHeight / 2);
-    }, [element]);
+        setIsWrapping(ref.current.clientHeight > ref.current.scrollHeight / 2);
+    }, [(_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientHeight, (_b = ref.current) === null || _b === void 0 ? void 0 : _b.scrollHeight, ref]);
     return isWrapping;
 };
 
@@ -776,7 +777,7 @@ const cvaAlertIconContainer = cssClassVarianceUtilities.cvaMerge(["self-start",
 const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, }) => {
     const ref = React__namespace.useRef(null);
     const titleRef = React__namespace.useRef(null);
-    const isWrapping = useIsTextWrapping(titleRef.current);
+    const isWrapping = useIsTextWrapping(titleRef);
     React__namespace.useEffect(() => {
         var _a, _b;
         if (autoScroll) {
@@ -1248,18 +1249,19 @@ const useIsFullscreen = () => {
 /**
  * Check if text is cut off.
  *
- * @param {HTMLElement| null} element The element to check.
+ * @param {RefObject<HTMLElement>} ref The ref to the element to check.
  * @returns {boolean} True if the text is cut off.
  */
-const useIsTextCutOff = (element) => {
+const useIsTextCutOff = (ref) => {
+    var _a, _b;
     const [isTextCutOff, setIsTextCutOff] = React.useState(false);
     React.useEffect(() => {
-        if (!element) {
+        if (!ref.current) {
             setIsTextCutOff(false);
             return;
         }
-        setIsTextCutOff(element.offsetWidth < element.scrollWidth);
-    }, [element]);
+        setIsTextCutOff(ref.current.offsetWidth < ref.current.scrollWidth);
+    }, [(_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth, (_b = ref.current) === null || _b === void 0 ? void 0 : _b.scrollWidth, ref]);
     return isTextCutOff;
 };
 

package/index.esm.js

@@ -270,18 +270,19 @@ const PackageNameStoryComponent = ({ packageJSON }) => {
 /**
  * Hook to detect if text content is wrapping to multiple lines
  *
- * @param {HTMLElement | null} element - The element to check for text wrapping
+ * @param {RefObject<HTMLElement>} ref - The ref to the element to check for text wrapping
  * @returns {boolean} True if the text spans multiple lines
  */
-const useIsTextWrapping = (element) => {
+const useIsTextWrapping = (ref) => {
+    var _a, _b;
     const [isWrapping, setIsWrapping] = useState(false);
     useEffect(() => {
-        if (!element) {
+        if (!ref.current) {
             setIsWrapping(false);
             return;
         }
-        setIsWrapping(element.clientHeight > element.scrollHeight / 2);
-    }, [element]);
+        setIsWrapping(ref.current.clientHeight > ref.current.scrollHeight / 2);
+    }, [(_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientHeight, (_b = ref.current) === null || _b === void 0 ? void 0 : _b.scrollHeight, ref]);
     return isWrapping;
 };
 
@@ -756,7 +757,7 @@ const cvaAlertIconContainer = cvaMerge(["self-start", "shrink-0", "grid", "w-min
 const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, }) => {
     const ref = React.useRef(null);
     const titleRef = React.useRef(null);
-    const isWrapping = useIsTextWrapping(titleRef.current);
+    const isWrapping = useIsTextWrapping(titleRef);
     React.useEffect(() => {
         var _a, _b;
         if (autoScroll) {
@@ -1228,18 +1229,19 @@ const useIsFullscreen = () => {
 /**
  * Check if text is cut off.
  *
- * @param {HTMLElement| null} element The element to check.
+ * @param {RefObject<HTMLElement>} ref The ref to the element to check.
  * @returns {boolean} True if the text is cut off.
  */
-const useIsTextCutOff = (element) => {
+const useIsTextCutOff = (ref) => {
+    var _a, _b;
     const [isTextCutOff, setIsTextCutOff] = useState(false);
     useEffect(() => {
-        if (!element) {
+        if (!ref.current) {
             setIsTextCutOff(false);
             return;
         }
-        setIsTextCutOff(element.offsetWidth < element.scrollWidth);
-    }, [element]);
+        setIsTextCutOff(ref.current.offsetWidth < ref.current.scrollWidth);
+    }, [(_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth, (_b = ref.current) === null || _b === void 0 ? void 0 : _b.scrollWidth, ref]);
     return isTextCutOff;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/hooks/useIsTextCutOff.d.ts

@@ -1,7 +1,8 @@
+import { RefObject } from "react";
 /**
  * Check if text is cut off.
  *
- * @param {HTMLElement| null} element The element to check.
+ * @param {RefObject<HTMLElement>} ref The ref to the element to check.
  * @returns {boolean} True if the text is cut off.
  */
-export declare const useIsTextCutOff: (element: HTMLElement | null) => boolean;
+export declare const useIsTextCutOff: (ref: RefObject<HTMLElement>) => boolean;

package/src/hooks/useIsTextWrapping.d.ts

@@ -1,7 +1,8 @@
+import { RefObject } from "react";
 /**
  * Hook to detect if text content is wrapping to multiple lines
  *
- * @param {HTMLElement | null} element - The element to check for text wrapping
+ * @param {RefObject<HTMLElement>} ref - The ref to the element to check for text wrapping
  * @returns {boolean} True if the text spans multiple lines
  */
-export declare const useIsTextWrapping: (element: HTMLElement | null) => boolean;
+export declare const useIsTextWrapping: (ref: RefObject<HTMLElement>) => boolean;