@trackunit/react-components 1.4.4 → 1.4.5

package/index.cjs.js

@@ -864,24 +864,18 @@ const Badge = ({ color = "primary", className, count, max, hideZero = false, dat
  * Custom hook to handle click outside events.
  *
  * @param {RefObject<HTMLElement> | Array<RefObject<HTMLElement>>} el - The reference(s) to the element(s) to watch for click outside events.
- * @param {object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
+ * @param {object} [options={}] - Configuration options.
+ * @param {Function} [options.onClick] - The event handler for the click outside event.
  * @param {boolean} [options.active=true] - Whether the click outside event listener should be active.
- * @param {Function} [onClick] - The event handler for the click outside event.
  */
-const useClickOutside = (el, options = {}, onClick) => {
+const useClickOutside = (el, options) => {
     const els = Array.isArray(el) ? el : [el];
-    let active = true;
-    if (!onClick && typeof options === "function") {
-        onClick = options;
-    }
-    else if (typeof options === "object") {
-        active = options.active !== undefined ? options.active : active;
-    }
+    const active = options.active !== undefined ? options.active : true;
     const handler = (ev) => {
         // eslint-disable-next-line local-rules/no-typescript-assertion
         const target = ev.target;
         if (els.every(ref => !ref.current || !ref.current.contains(target))) {
-            onClick && onClick(ev);
+            options.onClick(ev);
         }
     };
     const cleanup = () => window.removeEventListener("click", handler);
@@ -1069,8 +1063,10 @@ const useContinuousTimeout = ({ onTimeout, onMaxRetries, duration, maxRetries })
     return {
         startTimeouts,
         stopTimeouts,
-        retries: retries.current,
         isRunning,
+        get retries() {
+            return retries.current;
+        },
     };
 };
 
@@ -1194,31 +1190,35 @@ const useGeometry = (ref) => {
         if (!ref.current) {
             return;
         }
-        if (!resizeObserver.current) {
-            resizeObserver.current = new ResizeObserver(entries => {
-                for (const entry of entries) {
-                    const rect = entry.target.getBoundingClientRect();
-                    setGeometry({
-                        width: rect.width,
-                        height: rect.height,
-                        top: rect.top,
-                        bottom: rect.bottom,
-                        left: rect.left,
-                        right: rect.right,
-                        x: rect.x,
-                        y: rect.y,
-                    });
-                }
-            });
-        }
-        resizeObserver.current.observe(ref.current);
+        const observe = () => {
+            if (!resizeObserver.current) {
+                resizeObserver.current = new ResizeObserver(entries => {
+                    for (const entry of entries) {
+                        const rect = entry.target.getBoundingClientRect();
+                        setGeometry({
+                            width: rect.width,
+                            height: rect.height,
+                            top: rect.top,
+                            bottom: rect.bottom,
+                            left: rect.left,
+                            right: rect.right,
+                            x: rect.x,
+                            y: rect.y,
+                        });
+                    }
+                });
+            }
+            if (ref.current) {
+                resizeObserver.current.observe(ref.current);
+            }
+        };
+        observe();
         return () => {
             if (resizeObserver.current) {
                 resizeObserver.current.disconnect();
             }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [ref.current]);
+    }, [ref]);
     return geometry;
 };
 
@@ -1248,12 +1248,11 @@ const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debo
  * @returns {boolean} Returns true if it is the first render, false otherwise.
  */
 const useIsFirstRender = () => {
-    const renderRef = react.useRef(true);
-    if (renderRef.current === true) {
-        renderRef.current = false;
-        return true;
-    }
-    return renderRef.current;
+    const [isFirstRender, setIsFirstRender] = react.useState(true);
+    react.useEffect(() => {
+        setIsFirstRender(false);
+    }, []);
+    return isFirstRender;
 };
 
 /**
@@ -2513,7 +2512,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
  * **Do use** tooltips to expose names of icon buttons that lack visual labels, when more information is useful in helping a user understand the context, when an element needs additional explanation, or use when defining a term or inline item.
  *
  * **Do not use** tooltips to include information that is necessary for the user to complete their task. Use helper text that is always visible and accessible for vital information.
- 
+ *
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {JSX.Element} Tooltip component
  */
@@ -2524,7 +2523,14 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
         placement: placement === "auto" ? "bottom" : placement,
         open: isOpen,
         onOpenChange: setIsOpen,
-        middleware: [react$1.offset(8), react$1.arrow({ element: arrowRef })],
+        middleware: [
+            react$1.offset(8),
+            react$1.arrow({
+                get element() {
+                    return arrowRef;
+                },
+            }),
+        ],
         whileElementsMounted: react$1.autoUpdate,
     });
     const { isMounted } = react$1.useTransitionStatus(context);

