@trackunit/react-components 1.7.8 → 1.7.13

package/index.cjs.js

@@ -1046,7 +1046,9 @@ const useTimeout = ({ onTimeout, duration }) => {
     const callback = react.useRef(onTimeout);
     const startTimeout = react.useCallback(() => {
         ready.current = false;
-        timeout.current && clearTimeout(timeout.current);
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+        }
         timeout.current = setTimeout(() => {
             ready.current = true;
             callback.current();
@@ -1054,7 +1056,9 @@ const useTimeout = ({ onTimeout, duration }) => {
     }, [duration]);
     const stopTimeout = react.useCallback(() => {
         ready.current = null;
-        timeout.current && clearTimeout(timeout.current);
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+        }
     }, []);
     react.useEffect(() => {
         // Use the latest callback function provided by the parent component.
@@ -1063,7 +1067,9 @@ const useTimeout = ({ onTimeout, duration }) => {
     react.useEffect(() => {
         // Cleanup function to clear the timeout when component unmounts
         return () => {
-            timeout.current && clearTimeout(timeout.current);
+            if (timeout.current) {
+                clearTimeout(timeout.current);
+            }
         };
     }, []);
     return { startTimeout, stopTimeout };
@@ -1681,7 +1687,7 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
  */
 const Breadcrumb = ({ className, dataTestId, breadcrumbItems, back }) => {
     const breadCrumbItemsToJSX = useBreadcrumbItemsToRender(breadcrumbItems);
-    return (jsxRuntime.jsxs("div", { className: cvaBreadcrumb({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(IconButton, { dataTestId: `backButton-${dataTestId}`, icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft", size: "small" }), onClick: typeof back === "function" ? back : () => { }, size: "small", variant: "ghost-neutral" }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(BreadcrumbContainer, { breadcrumbItems: breadCrumbItemsToJSX, dataTestId: dataTestId }) })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaBreadcrumb({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(IconButton, { dataTestId: `backButton-${dataTestId}`, icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft", size: "small" }), onClick: back, size: "small", variant: "ghost-neutral" }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(BreadcrumbContainer, { breadcrumbItems: breadCrumbItemsToJSX, dataTestId: dataTestId }) })] }));
 };
 /**
  * BreadcrumbContainer is a helper component that renders the breadcrumb items based on the screen size.
@@ -2055,7 +2061,7 @@ const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
     const [animating, setAnimating] = react.useState(false);
     const [, copyToClipboard] = usehooksTs.useCopyToClipboard();
     const handleOnClick = () => {
-        copyToClipboard(value);
+        void copyToClipboard(value);
         setAnimating(true);
     };
     return (jsxRuntime.jsx("span", { className: cvaCopyableText({ animating, className }), "data-testid": dataTestId, onAnimationEnd: () => setAnimating(false), onClick: handleOnClick, title: value, children: text }));
@@ -3165,7 +3171,9 @@ const MenuItem = ({ className, dataTestId, label, children, selected, focused, p
     /* Handle tab navigation */
     const handleKeyDown = (e) => {
         if (e.key === "Enter" && onClick && !disabled) {
-            stopPropagation && e.stopPropagation();
+            if (stopPropagation) {
+                e.stopPropagation();
+            }
             // eslint-disable-next-line local-rules/no-typescript-assertion
             onClick(e);
         }
@@ -3178,7 +3186,9 @@ const MenuItem = ({ className, dataTestId, label, children, selected, focused, p
             variant,
             focused,
         }), "data-testid": dataTestId ? `${dataTestId}-menu-item` : "menu-item", id: id, onClick: e => {
-            stopPropagation && e.stopPropagation();
+            if (stopPropagation) {
+                e.stopPropagation();
+            }
             onClick?.(e);
         }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : (tabIndex ?? 0), children: [prefix ? (jsxRuntime.jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxRuntime.jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [children ?? label, optionLabelDescription ? jsxRuntime.jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", optionLabelDescription, ")"] }) : null] })), suffix ? (jsxRuntime.jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled, className: "flex items-center" }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
 };
@@ -3634,7 +3644,7 @@ const cvaSidebarChildContainer = cssClassVarianceUtilities.cvaMerge(["apply", "f
  * A hook used to detect what children are overflowing a container.
  *
  * @param {OverflowItemsOptions} root0  The options for the hook.
- * @param {OverflowItemsOptions.threshold} root0.threshold The threshold for the intersection observer.
+ * @param {number | Array<number>} root0.threshold The threshold for the intersection observer.
  * @returns {object} The overflow items and the ref to the container.
  */
 const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id", children, }) => {
@@ -3644,7 +3654,7 @@ const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id"
     const handleIntersection = react.useCallback(entries => {
         const updatedEntries = {};
         entries.forEach(entry => {
-            // @ts-ignore - suppressImplicitAnyIndexErrors
+            // @ts-expect-error - suppressImplicitAnyIndexErrors
             const targetElementId = entry.target[childUniqueIdentifierAttribute];
             if (targetElementId) {
                 updatedEntries[targetElementId] = entry.isIntersecting ? false : true;
@@ -4037,7 +4047,7 @@ const VirtualizedList = ({ count, rowHeight = 40, pagination, children, classNam
                 scrollParent.removeEventListener("scroll", handleScroll);
             };
         }
-        return () => { };
+        return undefined;
     }, [scrollParent, fetchMoreOnBottomReached]);
     return (jsxRuntime.jsx("div", { className: cvaVirtualizedListContainer({ parentControlledScrollable, className }), "data-testid": dataTestId, ref: containerRef, children: jsxRuntime.jsx("ul", { className: cvaVirtualizedList(), ref: listRef, style: { height: `${getTotalSize()}px`, outline: "none" }, children: getVirtualItems().map(virtualRow => {
                 const isLoaderRow = virtualRow.index > count - 1;
@@ -4055,7 +4065,7 @@ const cvaZStackItem = cssClassVarianceUtilities.cvaMerge(["col-start-1", "col-en
  * Is a good alternative to "position: absolute" that avoids some of the unfortunate side effects of absolute positioning.
  *
  * @param { ZStackProps} props - The props for the  ZStack component
- * @returns {JSX.Element}  ZStack component
+ * @returns {Element}  ZStack component
  */
 const ZStack = ({ children, className, dataTestId }) => {
     return (jsxRuntime.jsx("div", { className: cvaZStackContainer({ className }), "data-testid": dataTestId, children: react.Children.map(children, (child, index) => {

package/index.esm.js

@@ -1044,7 +1044,9 @@ const useTimeout = ({ onTimeout, duration }) => {
     const callback = useRef(onTimeout);
     const startTimeout = useCallback(() => {
         ready.current = false;
-        timeout.current && clearTimeout(timeout.current);
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+        }
         timeout.current = setTimeout(() => {
             ready.current = true;
             callback.current();
@@ -1052,7 +1054,9 @@ const useTimeout = ({ onTimeout, duration }) => {
     }, [duration]);
     const stopTimeout = useCallback(() => {
         ready.current = null;
-        timeout.current && clearTimeout(timeout.current);
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+        }
     }, []);
     useEffect(() => {
         // Use the latest callback function provided by the parent component.
@@ -1061,7 +1065,9 @@ const useTimeout = ({ onTimeout, duration }) => {
     useEffect(() => {
         // Cleanup function to clear the timeout when component unmounts
         return () => {
-            timeout.current && clearTimeout(timeout.current);
+            if (timeout.current) {
+                clearTimeout(timeout.current);
+            }
         };
     }, []);
     return { startTimeout, stopTimeout };
@@ -1679,7 +1685,7 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
  */
 const Breadcrumb = ({ className, dataTestId, breadcrumbItems, back }) => {
     const breadCrumbItemsToJSX = useBreadcrumbItemsToRender(breadcrumbItems);
-    return (jsxs("div", { className: cvaBreadcrumb({ className }), "data-testid": dataTestId, children: [jsx(IconButton, { dataTestId: `backButton-${dataTestId}`, icon: jsx(Icon, { name: "ArrowLeft", size: "small" }), onClick: typeof back === "function" ? back : () => { }, size: "small", variant: "ghost-neutral" }), jsx("div", { children: jsx(BreadcrumbContainer, { breadcrumbItems: breadCrumbItemsToJSX, dataTestId: dataTestId }) })] }));
+    return (jsxs("div", { className: cvaBreadcrumb({ className }), "data-testid": dataTestId, children: [jsx(IconButton, { dataTestId: `backButton-${dataTestId}`, icon: jsx(Icon, { name: "ArrowLeft", size: "small" }), onClick: back, size: "small", variant: "ghost-neutral" }), jsx("div", { children: jsx(BreadcrumbContainer, { breadcrumbItems: breadCrumbItemsToJSX, dataTestId: dataTestId }) })] }));
 };
 /**
  * BreadcrumbContainer is a helper component that renders the breadcrumb items based on the screen size.
@@ -2053,7 +2059,7 @@ const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
     const [animating, setAnimating] = useState(false);
     const [, copyToClipboard] = useCopyToClipboard();
     const handleOnClick = () => {
-        copyToClipboard(value);
+        void copyToClipboard(value);
         setAnimating(true);
     };
     return (jsx("span", { className: cvaCopyableText({ animating, className }), "data-testid": dataTestId, onAnimationEnd: () => setAnimating(false), onClick: handleOnClick, title: value, children: text }));
@@ -3163,7 +3169,9 @@ const MenuItem = ({ className, dataTestId, label, children, selected, focused, p
     /* Handle tab navigation */
     const handleKeyDown = (e) => {
         if (e.key === "Enter" && onClick && !disabled) {
-            stopPropagation && e.stopPropagation();
+            if (stopPropagation) {
+                e.stopPropagation();
+            }
             // eslint-disable-next-line local-rules/no-typescript-assertion
             onClick(e);
         }
@@ -3176,7 +3184,9 @@ const MenuItem = ({ className, dataTestId, label, children, selected, focused, p
             variant,
             focused,
         }), "data-testid": dataTestId ? `${dataTestId}-menu-item` : "menu-item", id: id, onClick: e => {
-            stopPropagation && e.stopPropagation();
+            if (stopPropagation) {
+                e.stopPropagation();
+            }
             onClick?.(e);
         }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : (tabIndex ?? 0), children: [prefix ? (jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [children ?? label, optionLabelDescription ? jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", optionLabelDescription, ")"] }) : null] })), suffix ? (jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled, className: "flex items-center" }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
 };
@@ -3632,7 +3642,7 @@ const cvaSidebarChildContainer = cvaMerge(["apply", "flex", "overflow-hidden", "
  * A hook used to detect what children are overflowing a container.
  *
  * @param {OverflowItemsOptions} root0  The options for the hook.
- * @param {OverflowItemsOptions.threshold} root0.threshold The threshold for the intersection observer.
+ * @param {number | Array<number>} root0.threshold The threshold for the intersection observer.
  * @returns {object} The overflow items and the ref to the container.
  */
 const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id", children, }) => {
@@ -3642,7 +3652,7 @@ const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id"
     const handleIntersection = useCallback(entries => {
         const updatedEntries = {};
         entries.forEach(entry => {
-            // @ts-ignore - suppressImplicitAnyIndexErrors
+            // @ts-expect-error - suppressImplicitAnyIndexErrors
             const targetElementId = entry.target[childUniqueIdentifierAttribute];
             if (targetElementId) {
                 updatedEntries[targetElementId] = entry.isIntersecting ? false : true;
@@ -4035,7 +4045,7 @@ const VirtualizedList = ({ count, rowHeight = 40, pagination, children, classNam
                 scrollParent.removeEventListener("scroll", handleScroll);
             };
         }
-        return () => { };
+        return undefined;
     }, [scrollParent, fetchMoreOnBottomReached]);
     return (jsx("div", { className: cvaVirtualizedListContainer({ parentControlledScrollable, className }), "data-testid": dataTestId, ref: containerRef, children: jsx("ul", { className: cvaVirtualizedList(), ref: listRef, style: { height: `${getTotalSize()}px`, outline: "none" }, children: getVirtualItems().map(virtualRow => {
                 const isLoaderRow = virtualRow.index > count - 1;
@@ -4053,7 +4063,7 @@ const cvaZStackItem = cvaMerge(["col-start-1", "col-end-1", "row-start-1", "row-
  * Is a good alternative to "position: absolute" that avoids some of the unfortunate side effects of absolute positioning.
  *
  * @param { ZStackProps} props - The props for the  ZStack component
- * @returns {JSX.Element}  ZStack component
+ * @returns {Element}  ZStack component
  */
 const ZStack = ({ children, className, dataTestId }) => {
     return (jsx("div", { className: cvaZStackContainer({ className }), "data-testid": dataTestId, children: Children.map(children, (child, index) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.7.8",
+  "version": "1.7.13",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -15,15 +15,15 @@
     "lodash": "4.17.21",
     "@testing-library/react": "16.2.0",
     "@floating-ui/react": "^0.26.25",
-    "@tanstack/react-router": "1.114.29",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.6.7",
-    "@trackunit/css-class-variance-utilities": "1.6.6",
-    "@trackunit/shared-utils": "1.8.6",
-    "@trackunit/ui-icons": "1.6.6",
-    "@trackunit/react-table-pagination": "1.6.6",
-    "@trackunit/react-test-setup": "1.3.6"
+    "@trackunit/ui-design-tokens": "1.6.11",
+    "@trackunit/css-class-variance-utilities": "1.6.11",
+    "@trackunit/shared-utils": "1.8.11",
+    "@trackunit/ui-icons": "1.6.10",
+    "@trackunit/react-table-pagination": "1.6.10",
+    "@trackunit/react-test-setup": "1.3.11",
+    "@tanstack/react-router": "1.114.29"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/EmptyValue/EmptyValue.d.ts

@@ -1,7 +1,6 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
-export interface EmptyValueProps extends CommonProps {
-}
+export type EmptyValueProps = CommonProps;
 /**
  *  Show intentionality in empty values in the UI
  *

package/src/components/Sidebar/useOverflowItems.d.ts

@@ -30,7 +30,7 @@ export type OverflowMap = {
  * A hook used to detect what children are overflowing a container.
  *
  * @param {OverflowItemsOptions} root0  The options for the hook.
- * @param {OverflowItemsOptions.threshold} root0.threshold The threshold for the intersection observer.
+ * @param {number | Array<number>} root0.threshold The threshold for the intersection observer.
  * @returns {object} The overflow items and the ref to the container.
  */
 export declare const useOverflowItems: ({ threshold, childUniqueIdentifierAttribute, children, }: OverflowItemsOptions) => {

package/src/components/ZStack/ZStack.d.ts

@@ -8,6 +8,6 @@ export type ZStackProps = CommonProps & {
  * Is a good alternative to "position: absolute" that avoids some of the unfortunate side effects of absolute positioning.
  *
  * @param { ZStackProps} props - The props for the  ZStack component
- * @returns {JSX.Element}  ZStack component
+ * @returns {Element}  ZStack component
  */
 export declare const ZStack: ({ children, className, dataTestId }: ZStackProps) => import("react/jsx-runtime").JSX.Element;

package/src/test-utils/hooks.d.ts

@@ -1,4 +1,4 @@
-import { RenderHookOptions } from "@testing-library/react";
+import { RenderHookOptions, RenderHookResult } from "@testing-library/react";
 /**
  *  Custom renderHook function to avoid boilerplate
  *
@@ -7,6 +7,6 @@ import { RenderHookOptions } from "@testing-library/react";
  * @param {(props: T) => K} callback - callback function
  * @param {RenderHookOptions<T>} [options] - options
  */
-declare const customRenderHook: <TProps, TReturn>(callback: (props: TProps) => TReturn, options?: RenderHookOptions<TProps>) => import("@testing-library/react").RenderHookResult<TReturn, TProps>;
+declare const customRenderHook: <TProps, TReturn>(callback: (props: TProps) => TReturn, options?: RenderHookOptions<TProps>) => RenderHookResult<TReturn, TProps>;
 export * from "@testing-library/react";
 export { customRenderHook as renderHook };