@trackunit/react-components 1.4.129 → 1.4.133

package/index.cjs.js

@@ -2756,7 +2756,7 @@ const cvaKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "px-4", "py-2", "fl
     },
 });
 const cvaKPITitleText = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap"]);
-const cvaKPIvalueText = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap"], {
+const cvaKPIvalueText = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap", "text-2xl", "font-medium"], {
     variants: {
         variant: {
             small: ["mt-0.5"],
@@ -3217,8 +3217,8 @@ const cvaPageContent = cssClassVarianceUtilities.cvaMerge(["overflow-auto", "pag
     variants: {
         layout: {
             content: "grid-rows-fr",
-            "v-min-fr": ["grid-rows-min-fr"],
-            "h-min-fr": ["grid-cols-min-fr", "sm:grid-cols-1", "sm:grid-rows-min-fr"],
+            "cols-min-fr": ["grid-cols-min-fr"],
+            "rows-min-fr": ["grid-rows-min-fr"],
         },
     },
     defaultVariants: {
@@ -3859,7 +3859,17 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     return (jsxRuntime.jsx("svg", { className: cvaValueBar({ size, className }), "data-testid": dataTestId, role: "img", children: jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { className: cvaValueBarProgress({ fill: "background", className }), "data-testid": "value-bar-svg-rect-0", rx: size === "extraSmall" ? "2" : "5", width: `${barWidth}%` }), jsxRuntime.jsx("rect", { className: cvaValueBarProgress(), "data-testid": "value-bar-svg-rect-1", fill: barFillColor, rx: size === "extraSmall" ? "2" : "5", width: `${score * barWidth}%` }), showValue && size === "large" ? (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor ?? "white", x: "12", y: "23", children: [Number(value.toFixed(1)), unit || ""] })) : null, showValue && size === "small" ? (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor ?? uiDesignTokens.color("NEUTRAL", 400, "CSS"), x: `${barWidth + 2}%`, y: "11", children: [Number(value.toFixed(1)), unit || ""] })) : null] }) }));
 };
 
