@trackunit/react-components 1.9.23 → 1.9.26

package/index.cjs.js

@@ -3424,7 +3424,31 @@ const cvaCardBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["grid",
     },
 });
 
-const cvaListItem$1 = cssClassVarianceUtilities.cvaMerge(["py-3", "px-4", "min-h-14", "w-full", "flex", "justify-between", "items-center"]);
+const cvaListContainer = cssClassVarianceUtilities.cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {
+    variants: {
+        withTopSeparator: {
+            true: ["border-t", "border-neutral-200", "transition-colors duration-200 ease-in"],
+            false: ["border-t", "border-transparent", "transition-colors duration-200 ease-in"],
+        },
+    },
+    defaultVariants: {
+        withTopSeparator: false,
+    },
+});
+const cvaList = cssClassVarianceUtilities.cvaMerge(["relative"]);
+const cvaListItem$1 = cssClassVarianceUtilities.cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
+    variants: {
+        separator: {
+            line: ["border-b", "border-neutral-200"],
+            none: "",
+        },
+    },
+    defaultVariants: {
+        separator: "none",
+    },
+});
+
+const cvaListItem = cssClassVarianceUtilities.cvaMerge(["py-3", "px-4", "min-h-14", "w-full", "flex", "justify-between", "items-center"]);
 const cvaMainInformationClass = cssClassVarianceUtilities.cvaMerge(["grid", "items-center", "text-sm", "gap-2"], {
     variants: {
         hasThumbnail: {
@@ -3464,33 +3488,9 @@ const ListItemSkeleton = ({ hasThumbnail = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasT
             details: getResponsiveRandomWidthPercentage({ min: 25, max: 45 }),
         };
     });
-    return (jsxRuntime.jsxs("div", { className: cvaListItem$1({ className: "w-full" }), children: [jsxRuntime.jsxs("div", { className: cvaMainInformationClass({ hasThumbnail, className: "w-full" }), children: [hasThumbnail ? (jsxRuntime.jsx("div", { className: cvaThumbnailContainer({ className: "bg-gray-200" }), children: jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("bg-gray-300", thumbnailShape === "circle" ? "rounded-full" : "rounded"), style: { width: 20, height: 20 } }) })) : null, jsxRuntime.jsxs("div", { className: "grid-rows-min-fr grid w-full items-center gap-1 text-sm", children: [jsxRuntime.jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.title }), hasDescription ? jsxRuntime.jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.description }) : null, hasMeta ? jsxRuntime.jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.meta }) : null] })] }), hasDetails ? (jsxRuntime.jsx("div", { className: "pl-2 text-sm", children: jsxRuntime.jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.details }) })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaListItem({ className: "w-full" }), children: [jsxRuntime.jsxs("div", { className: cvaMainInformationClass({ hasThumbnail, className: "w-full" }), children: [hasThumbnail ? (jsxRuntime.jsx("div", { className: cvaThumbnailContainer({ className: "bg-gray-200" }), children: jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("bg-gray-300", thumbnailShape === "circle" ? "rounded-full" : "rounded"), style: { width: 20, height: 20 } }) })) : null, jsxRuntime.jsxs("div", { className: "grid-rows-min-fr grid w-full items-center gap-1 text-sm", children: [jsxRuntime.jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.title }), hasDescription ? jsxRuntime.jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.description }) : null, hasMeta ? jsxRuntime.jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.meta }) : null] })] }), hasDetails ? (jsxRuntime.jsx("div", { className: "pl-2 text-sm", children: jsxRuntime.jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.details }) })) : null] }));
 };
 
