@trackunit/react-components 1.7.7 → 1.7.12

package/index.cjs.js

@@ -51,24 +51,24 @@ const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-gri
             default: "text-current",
             black: "text-black",
             white: "text-white",
-            unused: "text-unused-500",
+            unused: "text-unused-400",
             utilized: "text-utilized-600",
             heavily_utilized: "text-heavily_utilized-500",
-            unknown_utilization: "text-unknown-600",
+            unknown_utilization: "text-unknown_utilization-600",
             site_area: "text-site_area-600",
-            site_classic_poi: "text-site_classic_poi-500",
-            site_classic_zone: "text-site_classic_zone-500",
+            site_classic_poi: "text-site_classic_poi-600",
+            site_classic_zone: "text-site_classic_zone-600",
             site_depot: "text-site_depot-500",
             site_work_place: "text-site_work_place-600",
             site_construction_site: "text-site_construction_site-500",
-            site_unknown: "text-site_unknown-500",
-            on_rent: "text-on_rent-600",
-            returned: "text-returned-600",
-            available: "text-available-600",
-            pickup_ready: "text-pickup_ready-600",
-            transfer: "text-transfer-400",
-            in_repair: "text-in_repair-600",
-            other_rental_status: "text-other_rental_status-600",
+            site_unknown: "text-site_unknown-600",
+            on_rent: "text-on_rent-400",
+            returned: "text-returned-500",
+            available: "text-available-500",
+            pickup_ready: "text-pickup_ready-500",
+            transfer: "text-transfer-300",
+            in_repair: "text-in_repair-400",
+            other_rental_status: "text-other_rental_status-500",
         },
         size: {
             small: "w-4",
@@ -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 }));
@@ -2230,9 +2236,12 @@ const cvaHighlight = cssClassVarianceUtilities.cvaMerge([
     "truncate",
     "max-w-full",
     "w-fit",
-    "text-xs",
 ], {
     variants: {
+        size: {
+            small: ["text-xs"],
+            medium: ["text-sm"],
+        },
         color: {
             info: ["bg-info-100", "text-info-700"],
             success: ["bg-success-100", "text-success-700"],
@@ -2242,6 +2251,7 @@ const cvaHighlight = cssClassVarianceUtilities.cvaMerge([
         },
     },
     defaultVariants: {
+        size: "small",
         color: "warning",
     },
 });
@@ -2258,8 +2268,8 @@ const cvaHighlightText = cssClassVarianceUtilities.cvaMerge(["truncate"]);
  * @param {HighlightProps} props - The props for the highlight component
  * @returns {ReactElement} highlight component
  */
-const Highlight = ({ className, dataTestId, children, color = "warning", ref }) => {
-    return (jsxRuntime.jsx("div", { className: cvaHighlight({ className, color }), "data-testid": dataTestId, ref: ref, children: jsxRuntime.jsx("span", { className: cvaHighlightText(), children: children }) }));
+const Highlight = ({ className, dataTestId, children, size = "small", color = "warning", ref, }) => {
+    return (jsxRuntime.jsx("div", { className: cvaHighlight({ className, size, color }), "data-testid": dataTestId, ref: ref, children: jsxRuntime.jsx("span", { className: cvaHighlightText(), children: children }) }));
 };
 Highlight.displayName = "Highlight";
 
@@ -3161,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);
         }
@@ -3174,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] }));
 };
