@trackunit/react-components 1.9.31 → 1.9.33

package/index.cjs.js

@@ -1353,31 +1353,46 @@ const useGeometry = (ref, { skip = false } = {}) => {
         };
     });
     const resizeObserver = react.useRef(null);
+    const [element, setElement] = react.useState(ref.current);
+    // Track changes to ref.current on every render
+    if (ref.current !== element) {
+        setElement(ref.current);
+    }
     react.useEffect(() => {
-        if (skip || !ref.current) {
+        if (skip || !element) {
             return;
         }
+        // Update geometry immediately when element changes
+        const elementRect = element.getBoundingClientRect();
+        setGeometry({
+            width: elementRect.width,
+            height: elementRect.height,
+            top: elementRect.top,
+            bottom: elementRect.bottom,
+            left: elementRect.left,
+            right: elementRect.right,
+            x: elementRect.x,
+            y: elementRect.y,
+        });
         const observe = () => {
             if (!resizeObserver.current) {
                 resizeObserver.current = new ResizeObserver(entries => {
                     for (const entry of entries) {
-                        const rect = entry.target.getBoundingClientRect();
+                        const entryRect = entry.target.getBoundingClientRect();
                         setGeometry({
-                            width: rect.width,
-                            height: rect.height,
-                            top: rect.top,
-                            bottom: rect.bottom,
-                            left: rect.left,
-                            right: rect.right,
-                            x: rect.x,
-                            y: rect.y,
+                            width: entryRect.width,
+                            height: entryRect.height,
+                            top: entryRect.top,
+                            bottom: entryRect.bottom,
+                            left: entryRect.left,
+                            right: entryRect.right,
+                            x: entryRect.x,
+                            y: entryRect.y,
                         });
                     }
                 });
             }
-            if (ref.current) {
-                resizeObserver.current.observe(ref.current);
-            }
+            resizeObserver.current.observe(element);
         };
         observe();
         return () => {
@@ -1385,7 +1400,7 @@ const useGeometry = (ref, { skip = false } = {}) => {
                 resizeObserver.current.disconnect();
             }
         };
-    }, [ref, skip]);
+    }, [element, skip]);
     return geometry;
 };
 
@@ -1445,6 +1460,9 @@ const useInfiniteScroll = ({ pagination, scrollElementRef, count, estimateSize,
         estimateSize: handleEstimateSize,
         overscan: overscan ?? OVERSCAN,
         onChange: handleChange,
+        // This option enables wrapping ResizeObserver measurements in requestAnimationFrame for smoother updates and reduced layout thrashing.
+        // It helps prevent the "ResizeObserver loop completed with undelivered notifications" error by ensuring that measurements align with the rendering cycle
+        useAnimationFrameWithResizeObserver: true,
     });
     const virtualItems = rowVirtualizer.getVirtualItems();
     // Auto-load more data based on scroll position and content height
@@ -3454,12 +3472,28 @@ 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"],
+            line: "border-neutral-200",
             none: "",
         },
+        contentFillsContainer: {
+            true: "",
+            false: "",
+        },
     },
+    compoundVariants: [
+        {
+            contentFillsContainer: true,
+            separator: "line",
+            class: ["[&:not(:last-child)]:border-b"],
+        },
+        {
+            contentFillsContainer: false,
+            separator: "line",
+            class: ["border-b"],
+        },
+    ],
     defaultVariants: {
-        separator: "none",
+        separator: "line",
     },
 });
 