-const cvaListContainer = cssClassVarianceUtilities.cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {
-    variants: {
-        withTopSeparator: {
-            true: ["border-t", "border-neutral-200", "transition-colors duration-200 ease-in"],
-            false: ["border-t", "border-transparent", "transition-colors duration-200 ease-in"],
-        },
-    },
-    defaultVariants: {
-        withTopSeparator: false,
-    },
-});
-const cvaList = cssClassVarianceUtilities.cvaMerge(["relative"]);
-const cvaListItem = cssClassVarianceUtilities.cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
-    variants: {
-        separator: {
-            line: ["[&:not(:last-child)]:border-b", "border-neutral-200"],
-            none: "",
-        },
-    },
-    defaultVariants: {
-        separator: "none",
-    },
-});
-
 /**
  *
  */
@@ -3575,9 +3575,9 @@ const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescripti
  * );
  * ```
  */
-const List = ({ children, className, dataTestId, topSeparatorOnScroll = false, separator = "line", 
+const List = ({ children, className, dataTestId, 
 // UseListResult properties
-containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, scrollOffset, 
+containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, scrollOffset, separator, topSeparatorOnScroll, 
 // Unused but part of UseListResult interface
 getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }) => {
     return (jsxRuntime.jsx("div", { className: cvaListContainer({
@@ -3586,22 +3586,18 @@ getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset:
         }), "data-is-scrolling": isScrolling, "data-testid": dataTestId, ref: containerRef, children: jsxRuntime.jsx("ul", { className: cvaList(), ref: listRef, children: rows.map(row => {
                 // Generate list item props with separator styling
                 const listItemProps = getListItemProps(row, {
-                    className: cvaListItem({ separator }),
+                    className: cvaListItem$1({ separator }),
                 });
                 const key = row.virtualRow.key;
                 // Render loading row
                 if (row.type === "loader") {
-                    const loadingConfig = loadingIndicator ?? {
-                        type: "skeleton",
-                        ...DEFAULT_SKELETON_LIST_ITEM_PROPS,
-                    };
                     // Use the total data count from useList, not visible rows (which are virtualized)
                     const hasHeaderRow = !!header;
                     const dataStartIndex = hasHeaderRow ? 1 : 0;
                     const totalDataRows = dataStartIndex + count;
                     const loaderIndex = row.virtualRow.index - totalDataRows;
                     const shouldShowLoader = shouldShowLoaderAtIndex(loaderIndex);
-                    return (jsxRuntime.jsx("li", { ...listItemProps, children: shouldShowLoader ? jsxRuntime.jsx(ListLoadingIndicator, { ...loadingConfig }) : null }, key));
+                    return (jsxRuntime.jsx("li", { ...listItemProps, children: shouldShowLoader ? jsxRuntime.jsx(ListLoadingIndicator, { ...loadingIndicator }) : null }, key));
                 }
                 // Render header row
                 if (row.type === "header") {
@@ -3649,10 +3645,12 @@ const DEFAULT_LOADING_INDICATOR_CONFIG = {
  * );
  * ```
  */
