@trackunit/react-components 1.8.23 → 1.8.27

package/index.cjs.js

@@ -17,9 +17,9 @@ var reactRouter = require('@tanstack/react-router');
 var react$1 = require('@floating-ui/react');
 var omit = require('lodash/omit');
 var tailwindMerge = require('tailwind-merge');
+var reactTablePagination = require('@trackunit/react-table-pagination');
 var reactHelmetAsync = require('react-helmet-async');
 var reactTabs = require('@radix-ui/react-tabs');
-var reactTablePagination = require('@trackunit/react-table-pagination');
 
 const docs = {
     source: {
@@ -3067,6 +3067,92 @@ const cvaCardBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["grid",
     },
 });
 
+const cvaListContainer = cssClassVarianceUtilities.cvaMerge(["h-full"], {
+    variants: {
+        parentControlledScrollable: {
+            true: [""],
+            false: ["overflow-auto"],
+        },
+    },
+    defaultVariants: {
+        parentControlledScrollable: false,
+    },
+});
+const cvaList = cssClassVarianceUtilities.cvaMerge(["relative"]);
+const cvaListItem$1 = 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: "",
+            space: "[&:not(:last-child)]:pb-0.5",
+        },
+    },
+    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) =>ReactElement} children - A function that takes an index and returns the JSX element to be rendered at said index.
+ * @property {loadingIndicator} [loadingIndicator="spinner"] - The type of loading indicator in the list.
+ * @property {skeletonLinesHeight} [skeletonLinesHeight="2rem"] - The height of the skeleton lines.
+ */
+const List = ({ 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 [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 !== undefined &&
+                pagination.pageInfo !== undefined &&
+                pagination.pageInfo.hasNextPage === true &&
+                pagination.isLoading === true
+                ? 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 undefined;
+    }, [scrollParent, fetchMoreOnBottomReached]);
+    return (jsxRuntime.jsx("div", { className: cvaListContainer({ parentControlledScrollable, className }), "data-testid": dataTestId, ref: containerRef, children: jsxRuntime.jsx("ul", { className: cvaList(), ref: listRef, style: { height: `${getTotalSize()}px`, outline: "none" }, children: getVirtualItems().map(virtualRow => {
+                const isLoaderRow = virtualRow.index > count - 1;
+                return (jsxRuntime.jsx("li", { className: cvaListItem$1({ separator }), "data-index": virtualRow.index, onClick: onRowClick !== undefined ? () => onRowClick(virtualRow.index) : undefined, ref: measureElement, style: {
+                        transform: `translateY(${virtualRow.start}px)`,
+                    }, tabIndex: -1, children: isLoaderRow ? (pagination?.isLoading === true ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [loadingIndicator === "spinner" && jsxRuntime.jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" }), loadingIndicator === "skeletonLines" && (jsxRuntime.jsx(SkeletonLines, { height: skeletonLinesHeight, lines: 3, width: "full" }))] })) : null) : (children(virtualRow.index)) }, virtualRow.key));
+            }) }) }));
+};
+
 /**
  * Applies standardized interaction-related styles to an element.
  *
@@ -4285,92 +4371,6 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     return (jsxRuntime.jsxs("span", { className: "relative flex items-center gap-2", "data-testid": dataTestId, children: [jsxRuntime.jsx("progress", { "aria-label": valueText, className: cvaValueBar({ className, size }), max: 100, style: { color: barFillColor }, value: score * 100 }), showValue && (size === "small" || size === "large") ? (jsxRuntime.jsx(Text, { className: cvaValueBarText({ size }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, children: jsxRuntime.jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
 };
 
-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: {
-        separator: {
-            alternating: ["even:bg-slate-100"],
-            line: ["[&:not(:last-child)]:border-b", "border-gray-200"],
-            none: "",
-            space: "[&:not(:last-child)]:pb-0.5",
-        },
-    },
-    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) =>ReactElement} children - A function that takes an index and returns the JSX element to be rendered at said index.
- * @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, scrollRef, }) => {
-    const containerRef = react.useRef(null);
-    const listRef = react.useRef(null);
-    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 !== undefined &&
-                pagination.pageInfo !== undefined &&
-                pagination.pageInfo.hasNextPage === true &&
-                pagination.isLoading === true
-                ? 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 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;
-                return (jsxRuntime.jsx("li", { className: cvaVirtualizedListItem({ separator }), "data-index": virtualRow.index, onClick: onRowClick !== undefined ? () => onRowClick(virtualRow.index) : undefined, ref: measureElement, style: {
-                        transform: `translateY(${virtualRow.start}px)`,
-                    }, tabIndex: -1, children: isLoaderRow ? (pagination?.isLoading === true ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [loadingIndicator === "spinner" && jsxRuntime.jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" }), loadingIndicator === "skeletonLines" && (jsxRuntime.jsx(SkeletonLines, { height: skeletonLinesHeight, lines: 3, width: "full" }))] })) : null) : (children(virtualRow.index)) }, virtualRow.key));
-            }) }) }));
-};
-
 const cvaZStackContainer = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-1", "grid-rows-1"]);
 const cvaZStackItem = cssClassVarianceUtilities.cvaMerge(["col-start-1", "col-end-1", "row-start-1", "row-end-2"]);
 
@@ -4441,6 +4441,7 @@ exports.IconButton = IconButton;
 exports.Indicator = Indicator;
 exports.KPI = KPI;
 exports.KPICard = KPICard;
+exports.List = List;
 exports.ListItem = ListItem;
 exports.MenuDivider = MenuDivider;
 exports.MenuItem = MenuItem;
@@ -4478,7 +4479,6 @@ exports.Text = Text;
 exports.ToggleGroup = ToggleGroup;
 exports.Tooltip = Tooltip;
 exports.ValueBar = ValueBar;
-exports.VirtualizedList = VirtualizedList;
 exports.ZStack = ZStack;
 exports.cvaButton = cvaButton;
 exports.cvaButtonPrefixSuffix = cvaButtonPrefixSuffix;
@@ -4494,6 +4494,9 @@ exports.cvaIndicatorIconBackground = cvaIndicatorIconBackground;
 exports.cvaIndicatorLabel = cvaIndicatorLabel;
 exports.cvaIndicatorPing = cvaIndicatorPing;
 exports.cvaInteractableItem = cvaInteractableItem;
+exports.cvaList = cvaList;
+exports.cvaListContainer = cvaListContainer;
+exports.cvaListItem = cvaListItem$1;
 exports.cvaMenuItem = cvaMenuItem;
 exports.cvaMenuItemLabel = cvaMenuItemLabel;
 exports.cvaMenuItemPrefix = cvaMenuItemPrefix;
@@ -4507,9 +4510,6 @@ exports.cvaToggleGroupWithSlidingBackground = cvaToggleGroupWithSlidingBackgroun
 exports.cvaToggleItem = cvaToggleItem;
 exports.cvaToggleItemContent = cvaToggleItemContent;
 exports.cvaToggleItemText = cvaToggleItemText;
-exports.cvaVirtualizedList = cvaVirtualizedList;
-exports.cvaVirtualizedListContainer = cvaVirtualizedListContainer;
-exports.cvaVirtualizedListItem = cvaVirtualizedListItem;
 exports.cvaZStackContainer = cvaZStackContainer;
 exports.cvaZStackItem = cvaZStackItem;
 exports.docs = docs;

package/index.esm.js

@@ -15,9 +15,9 @@ import { Link, useBlocker } from '@tanstack/react-router';
 import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, FloatingPortal, useMergeRefs, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
 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 { noPagination, useInfiniteScroll } from '@trackunit/react-table-pagination';
+import { HelmetProvider, Helmet } from 'react-helmet-async';
+import { Trigger, Content, List as List$1, Root } from '@radix-ui/react-tabs';
 
 const docs = {
     source: {
@@ -3065,6 +3065,92 @@ const cvaCardBodyDensityContainer = cvaMerge(["grid", "grid-cols-[1fr_auto]"], {
     },
 });
 
+const cvaListContainer = cvaMerge(["h-full"], {
+    variants: {
+        parentControlledScrollable: {
+            true: [""],
+            false: ["overflow-auto"],
+        },
+    },
+    defaultVariants: {
+        parentControlledScrollable: false,
+    },
+});
+const cvaList = cvaMerge(["relative"]);
+const cvaListItem$1 = 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: "",
+            space: "[&:not(:last-child)]:pb-0.5",
+        },
+    },
+    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) =>ReactElement} children - A function that takes an index and returns the JSX element to be rendered at said index.
+ * @property {loadingIndicator} [loadingIndicator="spinner"] - The type of loading indicator in the list.
+ * @property {skeletonLinesHeight} [skeletonLinesHeight="2rem"] - The height of the skeleton lines.
+ */
+const List = ({ 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 [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 !== undefined &&
+                pagination.pageInfo !== undefined &&
+                pagination.pageInfo.hasNextPage === true &&
+                pagination.isLoading === true
+                ? 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 undefined;
+    }, [scrollParent, fetchMoreOnBottomReached]);
+    return (jsx("div", { className: cvaListContainer({ parentControlledScrollable, className }), "data-testid": dataTestId, ref: containerRef, children: jsx("ul", { className: cvaList(), ref: listRef, style: { height: `${getTotalSize()}px`, outline: "none" }, children: getVirtualItems().map(virtualRow => {
+                const isLoaderRow = virtualRow.index > count - 1;
+                return (jsx("li", { className: cvaListItem$1({ separator }), "data-index": virtualRow.index, onClick: onRowClick !== undefined ? () => onRowClick(virtualRow.index) : undefined, ref: measureElement, style: {
+                        transform: `translateY(${virtualRow.start}px)`,
+                    }, tabIndex: -1, children: isLoaderRow ? (pagination?.isLoading === true ? (jsxs(Fragment, { children: [loadingIndicator === "spinner" && jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" }), loadingIndicator === "skeletonLines" && (jsx(SkeletonLines, { height: skeletonLinesHeight, lines: 3, width: "full" }))] })) : null) : (children(virtualRow.index)) }, virtualRow.key));
+            }) }) }));
+};
+
 /**
  * Applies standardized interaction-related styles to an element.
  *
@@ -3990,7 +4076,7 @@ const TabContent = ({ className, dataTestId, children, ...rest }) => {
  * Wrapper for radix tab list component.
  */
 const TabList = ({ className, dataTestId, children, ...rest }) => {
-    return (jsx(List, { className: cvaTabList({ className }), "data-testid": dataTestId, ...rest, children: children }));
+    return (jsx(List$1, { className: cvaTabList({ className }), "data-testid": dataTestId, ...rest, children: children }));
 };
 
 /**
@@ -4283,92 +4369,6 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     return (jsxs("span", { className: "relative flex items-center gap-2", "data-testid": dataTestId, children: [jsx("progress", { "aria-label": valueText, className: cvaValueBar({ className, size }), max: 100, style: { color: barFillColor }, value: score * 100 }), showValue && (size === "small" || size === "large") ? (jsx(Text, { className: cvaValueBarText({ size }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, children: jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
 };
 
-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: {
-        separator: {
-            alternating: ["even:bg-slate-100"],
-            line: ["[&:not(:last-child)]:border-b", "border-gray-200"],
-            none: "",
-            space: "[&:not(:last-child)]:pb-0.5",
-        },
-    },
-    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) =>ReactElement} children - A function that takes an index and returns the JSX element to be rendered at said index.
- * @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, scrollRef, }) => {
-    const containerRef = useRef(null);
-    const listRef = useRef(null);
-    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 !== undefined &&
-                pagination.pageInfo !== undefined &&
-                pagination.pageInfo.hasNextPage === true &&
-                pagination.isLoading === true
-                ? 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 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;
-                return (jsx("li", { className: cvaVirtualizedListItem({ separator }), "data-index": virtualRow.index, onClick: onRowClick !== undefined ? () => onRowClick(virtualRow.index) : undefined, ref: measureElement, style: {
-                        transform: `translateY(${virtualRow.start}px)`,
-                    }, tabIndex: -1, children: isLoaderRow ? (pagination?.isLoading === true ? (jsxs(Fragment, { children: [loadingIndicator === "spinner" && jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" }), loadingIndicator === "skeletonLines" && (jsx(SkeletonLines, { height: skeletonLinesHeight, lines: 3, width: "full" }))] })) : null) : (children(virtualRow.index)) }, virtualRow.key));
-            }) }) }));
-};
-
 const cvaZStackContainer = cvaMerge(["grid", "grid-cols-1", "grid-rows-1"]);
 const cvaZStackItem = cvaMerge(["col-start-1", "col-end-1", "row-start-1", "row-end-2"]);
 
@@ -4415,4 +4415,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DetailsList, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, Icon, IconButton, Indicator, KPI, KPICard, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, ValueBar, VirtualizedList, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaVirtualizedList, cvaVirtualizedListContainer, cvaVirtualizedListItem, cvaZStackContainer, cvaZStackItem, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DetailsList, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, Icon, IconButton, Indicator, KPI, KPICard, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, ValueBar, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.8.23",
+  "version": "1.8.27",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -17,12 +17,12 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.6.52",
-    "@trackunit/css-class-variance-utilities": "1.6.50",
-    "@trackunit/shared-utils": "1.8.50",
-    "@trackunit/ui-icons": "1.6.49",
-    "@trackunit/react-table-pagination": "1.6.49",
-    "@trackunit/react-test-setup": "1.3.50",
+    "@trackunit/ui-design-tokens": "1.6.54",
+    "@trackunit/css-class-variance-utilities": "1.6.52",
+    "@trackunit/shared-utils": "1.8.53",
+    "@trackunit/ui-icons": "1.6.51",
+    "@trackunit/react-table-pagination": "1.6.51",
+    "@trackunit/react-test-setup": "1.3.52",
     "@tanstack/react-router": "1.114.29"
   },
   "module": "./index.esm.js",

package/src/components/{VirtualizedList/VirtualizedList.d.ts → List/List.d.ts}

@@ -2,10 +2,10 @@ import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { RelayPagination } from "@trackunit/react-table-pagination";
 import { ReactElement, RefObject } from "react";
 import { CommonProps } from "../../common/CommonProps";
-import { cvaVirtualizedListItem } from "./VirtualizedList.variants";
-type Separator = NonNullable<VariantProps<typeof cvaVirtualizedListItem>["separator"]>;
+import { cvaListItem } from "./List.variants";
+type Separator = NonNullable<VariantProps<typeof cvaListItem>["separator"]>;
 type LoadingIndicator = "spinner" | "skeletonLines";
-export interface VirtualizedListProps extends CommonProps {
+export interface ListProps extends CommonProps {
     count: number;
     rowHeight?: number;
     pagination?: RelayPagination;
@@ -30,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, scrollRef, }: VirtualizedListProps) => ReactElement;
+export declare const List: ({ count, rowHeight, pagination, children, className, dataTestId, separator, loadingIndicator, skeletonLinesHeight, onRowClick, scrollRef, }: ListProps) => ReactElement;
 export {};

package/src/components/{VirtualizedList/VirtualizedList.variants.d.ts → List/List.variants.d.ts}

@@ -1,7 +1,7 @@
-export declare const cvaVirtualizedListContainer: (props?: ({
+export declare const cvaListContainer: (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?: ({
+export declare const cvaList: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaListItem: (props?: ({
     separator?: "alternating" | "line" | "none" | "space" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/index.d.ts

@@ -17,6 +17,8 @@ export * from "./Icon/Icon";
 export * from "./Indicator";
 export * from "./KPI/KPI";
 export * from "./KPICard/KPICard";
+export * from "./List/List";
+export * from "./List/List.variants";
 export * from "./ListItem/ListItem";
 export * from "./Menu";
 export * from "./Notice";
@@ -44,7 +46,5 @@ export * from "./ToggleGroup/ToggleGroup";
 export * from "./ToggleGroup/ToggleGroup.variants";
 export * from "./Tooltip";
 export * from "./ValueBar";
-export * from "./VirtualizedList/VirtualizedList";
-export * from "./VirtualizedList/VirtualizedList.variants";
 export * from "./ZStack/ZStack";
 export * from "./ZStack/ZStack.variants";