@@ -3592,16 +3626,19 @@ const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescripti
  */
 const List = ({ children, className, dataTestId, 
 // UseListResult properties
-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, }) => {
+containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, separator, topSeparatorOnScroll, isAtTop, contentFillsContainer, 
+// Unused but part of UseListResult interface (can be used from parent)
+scrollOffset: _scrollOffset, getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }) => {
     return (jsxRuntime.jsx("div", { className: cvaListContainer({
-            withTopSeparator: topSeparatorOnScroll && (scrollOffset ?? 0) > 0,
+            withTopSeparator: topSeparatorOnScroll && !isAtTop,
             className,
         }), "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
+                // Generate list item props with clean separator styling
                 const listItemProps = getListItemProps(row, {
-                    className: cvaListItem$1({ separator }),
+                    className: cvaListItem$1({
+                        separator,
+                        contentFillsContainer,
+                    }),
                 });
                 const key = row.virtualRow.key;
                 // Render loading row
@@ -3775,6 +3812,10 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
         // eslint-disable-next-line react-hooks/react-compiler
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    // Scroll to top when item count changes (like after filtering)
+    react.useLayoutEffect(() => {
+        virtualizer.scrollToOffset(0);
+    }, [count, virtualizer]);
     // Transform virtual items into typed rows
     const rows = react.useMemo(() => {
         const virtualItems = virtualizer.getVirtualItems();
@@ -3837,6 +3878,11 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
             tabIndex: -1,
         };
     }, [onRowClick, virtualizer]);
+    // Calculate scroll position states
+    const isAtTop = react.useMemo(() => virtualizer.scrollOffset === 0, [virtualizer.scrollOffset]);
+    // totalSize must be out from from useMemo since otherwise we'll not be able to have the  the totalSize as a dependency for the contentFillsContainer
+    const totalSize = virtualizer.getTotalSize();
+    const contentFillsContainer = react.useMemo(() => (containerRef.current ? totalSize >= containerRef.current.clientHeight : false), [totalSize]);
     return {
         ...virtualizer,
         containerRef,
@@ -3849,6 +3895,8 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
         count,
         separator,
         topSeparatorOnScroll,
+        isAtTop,
+        contentFillsContainer,
     };
 };
 const getResolvedLoadingIndicator = (loadingIndicator) => {

package/index.esm.js

@@ -1351,31 +1351,46 @@ const useGeometry = (ref, { skip = false } = {}) => {
         };
     });
     const resizeObserver = useRef(null);
+    const [element, setElement] = useState(ref.current);
+    // Track changes to ref.current on every render
+    if (ref.current !== element) {
+        setElement(ref.current);
+    }
     useEffect(() => {
-        if (skip || !ref.current) {
+        if (skip || !element) {
             return;
         }
+        // Update geometry immediately when element changes
+        const elementRect = element.getBoundingClientRect();
+        setGeometry({
+            width: elementRect.width,
+            height: elementRect.height,
+            top: elementRect.top,
+            bottom: elementRect.bottom,
+            left: elementRect.left,
+            right: elementRect.right,
+            x: elementRect.x,
+            y: elementRect.y,
+        });
         const observe = () => {
             if (!resizeObserver.current) {
                 resizeObserver.current = new ResizeObserver(entries => {
                     for (const entry of entries) {
-                        const rect = entry.target.getBoundingClientRect();
+                        const entryRect = entry.target.getBoundingClientRect();
                         setGeometry({
-                            width: rect.width,
-                            height: rect.height,
-                            top: rect.top,
-                            bottom: rect.bottom,
-                            left: rect.left,
-                            right: rect.right,
-                            x: rect.x,
-                            y: rect.y,
+                            width: entryRect.width,
+                            height: entryRect.height,
+                            top: entryRect.top,
+                            bottom: entryRect.bottom,
+                            left: entryRect.left,
+                            right: entryRect.right,
+                            x: entryRect.x,
+                            y: entryRect.y,
                         });
                     }
                 });
             }
-            if (ref.current) {
-                resizeObserver.current.observe(ref.current);
-            }
+            resizeObserver.current.observe(element);
         };
         observe();
         return () => {
@@ -1383,7 +1398,7 @@ const useGeometry = (ref, { skip = false } = {}) => {
                 resizeObserver.current.disconnect();
             }
         };
-    }, [ref, skip]);
+    }, [element, skip]);
     return geometry;
 };
 
@@ -1443,6 +1458,9 @@ const useInfiniteScroll = ({ pagination, scrollElementRef, count, estimateSize,
         estimateSize: handleEstimateSize,
         overscan: overscan ?? OVERSCAN,
         onChange: handleChange,
+        // This option enables wrapping ResizeObserver measurements in requestAnimationFrame for smoother updates and reduced layout thrashing.
+        // It helps prevent the "ResizeObserver loop completed with undelivered notifications" error by ensuring that measurements align with the rendering cycle
+        useAnimationFrameWithResizeObserver: true,
     });
     const virtualItems = rowVirtualizer.getVirtualItems();
     // Auto-load more data based on scroll position and content height
@@ -3452,12 +3470,28 @@ const cvaList = cvaMerge(["relative"]);
 const cvaListItem$1 = cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
     variants: {
         separator: {
-            line: ["border-b", "border-neutral-200"],
+            line: "border-neutral-200",
             none: "",
         },
+        contentFillsContainer: {
+            true: "",
+            false: "",
+        },
     },