-const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAULT_LOADING_INDICATOR_CONFIG, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, }) => {
+const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAULT_LOADING_INDICATOR_CONFIG, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, separator = "line", topSeparatorOnScroll = false, }) => {
     const containerRef = react.useRef(null);
     const listRef = react.useRef(null);
     const rowRefsMap = react.useRef(new Map());
+    // Resolve loading indicator once to avoid unnecessary re-renders
+    const resolvedLoadingIndicator = react.useMemo(() => getResolvedLoadingIndicator(loadingIndicator), [loadingIndicator]);
     // Calculate total count including header
     const hasHeader = Boolean(header);
     const dataStartIndex = hasHeader ? 1 : 0;
@@ -3662,7 +3660,7 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
     const getLoadingRowsCount = react.useCallback(() => {
         if (pagination?.isLoading === false)
             return 0;
-        const { type: loadingIndicatorType } = loadingIndicator;
+        const { type: loadingIndicatorType } = resolvedLoadingIndicator;
         switch (loadingIndicatorType) {
             case "none":
                 return 0;
@@ -3671,20 +3669,20 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
             case "custom":
             case "skeleton": {
                 const isInitialLoading = !pagination?.pageInfo;
-                const initialCount = loadingIndicator.initialLoadingCount ?? 10;
-                const scrollCount = loadingIndicator.scrollLoadingCount ?? 3;
+                const initialCount = resolvedLoadingIndicator.initialLoadingCount ?? 10;
+                const scrollCount = resolvedLoadingIndicator.scrollLoadingCount ?? 3;
                 return isInitialLoading ? initialCount : scrollCount;
             }
             default: {
                 throw new Error(`${loadingIndicatorType} is not known`);
             }
         }
-    }, [loadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
+    }, [resolvedLoadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
     // Helper to determine if a specific loader index should be shown
     const shouldShowLoaderAtIndex = react.useCallback((loaderIndex) => {
         if (pagination?.isLoading === false)
             return false;
-        const { type: loadingIndicatorType } = loadingIndicator;
+        const { type: loadingIndicatorType } = resolvedLoadingIndicator;
         let result;
         switch (loadingIndicatorType) {
             case "none":
@@ -3696,8 +3694,8 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
             case "custom":
             case "skeleton": {
                 const isInitialLoading = !pagination?.pageInfo;
-                const initialCount = loadingIndicator.initialLoadingCount ?? 10;
-                const scrollCount = loadingIndicator.scrollLoadingCount ?? 3;
+                const initialCount = resolvedLoadingIndicator.initialLoadingCount ?? 10;
+                const scrollCount = resolvedLoadingIndicator.scrollLoadingCount ?? 3;
                 const maxCount = isInitialLoading ? initialCount : scrollCount;
                 result = loaderIndex < maxCount;
                 break;
@@ -3707,7 +3705,7 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
             }
         }
         return result;
-    }, [loadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
+    }, [resolvedLoadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
     const totalRowCount = react.useMemo(() => {
         // Only add the exact number of loading rows we want to show
         const loadingRows = pagination?.isLoading === true ? getLoadingRowsCount() : 0;
@@ -3831,11 +3829,19 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
         rows,
         getListItemProps,
         header,
-        loadingIndicator,
+        loadingIndicator: resolvedLoadingIndicator,
         shouldShowLoaderAtIndex,
         count,
+        separator,
+        topSeparatorOnScroll,
     };
 };
+const getResolvedLoadingIndicator = (loadingIndicator) => {
+    if (typeof loadingIndicator === "function") {
+        return loadingIndicator(DEFAULT_LOADING_INDICATOR_CONFIG);
+    }
+    return loadingIndicator;
+};
 
 // Height constants (in pixels) - based on ListItem.variants.ts styling
 const MIN_ITEM_HEIGHT = 56; // min-h-14 = 56px (minimum height for ListItem)
@@ -3953,7 +3959,7 @@ const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge("", {
  * @returns {Element}  ListItem component
  */
 const ListItem = ({ className, dataTestId, onClick, details, title, description, meta, thumbnail, thumbnailColor = "info-600", thumbnailBackground = "info-100", ...rest }) => {
-    const baseClass = cvaListItem$1({ className });
+    const baseClass = cvaListItem({ className });
     const interactableItemClass = onClick ? tailwindMerge.twMerge(baseClass, cvaInteractableItem({ cursor: "pointer" })) : baseClass;
     return (jsxRuntime.jsxs("li", { className: interactableItemClass, "data-testid": dataTestId, onClick: onClick, ...rest, children: [jsxRuntime.jsxs("div", { className: cvaMainInformationClass({ hasThumbnail: !!thumbnail }), children: [thumbnail ? (jsxRuntime.jsx("div", { className: cvaThumbnailContainer({
                             className: `text-${thumbnailColor} bg-${thumbnailBackground}`,
@@ -5227,7 +5233,7 @@ exports.cvaIndicatorPing = cvaIndicatorPing;
 exports.cvaInteractableItem = cvaInteractableItem;
 exports.cvaList = cvaList;
 exports.cvaListContainer = cvaListContainer;
-exports.cvaListItem = cvaListItem;
+exports.cvaListItem = cvaListItem$1;
 exports.cvaMenuItem = cvaMenuItem;
 exports.cvaMenuItemLabel = cvaMenuItemLabel;
 exports.cvaMenuItemPrefix = cvaMenuItemPrefix;

package/index.esm.js

@@ -3422,7 +3422,31 @@ const cvaCardBodyDensityContainer = cvaMerge(["grid", "grid-cols-[1fr_auto]"], {
     },
 });
 
-const cvaListItem$1 = cvaMerge(["py-3", "px-4", "min-h-14", "w-full", "flex", "justify-between", "items-center"]);
+const cvaListContainer = cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {
+    variants: {
+        withTopSeparator: {
+            true: ["border-t", "border-neutral-200", "transition-colors duration-200 ease-in"],
+            false: ["border-t", "border-transparent", "transition-colors duration-200 ease-in"],
+        },
+    },
+    defaultVariants: {
+        withTopSeparator: false,
+    },
+});
+const cvaList = cvaMerge(["relative"]);
+const cvaListItem$1 = cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
+    variants: {
+        separator: {
+            line: ["border-b", "border-neutral-200"],
+            none: "",
+        },
+    },
+    defaultVariants: {
+        separator: "none",
+    },
+});
+
+const cvaListItem = cvaMerge(["py-3", "px-4", "min-h-14", "w-full", "flex", "justify-between", "items-center"]);
 const cvaMainInformationClass = cvaMerge(["grid", "items-center", "text-sm", "gap-2"], {
     variants: {
         hasThumbnail: {
@@ -3462,33 +3486,9 @@ const ListItemSkeleton = ({ hasThumbnail = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasT
             details: getResponsiveRandomWidthPercentage({ min: 25, max: 45 }),
         };
     });
-    return (jsxs("div", { className: cvaListItem$1({ className: "w-full" }), children: [jsxs("div", { className: cvaMainInformationClass({ hasThumbnail, className: "w-full" }), children: [hasThumbnail ? (jsx("div", { className: cvaThumbnailContainer({ className: "bg-gray-200" }), children: jsx("div", { className: twMerge("bg-gray-300", thumbnailShape === "circle" ? "rounded-full" : "rounded"), style: { width: 20, height: 20 } }) })) : null, jsxs("div", { className: "grid-rows-min-fr grid w-full items-center gap-1 text-sm", children: [jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.title }), hasDescription ? jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.description }) : null, hasMeta ? jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.meta }) : null] })] }), hasDetails ? (jsx("div", { className: "pl-2 text-sm", children: jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.details }) })) : null] }));
+    return (jsxs("div", { className: cvaListItem({ className: "w-full" }), children: [jsxs("div", { className: cvaMainInformationClass({ hasThumbnail, className: "w-full" }), children: [hasThumbnail ? (jsx("div", { className: cvaThumbnailContainer({ className: "bg-gray-200" }), children: jsx("div", { className: twMerge("bg-gray-300", thumbnailShape === "circle" ? "rounded-full" : "rounded"), style: { width: 20, height: 20 } }) })) : null, jsxs("div", { className: "grid-rows-min-fr grid w-full items-center gap-1 text-sm", children: [jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.title }), hasDescription ? jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.description }) : null, hasMeta ? jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.meta }) : null] })] }), hasDetails ? (jsx("div", { className: "pl-2 text-sm", children: jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.details }) })) : null] }));
 };
 
-const cvaListContainer = cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {
-    variants: {
-        withTopSeparator: {
-            true: ["border-t", "border-neutral-200", "transition-colors duration-200 ease-in"],
-            false: ["border-t", "border-transparent", "transition-colors duration-200 ease-in"],
-        },
-    },
-    defaultVariants: {
-        withTopSeparator: false,
-    },
-});
-const cvaList = cvaMerge(["relative"]);
-const cvaListItem = cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
-    variants: {
-        separator: {
-            line: ["[&:not(:last-child)]:border-b", "border-neutral-200"],
-            none: "",
-        },
-    },
-    defaultVariants: {
-        separator: "none",
-    },
-});
-
 /**
  *
  */