@@ -3630,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, }) => {
@@ -3640,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;
@@ -4033,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;
@@ -4051,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

@@ -49,24 +49,24 @@ const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative"], {
             default: "text-current",
             black: "text-black",
             white: "text-white",
-            unused: "text-unused-500",
+            unused: "text-unused-400",
             utilized: "text-utilized-600",
             heavily_utilized: "text-heavily_utilized-500",
-            unknown_utilization: "text-unknown-600",
+            unknown_utilization: "text-unknown_utilization-600",
             site_area: "text-site_area-600",
-            site_classic_poi: "text-site_classic_poi-500",
-            site_classic_zone: "text-site_classic_zone-500",
+            site_classic_poi: "text-site_classic_poi-600",
+            site_classic_zone: "text-site_classic_zone-600",
             site_depot: "text-site_depot-500",
             site_work_place: "text-site_work_place-600",
             site_construction_site: "text-site_construction_site-500",
-            site_unknown: "text-site_unknown-500",
-            on_rent: "text-on_rent-600",
-            returned: "text-returned-600",
-            available: "text-available-600",
-            pickup_ready: "text-pickup_ready-600",
-            transfer: "text-transfer-400",
-            in_repair: "text-in_repair-600",
-            other_rental_status: "text-other_rental_status-600",
+            site_unknown: "text-site_unknown-600",
+            on_rent: "text-on_rent-400",
+            returned: "text-returned-500",
+            available: "text-available-500",
+            pickup_ready: "text-pickup_ready-500",
+            transfer: "text-transfer-300",
+            in_repair: "text-in_repair-400",
+            other_rental_status: "text-other_rental_status-500",
         },
         size: {
             small: "w-4",
@@ -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 }));
@@ -2228,9 +2234,12 @@ const cvaHighlight = cvaMerge([
     "truncate",
     "max-w-full",
     "w-fit",
-    "text-xs",
 ], {
     variants: {
+        size: {
+            small: ["text-xs"],
+            medium: ["text-sm"],
+        },
         color: {
             info: ["bg-info-100", "text-info-700"],
             success: ["bg-success-100", "text-success-700"],
@@ -2240,6 +2249,7 @@ const cvaHighlight = cvaMerge([
         },
     },
     defaultVariants: {
+        size: "small",
         color: "warning",
     },
 });
@@ -2256,8 +2266,8 @@ const cvaHighlightText = cvaMerge(["truncate"]);
  * @param {HighlightProps} props - The props for the highlight component
  * @returns {ReactElement} highlight component
  */
-const Highlight = ({ className, dataTestId, children, color = "warning", ref }) => {
-    return (jsx("div", { className: cvaHighlight({ className, color }), "data-testid": dataTestId, ref: ref, children: jsx("span", { className: cvaHighlightText(), children: children }) }));
+const Highlight = ({ className, dataTestId, children, size = "small", color = "warning", ref, }) => {
+    return (jsx("div", { className: cvaHighlight({ className, size, color }), "data-testid": dataTestId, ref: ref, children: jsx("span", { className: cvaHighlightText(), children: children }) }));
 };
 Highlight.displayName = "Highlight";
 
@@ -3159,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);
         }
@@ -3172,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] }));
 };
@@ -3628,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, }) => {
@@ -3638,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;
@@ -4031,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;
@@ -4049,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.7",
+  "version": "1.7.12",
   "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.10",
+    "@trackunit/css-class-variance-utilities": "1.6.10",
+    "@trackunit/shared-utils": "1.8.10",
+    "@trackunit/ui-icons": "1.6.9",
+    "@trackunit/react-table-pagination": "1.6.9",
+    "@trackunit/react-test-setup": "1.3.10",
+    "@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/Highlight/Highlight.d.ts

@@ -2,6 +2,10 @@ import { ReactNode, Ref } from "react";
 import { CommonProps, Size } from "../../common";
 export type HighlightSize = Extract<Size, "small" | "medium">;
 export interface HighlightProps extends CommonProps {
+    /**
+     * The size of the highlight. Allowed values: "small" (text-xs), "medium" (text-sm).
+     */
+    size?: HighlightSize;
     /**
      * The color of the highlight. Allowed values: "primary", "success", "warning", "danger", "unknown".
      */
@@ -27,6 +31,6 @@ export interface HighlightProps extends CommonProps {
  * @returns {ReactElement} highlight component
  */
 export declare const Highlight: {
-    ({ className, dataTestId, children, color, ref }: HighlightProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, dataTestId, children, size, color, ref, }: HighlightProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/src/components/Highlight/Highlight.variants.d.ts

@@ -1,4 +1,5 @@
 export declare const cvaHighlight: (props?: ({
+    size?: "small" | "medium" | null | undefined;
     color?: "info" | "success" | "warning" | "danger" | "unknown" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaHighlightText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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 };