+    compoundVariants: [
+        {
+            contentFillsContainer: true,
+            separator: "line",
+            class: ["[&:not(:last-child)]:border-b"],
+        },
+        {
+            contentFillsContainer: false,
+            separator: "line",
+            class: ["border-b"],
+        },
+    ],
     defaultVariants: {
-        separator: "none",
+        separator: "line",
     },
 });
 
@@ -3590,16 +3624,19 @@ const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescripti
  */
 const List = ({ children, className, dataTestId, 
 // UseListResult properties
-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, }) => {
+containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, separator, topSeparatorOnScroll, isAtTop, contentFillsContainer, 
+// Unused but part of UseListResult interface (can be used from parent)
+scrollOffset: _scrollOffset, getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }) => {
     return (jsx("div", { className: cvaListContainer({
-            withTopSeparator: topSeparatorOnScroll && (scrollOffset ?? 0) > 0,
+            withTopSeparator: topSeparatorOnScroll && !isAtTop,
             className,
         }), "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
+                // Generate list item props with clean separator styling
                 const listItemProps = getListItemProps(row, {
-                    className: cvaListItem$1({ separator }),
+                    className: cvaListItem$1({
+                        separator,
+                        contentFillsContainer,
+                    }),
                 });
                 const key = row.virtualRow.key;
                 // Render loading row
@@ -3773,6 +3810,10 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
         // eslint-disable-next-line react-hooks/react-compiler
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    // Scroll to top when item count changes (like after filtering)
+    useLayoutEffect(() => {
+        virtualizer.scrollToOffset(0);
+    }, [count, virtualizer]);
     // Transform virtual items into typed rows
     const rows = useMemo(() => {
         const virtualItems = virtualizer.getVirtualItems();
@@ -3835,6 +3876,11 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
             tabIndex: -1,
         };
     }, [onRowClick, virtualizer]);
+    // Calculate scroll position states
+    const isAtTop = useMemo(() => virtualizer.scrollOffset === 0, [virtualizer.scrollOffset]);
+    // totalSize must be out from from useMemo since otherwise we'll not be able to have the  the totalSize as a dependency for the contentFillsContainer
+    const totalSize = virtualizer.getTotalSize();
+    const contentFillsContainer = useMemo(() => (containerRef.current ? totalSize >= containerRef.current.clientHeight : false), [totalSize]);
     return {
         ...virtualizer,
         containerRef,
@@ -3847,6 +3893,8 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
         count,
         separator,
         topSeparatorOnScroll,
+        isAtTop,
+        contentFillsContainer,
     };
 };
 const getResolvedLoadingIndicator = (loadingIndicator) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.9.31",
+  "version": "1.9.33",
   "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.22",
-    "@trackunit/css-class-variance-utilities": "1.7.21",
-    "@trackunit/shared-utils": "1.9.21",
-    "@trackunit/ui-icons": "1.7.23",
-    "@trackunit/react-test-setup": "1.4.21",
+    "@trackunit/ui-design-tokens": "1.7.24",
+    "@trackunit/css-class-variance-utilities": "1.7.23",
+    "@trackunit/shared-utils": "1.9.23",
+    "@trackunit/ui-icons": "1.7.25",
+    "@trackunit/react-test-setup": "1.4.23",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12"

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

@@ -89,4 +89,4 @@ export interface ListProps<TItem = unknown> extends CommonProps, UseListResult<T
  * );
  * ```
  */
-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;
+export declare const List: <TItem = unknown>({ children, className, dataTestId, containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, separator, topSeparatorOnScroll, isAtTop, contentFillsContainer, scrollOffset: _scrollOffset, getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }: ListProps<TItem>) => ReactElement;

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

@@ -4,4 +4,5 @@ export declare const cvaListContainer: (props?: ({
 export declare const cvaList: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaListItem: (props?: ({
     separator?: "line" | "none" | null | undefined;
+    contentFillsContainer?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -150,6 +150,10 @@ export interface UseListResult<TItem> extends Pick<Virtualizer<HTMLDivElement, H
     readonly separator: "none" | "line";
     /** Show a top separator when the list is scrolled */
     readonly topSeparatorOnScroll: boolean;
+    /** Whether the user is scrolled to the top */
+    readonly isAtTop: boolean;
+    /** Whether the content fills the container */
+    readonly contentFillsContainer: boolean;
 }
 /**
  * A hook for managing virtualized list state and behavior.