@@ -3573,9 +3573,9 @@ const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescripti
  * );
  * ```
  */
-const List = ({ children, className, dataTestId, topSeparatorOnScroll = false, separator = "line", 
+const List = ({ children, className, dataTestId, 
 // UseListResult properties
-containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, scrollOffset, 
+containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, scrollOffset, separator, topSeparatorOnScroll, 
 // Unused but part of UseListResult interface
 getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }) => {
     return (jsx("div", { className: cvaListContainer({
@@ -3584,22 +3584,18 @@ getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset:
         }), "data-is-scrolling": isScrolling, "data-testid": dataTestId, ref: containerRef, children: jsx("ul", { className: cvaList(), ref: listRef, children: rows.map(row => {
                 // Generate list item props with separator styling
                 const listItemProps = getListItemProps(row, {
-                    className: cvaListItem({ separator }),
+                    className: cvaListItem$1({ separator }),
                 });
                 const key = row.virtualRow.key;
                 // Render loading row
                 if (row.type === "loader") {
-                    const loadingConfig = loadingIndicator ?? {
-                        type: "skeleton",
-                        ...DEFAULT_SKELETON_LIST_ITEM_PROPS,
-                    };
                     // Use the total data count from useList, not visible rows (which are virtualized)
                     const hasHeaderRow = !!header;
                     const dataStartIndex = hasHeaderRow ? 1 : 0;
                     const totalDataRows = dataStartIndex + count;
                     const loaderIndex = row.virtualRow.index - totalDataRows;
                     const shouldShowLoader = shouldShowLoaderAtIndex(loaderIndex);
-                    return (jsx("li", { ...listItemProps, children: shouldShowLoader ? jsx(ListLoadingIndicator, { ...loadingConfig }) : null }, key));
+                    return (jsx("li", { ...listItemProps, children: shouldShowLoader ? jsx(ListLoadingIndicator, { ...loadingIndicator }) : null }, key));
                 }
                 // Render header row
                 if (row.type === "header") {
@@ -3647,10 +3643,12 @@ const DEFAULT_LOADING_INDICATOR_CONFIG = {
  * );
  * ```
  */