-const cvaVirtualizedListContainer = cssClassVarianceUtilities.cvaMerge(["h-full", "overflow-auto"]);
+const cvaVirtualizedListContainer = cssClassVarianceUtilities.cvaMerge(["h-full"], {
+    variants: {
+        parentControlledScrollable: {
+            true: [""],
+            false: ["overflow-auto"],
+        },
+    },
+    defaultVariants: {
+        parentControlledScrollable: false,
+    },
+});
 const cvaVirtualizedList = cssClassVarianceUtilities.cvaMerge(["relative"]);
 const cvaVirtualizedListItem = cssClassVarianceUtilities.cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
     variants: {
@@ -3886,18 +3896,43 @@ const cvaVirtualizedListItem = cssClassVarianceUtilities.cvaMerge(["absolute", "
  * @property {loadingIndicator} [loadingIndicator="spinner"] - The type of loading indicator in the list.
  * @property {skeletonLinesHeight} [skeletonLinesHeight="2rem"] - The height of the skeleton lines.
  */
-const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", loadingIndicator = "spinner", skeletonLinesHeight = rowHeight + "px", onRowClick, }) => {
+const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", loadingIndicator = "spinner", skeletonLinesHeight = rowHeight + "px", onRowClick, scrollRef, }) => {
     const containerRef = react.useRef(null);
     const listRef = react.useRef(null);
-    const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize, measureElement } = reactTablePagination.useInfiniteScroll({
-        pagination: pagination || reactTablePagination.noPagination,
-        containerRef,
-        rowSize: pagination?.pageInfo?.hasNextPage && pagination.isLoading ? count + 1 : count,
-        rowHeight,
-    });
-    return (jsxRuntime.jsx("div", { className: cvaVirtualizedListContainer({ className }), "data-testid": dataTestId, 
-        // eslint-disable-next-line local-rules/no-typescript-assertion
-        onScroll: e => fetchMoreOnBottomReached(e.target), ref: containerRef, children: jsxRuntime.jsx("ul", { className: cvaVirtualizedList(), ref: listRef, style: { height: `${getTotalSize()}px`, outline: "none" }, children: getVirtualItems().map(virtualRow => {
+    const [scrollParent, setScrollParent] = react.useState(null);
+    const [parentControlledScrollable, setParentControlledScrollable] = react.useState(false);
+    react.useEffect(() => {
+        if (scrollRef?.current) {
+            setParentControlledScrollable(true);
+            setScrollParent(scrollRef.current);
+        }
+        else {
+            setParentControlledScrollable(false);
+            setScrollParent(containerRef.current);
+        }
+    }, [scrollRef]);
+    const infiniteScrollProps = react.useMemo(() => {
+        return {
+            pagination: pagination || reactTablePagination.noPagination,
+            containerRef: { current: scrollParent },
+            rowSize: pagination?.pageInfo?.hasNextPage && pagination.isLoading ? count + 1 : count,
+            rowHeight,
+        };
+    }, [pagination, scrollParent, count, rowHeight]);
+    const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize, measureElement } = reactTablePagination.useInfiniteScroll(infiniteScrollProps);
+    react.useEffect(() => {
+        if (scrollParent) {
+            const handleScroll = () => {
+                fetchMoreOnBottomReached(scrollParent);
+            };
+            scrollParent.addEventListener("scroll", handleScroll);
+            return () => {
+                scrollParent.removeEventListener("scroll", handleScroll);
+            };
+        }
+        return () => { };
+    }, [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;
                 return (jsxRuntime.jsx("li", { className: cvaVirtualizedListItem({ separator }), "data-index": virtualRow.index, onClick: onRowClick ? () => onRowClick(virtualRow.index) : undefined, ref: measureElement, style: {
                         transform: `translateY(${virtualRow.start}px)`,

package/index.esm.js

@@ -17,7 +17,7 @@ import omit from 'lodash/omit';
 import { twMerge } from 'tailwind-merge';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { Trigger, Content, List, Root } from '@radix-ui/react-tabs';
-import { useInfiniteScroll, noPagination } from '@trackunit/react-table-pagination';
+import { noPagination, useInfiniteScroll } from '@trackunit/react-table-pagination';
 
 const docs = {
     source: {
@@ -2754,7 +2754,7 @@ const cvaKPI = cvaMerge(["w-full", "px-4", "py-2", "flex", "flex-col", "gap-1"],
     },
 });
 const cvaKPITitleText = cvaMerge(["truncate", "whitespace-nowrap"]);
-const cvaKPIvalueText = cvaMerge(["truncate", "whitespace-nowrap"], {
+const cvaKPIvalueText = cvaMerge(["truncate", "whitespace-nowrap", "text-2xl", "font-medium"], {
     variants: {
         variant: {
             small: ["mt-0.5"],
@@ -3215,8 +3215,8 @@ const cvaPageContent = cvaMerge(["overflow-auto", "page-content", "grid", "gap-r
     variants: {
         layout: {
             content: "grid-rows-fr",
-            "v-min-fr": ["grid-rows-min-fr"],
-            "h-min-fr": ["grid-cols-min-fr", "sm:grid-cols-1", "sm:grid-rows-min-fr"],
+            "cols-min-fr": ["grid-cols-min-fr"],
+            "rows-min-fr": ["grid-rows-min-fr"],
         },
     },
     defaultVariants: {
@@ -3857,7 +3857,17 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     return (jsx("svg", { className: cvaValueBar({ size, className }), "data-testid": dataTestId, role: "img", children: jsxs("g", { children: [jsx("rect", { className: cvaValueBarProgress({ fill: "background", className }), "data-testid": "value-bar-svg-rect-0", rx: size === "extraSmall" ? "2" : "5", width: `${barWidth}%` }), jsx("rect", { className: cvaValueBarProgress(), "data-testid": "value-bar-svg-rect-1", fill: barFillColor, rx: size === "extraSmall" ? "2" : "5", width: `${score * barWidth}%` }), showValue && size === "large" ? (jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor ?? "white", x: "12", y: "23", children: [Number(value.toFixed(1)), unit || ""] })) : null, showValue && size === "small" ? (jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor ?? color("NEUTRAL", 400, "CSS"), x: `${barWidth + 2}%`, y: "11", children: [Number(value.toFixed(1)), unit || ""] })) : null] }) }));
 };
 
-const cvaVirtualizedListContainer = cvaMerge(["h-full", "overflow-auto"]);
+const cvaVirtualizedListContainer = cvaMerge(["h-full"], {
+    variants: {
+        parentControlledScrollable: {
+            true: [""],
+            false: ["overflow-auto"],
+        },
+    },
+    defaultVariants: {
+        parentControlledScrollable: false,
+    },
+});
 const cvaVirtualizedList = cvaMerge(["relative"]);
 const cvaVirtualizedListItem = cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
     variants: {
@@ -3884,18 +3894,43 @@ const cvaVirtualizedListItem = cvaMerge(["absolute", "top-0", "left-0", "w-full"
  * @property {loadingIndicator} [loadingIndicator="spinner"] - The type of loading indicator in the list.
  * @property {skeletonLinesHeight} [skeletonLinesHeight="2rem"] - The height of the skeleton lines.
  */
-const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", loadingIndicator = "spinner", skeletonLinesHeight = rowHeight + "px", onRowClick, }) => {
+const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", loadingIndicator = "spinner", skeletonLinesHeight = rowHeight + "px", onRowClick, scrollRef, }) => {
     const containerRef = useRef(null);
     const listRef = useRef(null);
-    const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize, measureElement } = useInfiniteScroll({
-        pagination: pagination || noPagination,
-        containerRef,
-        rowSize: pagination?.pageInfo?.hasNextPage && pagination.isLoading ? count + 1 : count,
-        rowHeight,
-    });
-    return (jsx("div", { className: cvaVirtualizedListContainer({ className }), "data-testid": dataTestId, 
-        // eslint-disable-next-line local-rules/no-typescript-assertion
-        onScroll: e => fetchMoreOnBottomReached(e.target), ref: containerRef, children: jsx("ul", { className: cvaVirtualizedList(), ref: listRef, style: { height: `${getTotalSize()}px`, outline: "none" }, children: getVirtualItems().map(virtualRow => {
+    const [scrollParent, setScrollParent] = useState(null);
+    const [parentControlledScrollable, setParentControlledScrollable] = useState(false);
+    useEffect(() => {
+        if (scrollRef?.current) {
+            setParentControlledScrollable(true);
+            setScrollParent(scrollRef.current);
+        }
+        else {
+            setParentControlledScrollable(false);
+            setScrollParent(containerRef.current);
+        }
+    }, [scrollRef]);
+    const infiniteScrollProps = useMemo(() => {
+        return {
+            pagination: pagination || noPagination,
+            containerRef: { current: scrollParent },
+            rowSize: pagination?.pageInfo?.hasNextPage && pagination.isLoading ? count + 1 : count,
+            rowHeight,
+        };
+    }, [pagination, scrollParent, count, rowHeight]);
+    const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize, measureElement } = useInfiniteScroll(infiniteScrollProps);
+    useEffect(() => {
+        if (scrollParent) {
+            const handleScroll = () => {
+                fetchMoreOnBottomReached(scrollParent);
+            };
+            scrollParent.addEventListener("scroll", handleScroll);
+            return () => {
+                scrollParent.removeEventListener("scroll", handleScroll);
+            };
+        }
+        return () => { };
+    }, [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;
                 return (jsx("li", { className: cvaVirtualizedListItem({ separator }), "data-index": virtualRow.index, onClick: onRowClick ? () => onRowClick(virtualRow.index) : undefined, ref: measureElement, style: {
                         transform: `translateY(${virtualRow.start}px)`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.4.129",
+  "version": "1.4.133",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -18,11 +18,12 @@
     "@tanstack/react-router": "1.114.29",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.3.107",
-    "@trackunit/css-class-variance-utilities": "1.3.107",
-    "@trackunit/shared-utils": "1.5.107",
-    "@trackunit/ui-icons": "1.3.109",
-    "@trackunit/react-table-pagination": "1.3.108"
+    "@trackunit/ui-design-tokens": "1.3.110",
+    "@trackunit/css-class-variance-utilities": "1.3.110",
+    "@trackunit/shared-utils": "1.5.110",
+    "@trackunit/ui-icons": "1.3.112",
+    "@trackunit/react-table-pagination": "1.3.111",
+    "@trackunit/react-test-setup": "1.0.0"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

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

@@ -2,5 +2,5 @@ export declare const cvaPage: (props?: ({
     layout?: "content" | "header-content" | "sidebar-content" | "none" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaPageContent: (props?: ({
-    layout?: "content" | "v-min-fr" | "h-min-fr" | null | undefined;
+    layout?: "content" | "cols-min-fr" | "rows-min-fr" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Page/PageContent.d.ts

@@ -1,10 +1,16 @@
+import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { ReactNode } from "react";
 import { CommonProps } from "../../common";
+import { cvaPageContent } from "./Page.variants";
+/**
+ * The layout of the page.
+ */
+export type PageContentLayout = VariantProps<typeof cvaPageContent>["layout"];
 /**
  * The props for the page content component.
  */
 interface PageContentProps extends CommonProps {
-    layout: "content" | "h-min-fr" | "v-min-fr";
+    layout: PageContentLayout;
     children?: ReactNode;
 }
 /**

package/src/components/VirtualizedList/VirtualizedList.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { RelayPagination } from "@trackunit/react-table-pagination";
-import { ReactElement } from "react";
+import { ReactElement, RefObject } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { cvaVirtualizedListItem } from "./VirtualizedList.variants";
 type Separator = NonNullable<VariantProps<typeof cvaVirtualizedListItem>["separator"]>;
@@ -14,6 +14,10 @@ export interface VirtualizedListProps extends CommonProps {
     loadingIndicator?: LoadingIndicator;
     skeletonLinesHeight?: string;
     onRowClick?: (index: number) => void;
+    /**
+     * The ref for the scroll container, only provide if you want to use the scroll event to fetch more data, on a different container than the list itself
+     */
+    scrollRef?: RefObject<HTMLDivElement | null>;
 }
 /**
  * Render a performant virtualized list of items. Optionally with infinite scrolling.
@@ -26,5 +30,5 @@ export interface VirtualizedListProps extends CommonProps {
  * @property {loadingIndicator} [loadingIndicator="spinner"] - The type of loading indicator in the list.
  * @property {skeletonLinesHeight} [skeletonLinesHeight="2rem"] - The height of the skeleton lines.
  */
-export declare const VirtualizedList: ({ count, rowHeight, pagination, children, className, dataTestId, separator, loadingIndicator, skeletonLinesHeight, onRowClick, }: VirtualizedListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VirtualizedList: ({ count, rowHeight, pagination, children, className, dataTestId, separator, loadingIndicator, skeletonLinesHeight, onRowClick, scrollRef, }: VirtualizedListProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,6 @@
-export declare const cvaVirtualizedListContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaVirtualizedListContainer: (props?: ({
+    parentControlledScrollable?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaVirtualizedList: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaVirtualizedListItem: (props?: ({
     separator?: "alternating" | "line" | "none" | "space" | null | undefined;