package/index.esm.js

@@ -862,24 +862,18 @@ const Badge = ({ color = "primary", className, count, max, hideZero = false, dat
  * Custom hook to handle click outside events.
  *
  * @param {RefObject<HTMLElement> | Array<RefObject<HTMLElement>>} el - The reference(s) to the element(s) to watch for click outside events.
- * @param {object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
+ * @param {object} [options={}] - Configuration options.
+ * @param {Function} [options.onClick] - The event handler for the click outside event.
  * @param {boolean} [options.active=true] - Whether the click outside event listener should be active.
- * @param {Function} [onClick] - The event handler for the click outside event.
  */
-const useClickOutside = (el, options = {}, onClick) => {
+const useClickOutside = (el, options) => {
     const els = Array.isArray(el) ? el : [el];
-    let active = true;
-    if (!onClick && typeof options === "function") {
-        onClick = options;
-    }
-    else if (typeof options === "object") {
-        active = options.active !== undefined ? options.active : active;
-    }
+    const active = options.active !== undefined ? options.active : true;
     const handler = (ev) => {
         // eslint-disable-next-line local-rules/no-typescript-assertion
         const target = ev.target;
         if (els.every(ref => !ref.current || !ref.current.contains(target))) {
-            onClick && onClick(ev);
+            options.onClick(ev);
         }
     };
     const cleanup = () => window.removeEventListener("click", handler);
@@ -1067,8 +1061,10 @@ const useContinuousTimeout = ({ onTimeout, onMaxRetries, duration, maxRetries })
     return {
         startTimeouts,
         stopTimeouts,
-        retries: retries.current,
         isRunning,
+        get retries() {
+            return retries.current;
+        },
     };
 };
 
@@ -1192,31 +1188,35 @@ const useGeometry = (ref) => {
         if (!ref.current) {
             return;
         }
-        if (!resizeObserver.current) {
-            resizeObserver.current = new ResizeObserver(entries => {
-                for (const entry of entries) {
-                    const rect = entry.target.getBoundingClientRect();
-                    setGeometry({
-                        width: rect.width,
-                        height: rect.height,
-                        top: rect.top,
-                        bottom: rect.bottom,
-                        left: rect.left,
-                        right: rect.right,
-                        x: rect.x,
-                        y: rect.y,
-                    });
-                }
-            });
-        }
-        resizeObserver.current.observe(ref.current);
+        const observe = () => {
+            if (!resizeObserver.current) {
+                resizeObserver.current = new ResizeObserver(entries => {
+                    for (const entry of entries) {
+                        const rect = entry.target.getBoundingClientRect();
+                        setGeometry({
+                            width: rect.width,
+                            height: rect.height,
+                            top: rect.top,
+                            bottom: rect.bottom,
+                            left: rect.left,
+                            right: rect.right,
+                            x: rect.x,
+                            y: rect.y,
+                        });
+                    }
+                });
+            }
+            if (ref.current) {
+                resizeObserver.current.observe(ref.current);
+            }
+        };
+        observe();
         return () => {
             if (resizeObserver.current) {
                 resizeObserver.current.disconnect();
             }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [ref.current]);
+    }, [ref]);
     return geometry;
 };
 
@@ -1246,12 +1246,11 @@ const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debo
  * @returns {boolean} Returns true if it is the first render, false otherwise.
  */
 const useIsFirstRender = () => {
-    const renderRef = useRef(true);
-    if (renderRef.current === true) {
-        renderRef.current = false;
-        return true;
-    }
-    return renderRef.current;
+    const [isFirstRender, setIsFirstRender] = useState(true);
+    useEffect(() => {
+        setIsFirstRender(false);
+    }, []);
+    return isFirstRender;
 };
 
 /**
@@ -2511,7 +2510,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
  * **Do use** tooltips to expose names of icon buttons that lack visual labels, when more information is useful in helping a user understand the context, when an element needs additional explanation, or use when defining a term or inline item.
  *
  * **Do not use** tooltips to include information that is necessary for the user to complete their task. Use helper text that is always visible and accessible for vital information.
- 
+ *
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {JSX.Element} Tooltip component
  */
@@ -2522,7 +2521,14 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
         placement: placement === "auto" ? "bottom" : placement,
         open: isOpen,
         onOpenChange: setIsOpen,
-        middleware: [offset(8), arrow({ element: arrowRef })],
+        middleware: [
+            offset(8),
+            arrow({
+                get element() {
+                    return arrowRef;
+                },
+            }),
+        ],
         whileElementsMounted: autoUpdate,
     });
     const { isMounted } = useTransitionStatus(context);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -19,11 +19,11 @@
     "@tanstack/react-router": "1.47.1",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.3.4",