-const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAULT_LOADING_INDICATOR_CONFIG, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, }) => {
+const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAULT_LOADING_INDICATOR_CONFIG, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, separator = "line", topSeparatorOnScroll = false, }) => {
     const containerRef = useRef(null);
     const listRef = useRef(null);
     const rowRefsMap = useRef(new Map());
+    // Resolve loading indicator once to avoid unnecessary re-renders
+    const resolvedLoadingIndicator = useMemo(() => getResolvedLoadingIndicator(loadingIndicator), [loadingIndicator]);
     // Calculate total count including header
     const hasHeader = Boolean(header);
     const dataStartIndex = hasHeader ? 1 : 0;
@@ -3660,7 +3658,7 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
     const getLoadingRowsCount = useCallback(() => {
         if (pagination?.isLoading === false)
             return 0;
-        const { type: loadingIndicatorType } = loadingIndicator;
+        const { type: loadingIndicatorType } = resolvedLoadingIndicator;
         switch (loadingIndicatorType) {
             case "none":
                 return 0;
@@ -3669,20 +3667,20 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
             case "custom":
             case "skeleton": {
                 const isInitialLoading = !pagination?.pageInfo;
-                const initialCount = loadingIndicator.initialLoadingCount ?? 10;
-                const scrollCount = loadingIndicator.scrollLoadingCount ?? 3;
+                const initialCount = resolvedLoadingIndicator.initialLoadingCount ?? 10;
+                const scrollCount = resolvedLoadingIndicator.scrollLoadingCount ?? 3;
                 return isInitialLoading ? initialCount : scrollCount;
             }
             default: {
                 throw new Error(`${loadingIndicatorType} is not known`);
             }
         }
-    }, [loadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
+    }, [resolvedLoadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
     // Helper to determine if a specific loader index should be shown
     const shouldShowLoaderAtIndex = useCallback((loaderIndex) => {
         if (pagination?.isLoading === false)
             return false;
-        const { type: loadingIndicatorType } = loadingIndicator;
+        const { type: loadingIndicatorType } = resolvedLoadingIndicator;
         let result;
         switch (loadingIndicatorType) {
             case "none":
@@ -3694,8 +3692,8 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
             case "custom":
             case "skeleton": {
                 const isInitialLoading = !pagination?.pageInfo;
-                const initialCount = loadingIndicator.initialLoadingCount ?? 10;
-                const scrollCount = loadingIndicator.scrollLoadingCount ?? 3;
+                const initialCount = resolvedLoadingIndicator.initialLoadingCount ?? 10;
+                const scrollCount = resolvedLoadingIndicator.scrollLoadingCount ?? 3;
                 const maxCount = isInitialLoading ? initialCount : scrollCount;
                 result = loaderIndex < maxCount;
                 break;
@@ -3705,7 +3703,7 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
             }
         }
         return result;
-    }, [loadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
+    }, [resolvedLoadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
     const totalRowCount = useMemo(() => {
         // Only add the exact number of loading rows we want to show
         const loadingRows = pagination?.isLoading === true ? getLoadingRowsCount() : 0;
@@ -3829,11 +3827,19 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
         rows,
         getListItemProps,
         header,
-        loadingIndicator,
+        loadingIndicator: resolvedLoadingIndicator,
         shouldShowLoaderAtIndex,
         count,
+        separator,
+        topSeparatorOnScroll,
     };
 };
+const getResolvedLoadingIndicator = (loadingIndicator) => {
+    if (typeof loadingIndicator === "function") {
+        return loadingIndicator(DEFAULT_LOADING_INDICATOR_CONFIG);
+    }
+    return loadingIndicator;
+};
 
 // Height constants (in pixels) - based on ListItem.variants.ts styling
 const MIN_ITEM_HEIGHT = 56; // min-h-14 = 56px (minimum height for ListItem)
@@ -3951,7 +3957,7 @@ const cvaInteractableItem = cvaMerge("", {
  * @returns {Element}  ListItem component
  */
 const ListItem = ({ className, dataTestId, onClick, details, title, description, meta, thumbnail, thumbnailColor = "info-600", thumbnailBackground = "info-100", ...rest }) => {
-    const baseClass = cvaListItem$1({ className });
+    const baseClass = cvaListItem({ className });
     const interactableItemClass = onClick ? twMerge(baseClass, cvaInteractableItem({ cursor: "pointer" })) : baseClass;
     return (jsxs("li", { className: interactableItemClass, "data-testid": dataTestId, onClick: onClick, ...rest, children: [jsxs("div", { className: cvaMainInformationClass({ hasThumbnail: !!thumbnail }), children: [thumbnail ? (jsx("div", { className: cvaThumbnailContainer({
                             className: `text-${thumbnailColor} bg-${thumbnailBackground}`,
@@ -5145,4 +5151,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DetailsList, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, HorizontalOverflowScroller, 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, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getResponsiveRandomWidthPercentage, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGeometry, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useList, useListItemHeight, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useRelayPagination, useResize, useScrollDetection, useSelfUpdatingRef, useStable, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DetailsList, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, HorizontalOverflowScroller, 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, defaultPageSize, docs, getDevicePixelRatio, getResponsiveRandomWidthPercentage, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGeometry, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useList, useListItemHeight, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useRelayPagination, useResize, useScrollDetection, useSelfUpdatingRef, useStable, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.9.23",
+  "version": "1.9.26",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,11 +16,11 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.7.14",
-    "@trackunit/css-class-variance-utilities": "1.7.13",
-    "@trackunit/shared-utils": "1.9.13",
-    "@trackunit/ui-icons": "1.7.15",
-    "@trackunit/react-test-setup": "1.4.13",
+    "@trackunit/ui-design-tokens": "1.7.17",
+    "@trackunit/css-class-variance-utilities": "1.7.16",
+    "@trackunit/shared-utils": "1.9.16",
+    "@trackunit/ui-icons": "1.7.18",
+    "@trackunit/react-test-setup": "1.4.16",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12"

package/src/components/List/List.d.ts

@@ -1,9 +1,6 @@
-import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
-import { cvaListItem } from "./List.variants";
 import { UseListResult, VirtualizationListItemProps } from "./useList";
-type Separator = NonNullable<VariantProps<typeof cvaListItem>["separator"]>;
 export type { VirtualizationListItemProps } from "./useList";
 export interface ListProps<TItem = unknown> extends CommonProps, UseListResult<TItem> {
     /**
@@ -26,14 +23,6 @@ export interface ListProps<TItem = unknown> extends CommonProps, UseListResult<T
         item: TItem | undefined;
         index: number;
     }) => ReactElement | null;
-    /**
-     * Separator style between list items.
-     */
-    separator?: Separator;
-    /**
-     * Show a top separator when the list is scrolled.
-     */
-    topSeparatorOnScroll?: boolean;
 }
 /**
  * A performant virtualized list component with infinite scrolling support.
@@ -100,4 +89,4 @@ export interface ListProps<TItem = unknown> extends CommonProps, UseListResult<T
  * );
  * ```
  */
-export declare const List: <TItem = unknown>({ children, className, dataTestId, topSeparatorOnScroll, separator, containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, scrollOffset, getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }: ListProps<TItem>) => ReactElement;
+export declare const List: <TItem = unknown>({ children, className, dataTestId, containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, scrollOffset, separator, topSeparatorOnScroll, getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }: ListProps<TItem>) => ReactElement;

package/src/components/List/useList.d.ts

@@ -2,6 +2,9 @@ import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
 import { ReactElement, RefObject } from "react";
 import { RelayPagination } from "../../hooks";
 import { ListLoadingIndicatorProps } from "./ListLoadingIndicator";
+declare const DEFAULT_LOADING_INDICATOR_CONFIG: Extract<ListLoadingIndicatorProps, {
+    type: "skeleton";
+}>;
 /**
  * Props that must be spread onto list items for proper virtualization.
  * These handle positioning, measurement, accessibility, and interaction.
@@ -12,7 +15,7 @@ export interface VirtualizationListItemProps {
     /** CSS classes for list styling and separators */
     className: string;
     /** Element ref for virtualization measurement and setting positioning transform styles */
-    ref?: (node: HTMLLIElement | null) => void;
+    ref: (node: HTMLLIElement | null) => void;
     /** Click handler for row-level interactions */
     onClick?: () => void;
     /** Data attribute for accessibility and debugging */
@@ -45,7 +48,7 @@ export interface UseListOptions<TItem = unknown> {
     /**
      * Loading indicator configuration for pagination loading.
      */
-    loadingIndicator?: ListLoadingIndicatorProps;
+    loadingIndicator?: ListLoadingIndicatorProps | ((defaultLoadingIndicator: typeof DEFAULT_LOADING_INDICATOR_CONFIG) => ListLoadingIndicatorProps);
     /**
      * Callback fired when a row is clicked.
      */
@@ -97,6 +100,14 @@ export interface UseListOptions<TItem = unknown> {
      * Higher values reduce blank areas during fast scrolling but increase memory usage.
      */
     overscan?: number;
+    /**
+     * Separator style between list items.
+     */
+    separator?: "none" | "line";
+    /**
+     * Show a top separator when the list is scrolled.
+     */
+    topSeparatorOnScroll?: boolean;
 }
 export type ListRowType = "header" | "data" | "loader";
 export type ListRow<TItem> = {
@@ -130,11 +141,15 @@ export interface UseListResult<TItem> extends Pick<Virtualizer<HTMLDivElement, H
     /** Header element (if provided) */
     readonly header?: ReactElement;
     /** Loading indicator configuration */
-    readonly loadingIndicator?: ListLoadingIndicatorProps;
+    readonly loadingIndicator: ListLoadingIndicatorProps;
     /** Helper to determine if a specific loader index should be shown */
     readonly shouldShowLoaderAtIndex: (loaderIndex: number) => boolean;
     /** Total number of data items (for consistent calculations) */
     readonly count: number;
+    /** Separator style between list items */
+    readonly separator: "none" | "line";
+    /** Show a top separator when the list is scrolled */
+    readonly topSeparatorOnScroll: boolean;
 }
 /**
  * A hook for managing virtualized list state and behavior.
@@ -168,4 +183,5 @@ export interface UseListResult<TItem> extends Pick<Virtualizer<HTMLDivElement, H
  * );
  * ```
  */
-export declare const useList: <TItem = unknown>({ count, pagination, header, getItem, loadingIndicator, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, }: UseListOptions<TItem>) => UseListResult<TItem>;
+export declare const useList: <TItem = unknown>({ count, pagination, header, getItem, loadingIndicator, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, separator, topSeparatorOnScroll, }: UseListOptions<TItem>) => UseListResult<TItem>;
+export {};

package/src/components/ListItem/ListItem.d.ts

@@ -1,11 +1,21 @@
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { MappedOmit } from "@trackunit/shared-utils";
 import { tailwindPalette, ThemeColors } from "@trackunit/ui-design-tokens";
-import { CSSProperties, MouseEventHandler, ReactElement, ReactNode, Ref } from "react";
+import { MouseEventHandler, ReactElement, ReactNode, Ref } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { cvaListItem } from "./ListItem.variants";
 type ThemeColorShades = `${keyof (typeof tailwindPalette)[keyof typeof tailwindPalette]}`;
-export interface ListItemProps extends CommonProps, MappedOmit<VariantProps<typeof cvaListItem>, "className"> {
+export type ListItemVirtualizationProps = {
+    /** @internal */
+    ref?: Ref<HTMLLIElement>;
+    /** @internal */
+    tabIndex?: number;
+    /** @internal */
+    "data-index"?: number;
+    /** @internal */
+    className?: string;
+};
+export interface ListItemProps extends CommonProps, ListItemVirtualizationProps, MappedOmit<VariantProps<typeof cvaListItem>, "className"> {
     /**The main text line of the ListItem */
     title: string | ReactElement<CommonProps>;
     /**Optional description for the ListItem. Can be used for descriptions, metadata, or other important details. */
@@ -24,14 +34,6 @@ export interface ListItemProps extends CommonProps, MappedOmit<VariantProps<type
      * If asset image is chosen as thumbnail, make the thumbnailBackground "white".
      */
     thumbnailBackground?: `${ThemeColors}-${ThemeColorShades}` | `${ThemeColors}`;
-    /** @internal */
-    style?: CSSProperties;
-    /** @internal */
-    ref?: Ref<HTMLLIElement>;
-    /** @internal */
-    tabIndex?: number;
-    /** @internal */
-    "data-index"?: number;
 }
 /**
  *   The ListItem is designed to present a concise set of items for quick scanning and navigation. It supports multiple content types and actions, and its flexible layout allows for customization based on the type of data being shown - assets, events, users, etc.