@trackunit/react-components 0.1.286 → 0.1.289

package/index.cjs.js

@@ -23,6 +23,7 @@ var reactRouter = require('@tanstack/react-router');
 var reactHelmetAsync = require('react-helmet-async');
 var reactTabs = require('@radix-ui/react-tabs');
 var dateFns = require('date-fns');
+var reactTablePagination = require('@trackunit/react-table-pagination');
 var isEqual = require('lodash/isEqual');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -3210,39 +3211,6 @@ const useModal = ({ closeOnOutsideClick } = {}) => {
     };
 };
 
-const cvaPage = cssClassVarianceUtilities.cvaMerge(["grid", "h-full"], {
-    variants: {
-        layout: {
-            content: ["grid-rows-1"],
-            "header-content": "grid-rows-min-fr",
-            "sidebar-content": ["grid-cols-[360px_minmax(0,1fr)]", "grid-rows-1"],
-            none: [],
-        },
-    },
-    defaultVariants: {
-        layout: "none",
-    },
-});
-const cvaPageContent = cssClassVarianceUtilities.cvaMerge(["overflow-auto", "p-4", "md:p-6", "lg:p-8"]);
-
-/**
- * Renders the page component. Adds padding and layout to the page.
- */
-const Page = ({ layout, className, children, dataTestId }) => {
-    return (jsxRuntime.jsx("div", { className: cvaPage({ className, layout }), "data-testid": dataTestId || "page", children: children }));
-};
-
-/**
- * Renders the content of a page.
- * Applies padding to content. To be used within a <Page/>
- *
- * @param {PageContentProps} props - The component props.
- * @returns {React.ReactNode} - The rendered component.
- */
-const PageContent = ({ className, children, dataTestId }) => {
-    return (jsxRuntime.jsx("div", { className: cvaPageContent({ className }), "data-testid": dataTestId || "page-content", children: children }));
-};
-
 const cvaNotice = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
 const cvaNoticeLabel = cssClassVarianceUtilities.cvaMerge(["pl-1", "pr-1", "font-medium", "text-sm"], {
     variants: {
@@ -3298,6 +3266,39 @@ const Notice = (_a) => {
     return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", Object.assign({ "aria-label": label, className: cvaNotice(), "data-testid": dataTestId }, rest, { children: [jsxRuntime.jsx("div", { className: cvaNoticeIcon({ color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: icon }), label !== undefined && withLabel ? (jsxRuntime.jsx("div", { className: cvaNoticeLabel({ color }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] })) }));
 };
 
+const cvaPage = cssClassVarianceUtilities.cvaMerge(["grid", "h-full"], {
+    variants: {
+        layout: {
+            content: ["grid-rows-1"],
+            "header-content": "grid-rows-min-fr",
+            "sidebar-content": ["grid-cols-[360px_minmax(0,1fr)]", "grid-rows-1"],
+            none: [],
+        },
+    },
+    defaultVariants: {
+        layout: "none",
+    },
+});
+const cvaPageContent = cssClassVarianceUtilities.cvaMerge(["overflow-auto", "p-4", "md:p-6", "lg:p-8"]);
+
+/**
+ * Renders the page component. Adds padding and layout to the page.
+ */
+const Page = ({ layout, className, children, dataTestId }) => {
+    return (jsxRuntime.jsx("div", { className: cvaPage({ className, layout }), "data-testid": dataTestId || "page", children: children }));
+};
+
+/**
+ * Renders the content of a page.
+ * Applies padding to content. To be used within a <Page/>
+ *
+ * @param {PageContentProps} props - The component props.
+ * @returns {React.ReactNode} - The rendered component.
+ */
+const PageContent = ({ className, children, dataTestId }) => {
+    return (jsxRuntime.jsx("div", { className: cvaPageContent({ className }), "data-testid": dataTestId || "page-content", children: children }));
+};
+
 const cvaPageHeaderContainer = cssClassVarianceUtilities.cvaMerge(["bg-white", "tu-page-header"], {
     variants: {
         withBorder: {
@@ -3828,6 +3829,49 @@ 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" }), "data-testid": "value-bar-svg-rect-0", rx: "5", width: `${barWidth}%` }), jsxRuntime.jsx("rect", { className: cvaValueBarProgress(), "data-testid": "value-bar-svg-rect-1", fill: barFillColor, rx: "5", width: `${score * barWidth}%` }), showValue && size === "large" ? (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white", x: "12", y: "23", children: [Number(value.toFixed(1)), unit || ""] })) : null, showValue && size === "small" ? (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor !== null && valueColor !== void 0 ? 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 cvaVirtualizedList = cssClassVarianceUtilities.cvaMerge(["relative"]);
+const cvaVirtualizedListItem = cssClassVarianceUtilities.cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
+    variants: {
+        separator: {
+            alternating: ["even:bg-slate-100"],
+            line: ["[&:not(:last-child)]:border-b", "border-gray-200"],
+            none: "",
+        },
+    },
+    defaultVariants: {
+        separator: "none",
+    },
+});
+
+/**
+ * Render a performant virtualized list of items. Optionally with infinite scrolling.
+ *
+ * @property {number} count - The total number of items in the list.
+ * @property {number} [rowHeight="40"] - The estimated height of each row in the list.
+ * @property {RelayPagination | undefined} pagination - Pagination configuration for the list.
+ * @property {separator} [separator="line"] - The separator style between items in the list.
+ * @property {(index: number) => JSX.Element} children - A function that takes an index and returns the JSX element to be rendered at said index.
+ */
+const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", }) => {
+    var _a;
+    const containerRef = React.useRef(null);
+    const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize, measureElement } = reactTablePagination.useInfiniteScroll({
+        pagination: pagination || reactTablePagination.noPagination,
+        containerRef,
+        rowSize: ((_a = pagination === null || pagination === void 0 ? void 0 : pagination.pageInfo) === null || _a === void 0 ? void 0 : _a.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(), style: { height: `${getTotalSize()}px` }, children: getVirtualItems().map(virtualRow => {
+                const isLoaderRow = virtualRow.index > count - 1;
+                return (jsxRuntime.jsx("li", { className: cvaVirtualizedListItem({ separator }), "data-index": virtualRow.index, ref: measureElement, style: {
+                        transform: `translateY(${virtualRow.start}px)`,
+                    }, children: isLoaderRow ? ((pagination === null || pagination === void 0 ? void 0 : pagination.isLoading) ? (jsxRuntime.jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" })) : null) : (children(virtualRow.index)) }, virtualRow.key));
+            }) }) }));
+};
+
 const cvaWidgetBodyDensityContainer = cssClassVarianceUtilities.cvaMerge([
     "@container",
     "flex",
@@ -4463,6 +4507,7 @@ exports.Timeline = Timeline;
 exports.TimelineElement = TimelineElement;
 exports.Tooltip = Tooltip;
 exports.ValueBar = ValueBar;
+exports.VirtualizedList = VirtualizedList;
 exports.WidgetBody = WidgetBody;
 exports.cvaButton = cvaButton;
 exports.cvaButtonPrefixSuffix = cvaButtonPrefixSuffix;

package/index.esm.js

@@ -20,6 +20,7 @@ import { Link, useBlocker } from '@tanstack/react-router';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { Trigger, Content, List, Root } from '@radix-ui/react-tabs';
 import { format, formatDistance } from 'date-fns';
+import { useInfiniteScroll, noPagination } from '@trackunit/react-table-pagination';
 import isEqual from 'lodash/isEqual';
 
 const docs = {
@@ -3179,39 +3180,6 @@ const useModal = ({ closeOnOutsideClick } = {}) => {
     };
 };
 
-const cvaPage = cvaMerge(["grid", "h-full"], {
-    variants: {
-        layout: {
-            content: ["grid-rows-1"],
-            "header-content": "grid-rows-min-fr",
-            "sidebar-content": ["grid-cols-[360px_minmax(0,1fr)]", "grid-rows-1"],
-            none: [],
-        },
-    },
-    defaultVariants: {
-        layout: "none",
-    },
-});
-const cvaPageContent = cvaMerge(["overflow-auto", "p-4", "md:p-6", "lg:p-8"]);
-
-/**
- * Renders the page component. Adds padding and layout to the page.
- */
-const Page = ({ layout, className, children, dataTestId }) => {
-    return (jsx("div", { className: cvaPage({ className, layout }), "data-testid": dataTestId || "page", children: children }));
-};
-
-/**
- * Renders the content of a page.
- * Applies padding to content. To be used within a <Page/>
- *
- * @param {PageContentProps} props - The component props.
- * @returns {React.ReactNode} - The rendered component.
- */
-const PageContent = ({ className, children, dataTestId }) => {
-    return (jsx("div", { className: cvaPageContent({ className }), "data-testid": dataTestId || "page-content", children: children }));
-};
-
 const cvaNotice = cvaMerge(["flex", "items-center"]);
 const cvaNoticeLabel = cvaMerge(["pl-1", "pr-1", "font-medium", "text-sm"], {
     variants: {
@@ -3267,6 +3235,39 @@ const Notice = (_a) => {
     return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", Object.assign({ "aria-label": label, className: cvaNotice(), "data-testid": dataTestId }, rest, { children: [jsx("div", { className: cvaNoticeIcon({ color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: icon }), label !== undefined && withLabel ? (jsx("div", { className: cvaNoticeLabel({ color }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] })) }));
 };
 
+const cvaPage = cvaMerge(["grid", "h-full"], {
+    variants: {
+        layout: {
+            content: ["grid-rows-1"],
+            "header-content": "grid-rows-min-fr",
+            "sidebar-content": ["grid-cols-[360px_minmax(0,1fr)]", "grid-rows-1"],
+            none: [],
+        },
+    },
+    defaultVariants: {
+        layout: "none",
+    },
+});
+const cvaPageContent = cvaMerge(["overflow-auto", "p-4", "md:p-6", "lg:p-8"]);
+
+/**
+ * Renders the page component. Adds padding and layout to the page.
+ */
+const Page = ({ layout, className, children, dataTestId }) => {
+    return (jsx("div", { className: cvaPage({ className, layout }), "data-testid": dataTestId || "page", children: children }));
+};
+
+/**
+ * Renders the content of a page.
+ * Applies padding to content. To be used within a <Page/>
+ *
+ * @param {PageContentProps} props - The component props.
+ * @returns {React.ReactNode} - The rendered component.
+ */
+const PageContent = ({ className, children, dataTestId }) => {
+    return (jsx("div", { className: cvaPageContent({ className }), "data-testid": dataTestId || "page-content", children: children }));
+};
+
 const cvaPageHeaderContainer = cvaMerge(["bg-white", "tu-page-header"], {
     variants: {
         withBorder: {
@@ -3797,6 +3798,49 @@ 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" }), "data-testid": "value-bar-svg-rect-0", rx: "5", width: `${barWidth}%` }), jsx("rect", { className: cvaValueBarProgress(), "data-testid": "value-bar-svg-rect-1", fill: barFillColor, rx: "5", width: `${score * barWidth}%` }), showValue && size === "large" ? (jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white", x: "12", y: "23", children: [Number(value.toFixed(1)), unit || ""] })) : null, showValue && size === "small" ? (jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor !== null && valueColor !== void 0 ? 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 cvaVirtualizedList = cvaMerge(["relative"]);
+const cvaVirtualizedListItem = cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
+    variants: {
+        separator: {
+            alternating: ["even:bg-slate-100"],
+            line: ["[&:not(:last-child)]:border-b", "border-gray-200"],
+            none: "",
+        },
+    },
+    defaultVariants: {
+        separator: "none",
+    },
+});
+
+/**
+ * Render a performant virtualized list of items. Optionally with infinite scrolling.
+ *
+ * @property {number} count - The total number of items in the list.
+ * @property {number} [rowHeight="40"] - The estimated height of each row in the list.
+ * @property {RelayPagination | undefined} pagination - Pagination configuration for the list.
+ * @property {separator} [separator="line"] - The separator style between items in the list.
+ * @property {(index: number) => JSX.Element} children - A function that takes an index and returns the JSX element to be rendered at said index.
+ */
+const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", }) => {
+    var _a;
+    const containerRef = useRef(null);
+    const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize, measureElement } = useInfiniteScroll({
+        pagination: pagination || noPagination,
+        containerRef,
+        rowSize: ((_a = pagination === null || pagination === void 0 ? void 0 : pagination.pageInfo) === null || _a === void 0 ? void 0 : _a.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(), style: { height: `${getTotalSize()}px` }, children: getVirtualItems().map(virtualRow => {
+                const isLoaderRow = virtualRow.index > count - 1;
+                return (jsx("li", { className: cvaVirtualizedListItem({ separator }), "data-index": virtualRow.index, ref: measureElement, style: {
+                        transform: `translateY(${virtualRow.start}px)`,
+                    }, children: isLoaderRow ? ((pagination === null || pagination === void 0 ? void 0 : pagination.isLoading) ? (jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" })) : null) : (children(virtualRow.index)) }, virtualRow.key));
+            }) }) }));
+};
+
 const cvaWidgetBodyDensityContainer = cvaMerge([
     "@container",
     "flex",
@@ -4381,4 +4425,4 @@ const useVisibilityChange = ({ onChange, targetState = "hidden" }) => {
     }, [onChange, targetState]);
 };
 
-export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tooltip, ValueBar, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };
+export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.286",
+  "version": "0.1.289",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -25,7 +25,8 @@
     "@floating-ui/react": "^0.26.6",
     "@tanstack/react-router": "1.19.1",
     "string-ts": "^2.0.0",
-    "tailwind-merge": "^2.0.0"
+    "tailwind-merge": "^2.0.0",
+    "@trackunit/react-table-pagination": "*"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { VariantProps } from "@trackunit/css-class-variance-utilities";
+import { RelayPagination } from "@trackunit/react-table-pagination";
+import { CommonProps } from "../../common/CommonProps";
+import { cvaVirtualizedListItem } from "./VirtualizedList.variants";
+type Separator = NonNullable<VariantProps<typeof cvaVirtualizedListItem>["separator"]>;
+export interface VirtualizedListProps extends CommonProps {
+    count: number;
+    rowHeight?: number;
+    pagination?: RelayPagination;
+    children: (index: number) => JSX.Element;
+    separator?: Separator;
+}
+/**
+ * Render a performant virtualized list of items. Optionally with infinite scrolling.
+ *
+ * @property {number} count - The total number of items in the list.
+ * @property {number} [rowHeight="40"] - The estimated height of each row in the list.
+ * @property {RelayPagination | undefined} pagination - Pagination configuration for the list.
+ * @property {separator} [separator="line"] - The separator style between items in the list.
+ * @property {(index: number) => JSX.Element} children - A function that takes an index and returns the JSX element to be rendered at said index.
+ */
+export declare const VirtualizedList: ({ count, rowHeight, pagination, children, className, dataTestId, separator, }: VirtualizedListProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+export declare const cvaVirtualizedListContainer: (props?: 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" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/index.d.ts

@@ -12,8 +12,8 @@ export * from "./Icon/Icon";
 export * from "./Indicator";
 export * from "./Menu";
 export * from "./Modal";
-export * from "./Page";
 export * from "./Notice";
+export * from "./Page";
 export * from "./PageHeader";
 export * from "./Pagination/Pagination";
 export * from "./Popover";
@@ -34,5 +34,6 @@ export * from "./Text";
 export * from "./Timeline/Timeline";
 export * from "./Tooltip";
 export * from "./ValueBar";
+export * from "./VirtualizedList/VirtualizedList";
 export * from "./Widget";
 export * from "./buttons";