-    "@trackunit/css-class-variance-utilities": "1.3.4",
-    "@trackunit/shared-utils": "1.5.4",
-    "@trackunit/ui-icons": "1.3.4",
-    "@trackunit/react-table-pagination": "1.3.4"
+    "@trackunit/ui-design-tokens": "1.3.5",
+    "@trackunit/css-class-variance-utilities": "1.3.5",
+    "@trackunit/shared-utils": "1.5.5",
+    "@trackunit/ui-icons": "1.3.5",
+    "@trackunit/react-table-pagination": "1.3.5"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/Tooltip/Tooltip.d.ts

@@ -41,7 +41,7 @@ export interface TooltipProps extends CommonProps {
  * **Do use** tooltips to expose names of icon buttons that lack visual labels, when more information is useful in helping a user understand the context, when an element needs additional explanation, or use when defining a term or inline item.
  *
  * **Do not use** tooltips to include information that is necessary for the user to complete their task. Use helper text that is always visible and accessible for vital information.
- 
+ *
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {JSX.Element} Tooltip component
  */

package/src/hooks/useClickOutside.d.ts

@@ -3,10 +3,11 @@ import { RefObject } from "react";
  * Custom hook to handle click outside events.
  *
  * @param {RefObject<HTMLElement> | Array<RefObject<HTMLElement>>} el - The reference(s) to the element(s) to watch for click outside events.
- * @param {object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
+ * @param {object} [options={}] - Configuration options.
+ * @param {Function} [options.onClick] - The event handler for the click outside event.
  * @param {boolean} [options.active=true] - Whether the click outside event listener should be active.
- * @param {Function} [onClick] - The event handler for the click outside event.
  */
-export declare const useClickOutside: (el: RefObject<HTMLElement> | RefObject<HTMLElement>[], options?: {
+export declare const useClickOutside: (el: RefObject<HTMLElement> | RefObject<HTMLElement>[], options: {
+    onClick: (ev: MouseEvent) => void;
     active?: boolean;
-} | ((ev: MouseEvent) => void), onClick?: (ev: MouseEvent) => void) => void;
+}) => void;

package/src/hooks/useContinuousTimeout.d.ts

@@ -16,7 +16,7 @@ interface UseContinuousTimeoutProps extends UseTimeoutProps {
 export declare const useContinuousTimeout: ({ onTimeout, onMaxRetries, duration, maxRetries }: UseContinuousTimeoutProps) => {
     startTimeouts: () => void;
     stopTimeouts: () => void;
-    retries: number;
     isRunning: boolean;
+    readonly retries: number;
 };
 export {};