@wordpress/dataviews 13.1.1-next.v.202603161435.0 → 14.0.0

package/build-module/hooks/use-infinite-scroll.mjs

@@ -0,0 +1,188 @@
+// packages/dataviews/src/hooks/use-infinite-scroll.ts
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef
+} from "@wordpress/element";
+import { throttle } from "@wordpress/compose";
+function captureAnchorElement(container, anchorElementRef, direction) {
+  const containerRect = container.getBoundingClientRect();
+  const centerY = containerRect.top + containerRect.height / 2;
+  const items = Array.from(container.querySelectorAll("[aria-posinset]"));
+  if (items.length === 0) {
+    return false;
+  }
+  const bestAnchor = items.reduce((best, item) => {
+    const itemRect = item.getBoundingClientRect();
+    const itemCenterY = itemRect.top + itemRect.height / 2;
+    const distance = Math.abs(itemCenterY - centerY);
+    const bestRect = best.getBoundingClientRect();
+    const bestCenterY = bestRect.top + bestRect.height / 2;
+    const bestDistance = Math.abs(bestCenterY - centerY);
+    return distance < bestDistance ? item : best;
+  });
+  const posinset = Number(bestAnchor.getAttribute("aria-posinset"));
+  const anchorRect = bestAnchor.getBoundingClientRect();
+  anchorElementRef.current = {
+    posinset,
+    viewportOffset: anchorRect.top - containerRect.top,
+    direction
+  };
+  return true;
+}
+function useInfiniteScroll({
+  view,
+  onChangeView,
+  isLoading,
+  paginationInfo,
+  containerRef,
+  setVisibleEntries
+}) {
+  const anchorElementRef = useRef(null);
+  const viewRef = useRef(view);
+  const isLoadingRef = useRef(isLoading);
+  const onChangeViewRef = useRef(onChangeView);
+  const totalItemsRef = useRef(paginationInfo.totalItems);
+  useLayoutEffect(() => {
+    viewRef.current = view;
+    isLoadingRef.current = isLoading;
+    onChangeViewRef.current = onChangeView;
+    totalItemsRef.current = paginationInfo.totalItems;
+  }, [view, isLoading, onChangeView, paginationInfo.totalItems]);
+  const intersectionObserverCallback = useCallback(
+    (entries) => {
+      if (!setVisibleEntries) {
+        return;
+      }
+      setVisibleEntries((prev) => {
+        const newVisibleEntries = new Set(prev);
+        let hasChanged = false;
+        entries.forEach((entry) => {
+          const posInSet = Number(
+            entry.target?.attributes?.getNamedItem(
+              "aria-posinset"
+            )?.value
+          );
+          if (isNaN(posInSet)) {
+            return;
+          }
+          if (entry.isIntersecting) {
+            if (!newVisibleEntries.has(posInSet)) {
+              newVisibleEntries.add(posInSet);
+              hasChanged = true;
+            }
+          } else if (newVisibleEntries.has(posInSet)) {
+            newVisibleEntries.delete(posInSet);
+            hasChanged = true;
+          }
+        });
+        return hasChanged ? Array.from(newVisibleEntries).sort() : prev;
+      });
+    },
+    [setVisibleEntries]
+  );
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    const anchor = anchorElementRef.current;
+    if (!container || !view.infiniteScrollEnabled || !anchor || isLoading) {
+      return;
+    }
+    const anchorElement = container.querySelector(
+      `[aria-posinset="${anchor.posinset}"]`
+    );
+    if (anchorElement) {
+      const containerRect = container.getBoundingClientRect();
+      const anchorRect = anchorElement.getBoundingClientRect();
+      const currentOffset = anchorRect.top - containerRect.top;
+      const scrollAdjustment = currentOffset - anchor.viewportOffset;
+      if (Math.abs(scrollAdjustment) > 1) {
+        container.scrollTop += scrollAdjustment;
+      }
+    }
+    anchorElementRef.current = null;
+  }, [containerRef, isLoading, view.infiniteScrollEnabled]);
+  const intersectionObserverRef = useRef(
+    null
+  );
+  useEffect(() => {
+    if (!view.infiniteScrollEnabled || !intersectionObserverCallback) {
+      if (intersectionObserverRef.current) {
+        intersectionObserverRef.current.disconnect();
+        intersectionObserverRef.current = null;
+      }
+      return;
+    }
+    intersectionObserverRef.current = new IntersectionObserver(
+      intersectionObserverCallback,
+      { root: null, rootMargin: "0px", threshold: 0.1 }
+    );
+    return () => {
+      if (intersectionObserverRef.current) {
+        intersectionObserverRef.current.disconnect();
+        intersectionObserverRef.current = null;
+      }
+    };
+  }, [view.infiniteScrollEnabled, intersectionObserverCallback]);
+  useEffect(() => {
+    if (!view.infiniteScrollEnabled || !containerRef.current) {
+      return;
+    }
+    let lastScrollTop = 0;
+    const BOTTOM_THRESHOLD = 600;
+    const TOP_THRESHOLD = 800;
+    const handleScroll = throttle((event) => {
+      const currentView = viewRef.current;
+      const totalItems = totalItemsRef.current;
+      const target = event.target;
+      const scrollTop = target.scrollTop;
+      const scrollHeight = target.scrollHeight;
+      const clientHeight = target.clientHeight;
+      const scrollDirection = scrollTop > lastScrollTop ? "down" : "up";
+      lastScrollTop = scrollTop;
+      if (isLoadingRef.current) {
+        return;
+      }
+      const currentStartPosition = currentView.startPosition || 1;
+      const batchSize = currentView.perPage || 10;
+      const currentEndPosition = Math.min(
+        currentStartPosition + batchSize,
+        totalItems
+      );
+      if (scrollDirection === "down" && scrollTop + clientHeight >= scrollHeight - BOTTOM_THRESHOLD) {
+        if (currentEndPosition < totalItems) {
+          const newStartPosition = currentEndPosition;
+          captureAnchorElement(target, anchorElementRef, "down");
+          onChangeViewRef.current({
+            ...currentView,
+            startPosition: newStartPosition
+          });
+        }
+      }
+      if (scrollDirection === "up" && scrollTop <= TOP_THRESHOLD) {
+        if (currentStartPosition > 1) {
+          const calculatedStartPosition = currentStartPosition - batchSize;
+          const newStartPosition = calculatedStartPosition < 6 ? 1 : calculatedStartPosition;
+          captureAnchorElement(target, anchorElementRef, "up");
+          onChangeViewRef.current({
+            ...currentView,
+            startPosition: newStartPosition
+          });
+        }
+      }
+    }, 50);
+    const container = containerRef.current;
+    container.addEventListener("scroll", handleScroll);
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+      handleScroll.cancel();
+    };
+  }, [containerRef, view.infiniteScrollEnabled]);
+  return {
+    intersectionObserver: intersectionObserverRef.current
+  };
+}
+export {
+  useInfiniteScroll
+};
+//# sourceMappingURL=use-infinite-scroll.mjs.map

package/build-module/hooks/use-infinite-scroll.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/hooks/use-infinite-scroll.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseRef,\n} from '@wordpress/element';\nimport { throttle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { View } from '../types';\n\n/**\n * Captures an anchor element for scroll position preservation.\n * Finds the element closest to the center of the viewport and stores its position.\n *\n * @param container        The scrollable container element.\n * @param anchorElementRef Ref to store the anchor element data.\n * @param direction        The scroll direction ('up' or 'down').\n * @return Whether an anchor element was successfully captured.\n */\nfunction captureAnchorElement(\n\tcontainer: HTMLElement,\n\tanchorElementRef: React.MutableRefObject< {\n\t\tposinset: number;\n\t\tviewportOffset: number;\n\t\tdirection: 'up' | 'down' | null;\n\t} | null >,\n\tdirection: 'up' | 'down'\n): boolean {\n\t// Find a visible element to use as anchor - prefer one in the middle of the viewport\n\tconst containerRect = container.getBoundingClientRect();\n\tconst centerY = containerRect.top + containerRect.height / 2;\n\n\t// Query all items with aria-posinset and find the one closest to center\n\tconst items = Array.from( container.querySelectorAll( '[aria-posinset]' ) );\n\n\tif ( items.length === 0 ) {\n\t\treturn false;\n\t}\n\n\t// Find the item closest to the center of the viewport\n\tconst bestAnchor = items.reduce( ( best, item ) => {\n\t\tconst itemRect = item.getBoundingClientRect();\n\t\tconst itemCenterY = itemRect.top + itemRect.height / 2;\n\t\tconst distance = Math.abs( itemCenterY - centerY );\n\n\t\tconst bestRect = best.getBoundingClientRect();\n\t\tconst bestCenterY = bestRect.top + bestRect.height / 2;\n\t\tconst bestDistance = Math.abs( bestCenterY - centerY );\n\n\t\treturn distance < bestDistance ? item : best;\n\t} );\n\n\tconst posinset = Number( bestAnchor.getAttribute( 'aria-posinset' ) );\n\tconst anchorRect = bestAnchor.getBoundingClientRect();\n\tanchorElementRef.current = {\n\t\tposinset,\n\t\tviewportOffset: anchorRect.top - containerRect.top,\n\t\tdirection,\n\t};\n\treturn true;\n}\n\ntype UseInfiniteScrollProps = {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tisLoading: boolean;\n\tpaginationInfo: {\n\t\ttotalItems: number;\n\t\ttotalPages: number;\n\t};\n\tcontainerRef: React.MutableRefObject< HTMLDivElement | null >;\n\tsetVisibleEntries?: React.Dispatch< React.SetStateAction< number[] > >;\n};\n\ntype UseInfiniteScrollResult = {\n\tintersectionObserver?: IntersectionObserver | null;\n};\n\nexport function useInfiniteScroll( {\n\tview,\n\tonChangeView,\n\tisLoading,\n\tpaginationInfo,\n\tcontainerRef,\n\tsetVisibleEntries,\n}: UseInfiniteScrollProps ): UseInfiniteScrollResult {\n\t// Track an anchor element for scroll position preservation\n\t// This approach is robust even when items are added/removed from both ends simultaneously\n\tconst anchorElementRef = useRef< {\n\t\tposinset: number;\n\t\tviewportOffset: number;\n\t\tdirection: 'up' | 'down' | null;\n\t} | null >( null );\n\tconst viewRef = useRef( view );\n\tconst isLoadingRef = useRef( isLoading );\n\tconst onChangeViewRef = useRef( onChangeView );\n\tconst totalItemsRef = useRef( paginationInfo.totalItems );\n\n\tuseLayoutEffect( () => {\n\t\tviewRef.current = view;\n\t\tisLoadingRef.current = isLoading;\n\t\tonChangeViewRef.current = onChangeView;\n\t\ttotalItemsRef.current = paginationInfo.totalItems;\n\t}, [ view, isLoading, onChangeView, paginationInfo.totalItems ] );\n\n\tconst intersectionObserverCallback: IntersectionObserverCallback =\n\t\tuseCallback(\n\t\t\t( entries: IntersectionObserverEntry[] ) => {\n\t\t\t\t// Calculate new visible entries outside of setState\n\t\t\t\tif ( ! setVisibleEntries ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tsetVisibleEntries( ( prev: number[] ) => {\n\t\t\t\t\tconst newVisibleEntries = new Set( prev );\n\t\t\t\t\tlet hasChanged = false;\n\n\t\t\t\t\tentries.forEach( ( entry ) => {\n\t\t\t\t\t\tconst posInSet = Number(\n\t\t\t\t\t\t\tentry.target?.attributes?.getNamedItem(\n\t\t\t\t\t\t\t\t'aria-posinset'\n\t\t\t\t\t\t\t)?.value\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif ( isNaN( posInSet ) ) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif ( entry.isIntersecting ) {\n\t\t\t\t\t\t\tif ( ! newVisibleEntries.has( posInSet ) ) {\n\t\t\t\t\t\t\t\tnewVisibleEntries.add( posInSet );\n\t\t\t\t\t\t\t\thasChanged = true;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else if ( newVisibleEntries.has( posInSet ) ) {\n\t\t\t\t\t\t\tnewVisibleEntries.delete( posInSet );\n\t\t\t\t\t\t\thasChanged = true;\n\t\t\t\t\t\t}\n\t\t\t\t\t} );\n\n\t\t\t\t\t// Only return new array if something actually changed\n\t\t\t\t\treturn hasChanged\n\t\t\t\t\t\t? Array.from( newVisibleEntries ).sort()\n\t\t\t\t\t\t: prev;\n\t\t\t\t} );\n\t\t\t},\n\t\t\t[ setVisibleEntries ]\n\t\t);\n\n\t// Preserve scroll position when items are added or removed during infinite scroll\n\t// Uses anchor element approach: find the same element after render and restore its viewport position\n\tuseLayoutEffect( () => {\n\t\tconst container = containerRef.current;\n\t\tconst anchor = anchorElementRef.current;\n\n\t\tif (\n\t\t\t! container ||\n\t\t\t! view.infiniteScrollEnabled ||\n\t\t\t! anchor ||\n\t\t\tisLoading\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the anchor element by its posinset\n\t\tconst anchorElement = container.querySelector(\n\t\t\t`[aria-posinset=\"${ anchor.posinset }\"]`\n\t\t);\n\n\t\tif ( anchorElement ) {\n\t\t\tconst containerRect = container.getBoundingClientRect();\n\t\t\tconst anchorRect = anchorElement.getBoundingClientRect();\n\t\t\tconst currentOffset = anchorRect.top - containerRect.top;\n\n\t\t\t// Calculate how much the anchor has moved and adjust scroll to compensate\n\t\t\tconst scrollAdjustment = currentOffset - anchor.viewportOffset;\n\n\t\t\tif ( Math.abs( scrollAdjustment ) > 1 ) {\n\t\t\t\tcontainer.scrollTop += scrollAdjustment;\n\t\t\t}\n\t\t}\n\n\t\t// Reset the anchor state now that we've adjusted\n\t\tanchorElementRef.current = null;\n\t}, [ containerRef, isLoading, view.infiniteScrollEnabled ] );\n\n\t// Create and expose a shared IntersectionObserver for provider-level reuse.\n\tconst intersectionObserverRef = useRef< IntersectionObserver | null >(\n\t\tnull\n\t);\n\tuseEffect( () => {\n\t\tif ( ! view.infiniteScrollEnabled || ! intersectionObserverCallback ) {\n\t\t\tif ( intersectionObserverRef.current ) {\n\t\t\t\tintersectionObserverRef.current.disconnect();\n\t\t\t\tintersectionObserverRef.current = null;\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tintersectionObserverRef.current = new IntersectionObserver(\n\t\t\tintersectionObserverCallback,\n\t\t\t{ root: null, rootMargin: '0px', threshold: 0.1 }\n\t\t);\n\n\t\treturn () => {\n\t\t\tif ( intersectionObserverRef.current ) {\n\t\t\t\tintersectionObserverRef.current.disconnect();\n\t\t\t\tintersectionObserverRef.current = null;\n\t\t\t}\n\t\t};\n\t}, [ view.infiniteScrollEnabled, intersectionObserverCallback ] );\n\n\t// Attach scroll event listener for infinite scroll\n\tuseEffect( () => {\n\t\tif ( ! view.infiniteScrollEnabled || ! containerRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet lastScrollTop = 0;\n\t\t// Use larger thresholds to trigger loading earlier during fast scrolling\n\t\tconst BOTTOM_THRESHOLD = 600; // px from bottom to trigger load\n\t\tconst TOP_THRESHOLD = 800; // px from top to trigger load\n\n\t\tconst handleScroll = throttle( ( event: unknown ) => {\n\t\t\tconst currentView = viewRef.current;\n\t\t\tconst totalItems = totalItemsRef.current;\n\t\t\tconst target = ( event as Event ).target as HTMLElement;\n\t\t\tconst scrollTop = target.scrollTop;\n\t\t\tconst scrollHeight = target.scrollHeight;\n\t\t\tconst clientHeight = target.clientHeight;\n\n\t\t\t// Determine scroll direction\n\t\t\tconst scrollDirection = scrollTop > lastScrollTop ? 'down' : 'up';\n\t\t\tlastScrollTop = scrollTop;\n\n\t\t\t// Don't trigger if already loading\n\t\t\tif ( isLoadingRef.current ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst currentStartPosition = currentView.startPosition || 1;\n\t\t\tconst batchSize = currentView.perPage || 10;\n\t\t\tconst currentEndPosition = Math.min(\n\t\t\t\tcurrentStartPosition + batchSize,\n\t\t\t\ttotalItems\n\t\t\t);\n\n\t\t\t// Check if user has scrolled near the bottom\n\t\t\tif (\n\t\t\t\tscrollDirection === 'down' &&\n\t\t\t\tscrollTop + clientHeight >= scrollHeight - BOTTOM_THRESHOLD\n\t\t\t) {\n\t\t\t\t// Check if there's more data to load\n\t\t\t\tif ( currentEndPosition < totalItems ) {\n\t\t\t\t\tconst newStartPosition = currentEndPosition;\n\n\t\t\t\t\t// Capture anchor element for scroll position preservation\n\t\t\t\t\tcaptureAnchorElement( target, anchorElementRef, 'down' );\n\n\t\t\t\t\tonChangeViewRef.current( {\n\t\t\t\t\t\t...currentView,\n\t\t\t\t\t\tstartPosition: newStartPosition,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Check if user has scrolled near the top\n\t\t\tif ( scrollDirection === 'up' && scrollTop <= TOP_THRESHOLD ) {\n\t\t\t\t// Check if there's more data to load\n\t\t\t\tif ( currentStartPosition > 1 ) {\n\t\t\t\t\t// Round to 1 if we're close to the beginning to avoid tiny batches\n\t\t\t\t\tconst calculatedStartPosition =\n\t\t\t\t\t\tcurrentStartPosition - batchSize;\n\t\t\t\t\tconst newStartPosition =\n\t\t\t\t\t\tcalculatedStartPosition < 6\n\t\t\t\t\t\t\t? 1\n\t\t\t\t\t\t\t: calculatedStartPosition;\n\n\t\t\t\t\t// Capture anchor element for scroll position preservation\n\t\t\t\t\tcaptureAnchorElement( target, anchorElementRef, 'up' );\n\n\t\t\t\t\tonChangeViewRef.current( {\n\t\t\t\t\t\t...currentView,\n\t\t\t\t\t\tstartPosition: newStartPosition,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}, 50 ); // Faster throttle (50ms) for better response to fast scrolling\n\n\t\tconst container = containerRef.current;\n\t\tcontainer.addEventListener( 'scroll', handleScroll );\n\n\t\treturn () => {\n\t\t\tcontainer.removeEventListener( 'scroll', handleScroll );\n\t\t\thandleScroll.cancel(); // Cancel any pending throttled calls\n\t\t};\n\t}, [ containerRef, view.infiniteScrollEnabled ] );\n\n\treturn {\n\t\tintersectionObserver: intersectionObserverRef.current,\n\t};\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/hooks/use-selected-items.mjs

@@ -0,0 +1,36 @@
+// packages/dataviews/src/hooks/use-selected-items.ts
+import { useMemo, useRef } from "@wordpress/element";
+function useSelectedItems(view, data, selection, getItemId, filterFn) {
+  const selectedItemsCacheRef = useRef(/* @__PURE__ */ new Map());
+  return useMemo(() => {
+    const selectionSet = new Set(selection);
+    if (view.infiniteScrollEnabled) {
+      data.forEach((item) => {
+        const id = getItemId(item);
+        if (selectionSet.has(id)) {
+          const passesFilter = filterFn ? filterFn(item) : true;
+          if (passesFilter) {
+            selectedItemsCacheRef.current.set(id, item);
+          }
+        }
+      });
+      selectedItemsCacheRef.current.forEach((_, id) => {
+        if (!selectionSet.has(id)) {
+          selectedItemsCacheRef.current.delete(id);
+        }
+      });
+      return Array.from(selectedItemsCacheRef.current.values());
+    }
+    return data.filter((item) => {
+      const id = getItemId(item);
+      if (!selectionSet.has(id)) {
+        return false;
+      }
+      return filterFn ? filterFn(item) : true;
+    });
+  }, [view.infiniteScrollEnabled, selection, getItemId, data, filterFn]);
+}
+export {
+  useSelectedItems as default
+};
+//# sourceMappingURL=use-selected-items.mjs.map

package/build-module/hooks/use-selected-items.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/hooks/use-selected-items.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { View } from '../types';\n\n/**\n * Hook to get selected items, with support for infinite scroll.\n *\n * When infinite scroll is enabled, items that scroll out of view are cached\n * so they remain available for bulk actions even when not in the current data set.\n *\n * @param view      The current view configuration.\n * @param data      The current page of data items.\n * @param selection Array of selected item IDs.\n * @param getItemId Function to get the ID of an item.\n * @param filterFn  Optional filter function to apply to selected items (e.g., for selectability).\n * @return Array of selected items.\n */\nexport default function useSelectedItems< Item >(\n\tview: View,\n\tdata: Item[],\n\tselection: string[],\n\tgetItemId: ( item: Item ) => string,\n\tfilterFn?: ( item: Item ) => boolean\n): Item[] {\n\t// With infinite scroll enabled items scroll out of view, but we want to keep the selection unaltered,\n\t// unlike page-based navigation where we might clear selection upon navigating to a different page.\n\tconst selectedItemsCacheRef = useRef< Map< string, Item > >( new Map() );\n\n\treturn useMemo( () => {\n\t\tconst selectionSet = new Set( selection );\n\n\t\tif ( view.infiniteScrollEnabled ) {\n\t\t\t// Selection array contains selected item IDs\n\t\t\t// Cache selected items so they remain available when scrolled out of view\n\t\t\tdata.forEach( ( item ) => {\n\t\t\t\tconst id = getItemId( item );\n\t\t\t\tif ( selectionSet.has( id ) ) {\n\t\t\t\t\tconst passesFilter = filterFn ? filterFn( item ) : true;\n\t\t\t\t\tif ( passesFilter ) {\n\t\t\t\t\t\tselectedItemsCacheRef.current.set( id, item );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\t// Remove items from cache that are no longer selected\n\t\t\tselectedItemsCacheRef.current.forEach( ( _, id ) => {\n\t\t\t\tif ( ! selectionSet.has( id ) ) {\n\t\t\t\t\tselectedItemsCacheRef.current.delete( id );\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\t// Return all cached selected items\n\t\t\treturn Array.from( selectedItemsCacheRef.current.values() );\n\t\t}\n\n\t\t// Non-infinite scroll mode\n\t\treturn data.filter( ( item ) => {\n\t\t\tconst id = getItemId( item );\n\t\t\tif ( ! selectionSet.has( id ) ) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\t// Apply optional filter (e.g., selectability check for bulk actions)\n\t\t\treturn filterFn ? filterFn( item ) : true;\n\t\t} );\n\t}, [ view.infiniteScrollEnabled, selection, getItemId, data, filterFn ] );\n}\n"],
+  "mappings": ";AAGA,SAAS,SAAS,cAAc;AAoBjB,SAAR,iBACN,MACA,MACA,WACA,WACA,UACS;AAGT,QAAM,wBAAwB,OAA+B,oBAAI,IAAI,CAAE;AAEvE,SAAO,QAAS,MAAM;AACrB,UAAM,eAAe,IAAI,IAAK,SAAU;AAExC,QAAK,KAAK,uBAAwB;AAGjC,WAAK,QAAS,CAAE,SAAU;AACzB,cAAM,KAAK,UAAW,IAAK;AAC3B,YAAK,aAAa,IAAK,EAAG,GAAI;AAC7B,gBAAM,eAAe,WAAW,SAAU,IAAK,IAAI;AACnD,cAAK,cAAe;AACnB,kCAAsB,QAAQ,IAAK,IAAI,IAAK;AAAA,UAC7C;AAAA,QACD;AAAA,MACD,CAAE;AAGF,4BAAsB,QAAQ,QAAS,CAAE,GAAG,OAAQ;AACnD,YAAK,CAAE,aAAa,IAAK,EAAG,GAAI;AAC/B,gCAAsB,QAAQ,OAAQ,EAAG;AAAA,QAC1C;AAAA,MACD,CAAE;AAGF,aAAO,MAAM,KAAM,sBAAsB,QAAQ,OAAO,CAAE;AAAA,IAC3D;AAGA,WAAO,KAAK,OAAQ,CAAE,SAAU;AAC/B,YAAM,KAAK,UAAW,IAAK;AAC3B,UAAK,CAAE,aAAa,IAAK,EAAG,GAAI;AAC/B,eAAO;AAAA,MACR;AAEA,aAAO,WAAW,SAAU,IAAK,IAAI;AAAA,IACtC,CAAE;AAAA,EACH,GAAG,CAAE,KAAK,uBAAuB,WAAW,WAAW,MAAM,QAAS,CAAE;AACzE;",
+  "names": []
+}

package/build-module/utils/filter-sort-and-paginate.mjs

@@ -77,7 +77,11 @@ function filterSortAndPaginate(data, view, fields) {
   }
   let totalItems = filteredData.length;
   let totalPages = 1;
-  if (view.page !== void 0 && view.perPage !== void 0) {
+  if (view.infiniteScrollEnabled && view.startPosition !== void 0 && view.perPage !== void 0) {
+    const start = view.startPosition - 1;
+    const end = Math.min(start + view.perPage, totalItems);
+    filteredData = filteredData?.slice(start, end);
+  } else if (view.page !== void 0 && view.perPage !== void 0) {
     const start = (view.page - 1) * view.perPage;
     totalItems = filteredData?.length || 0;
     totalPages = Math.ceil(totalItems / view.perPage);

package/build-module/utils/filter-sort-and-paginate.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/filter-sort-and-paginate.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { OPERATOR_IS_NOT_ALL } from '../constants';\nimport normalizeFields from '../field-types';\nimport type { Field, Operator, View } from '../types';\n\nfunction normalizeSearchInput( input = '' ) {\n\treturn removeAccents( input.trim().toLowerCase() );\n}\n\nconst EMPTY_ARRAY: [] = [];\n\n/**\n * Applies the filtering, sorting and pagination to the raw data based on the view configuration.\n *\n * @param data   Raw data.\n * @param view   View config.\n * @param fields Fields config.\n *\n * @return Filtered, sorted and paginated data.\n */\nexport default function filterSortAndPaginate< Item >(\n\tdata: Item[],\n\tview: View,\n\tfields: Field< Item >[]\n): {\n\tdata: Item[];\n\tpaginationInfo: { totalItems: number; totalPages: number };\n} {\n\tif ( ! data ) {\n\t\treturn {\n\t\t\tdata: EMPTY_ARRAY,\n\t\t\tpaginationInfo: { totalItems: 0, totalPages: 0 },\n\t\t};\n\t}\n\tconst _fields = normalizeFields( fields );\n\tlet filteredData = [ ...data ];\n\t// Handle global search.\n\tif ( view.search ) {\n\t\tconst normalizedSearch = normalizeSearchInput( view.search );\n\t\tfilteredData = filteredData.filter( ( item ) => {\n\t\t\treturn _fields\n\t\t\t\t.filter( ( field ) => field.enableGlobalSearch )\n\t\t\t\t.some( ( field ) => {\n\t\t\t\t\tconst fieldValue = field.getValue( { item } );\n\t\t\t\t\tconst values = Array.isArray( fieldValue )\n\t\t\t\t\t\t? fieldValue\n\t\t\t\t\t\t: [ fieldValue ];\n\t\t\t\t\treturn values.some( ( value ) =>\n\t\t\t\t\t\tnormalizeSearchInput( String( value ) ).includes(\n\t\t\t\t\t\t\tnormalizedSearch\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t} );\n\t\t} );\n\t}\n\n\tif ( view.filters && view.filters?.length > 0 ) {\n\t\tview.filters.forEach( ( filter ) => {\n\t\t\tconst field = _fields.find(\n\t\t\t\t( _field ) => _field.id === filter.field\n\t\t\t);\n\t\t\tif ( field ) {\n\t\t\t\t// Show deprecation warning for `isNotAll` operator.\n\t\t\t\t// We still handle this by mapping it to `isNone` in `getFilter`.\n\t\t\t\tif ( filter.operator === OPERATOR_IS_NOT_ALL ) {\n\t\t\t\t\tdeprecated( \"The 'isNotAll' filter operator\", {\n\t\t\t\t\t\tsince: '7.0',\n\t\t\t\t\t\talternative: \"'isNone'\",\n\t\t\t\t\t} );\n\t\t\t\t}\n\n\t\t\t\tconst handler = field.filter[ filter.operator as Operator ];\n\t\t\t\tif ( handler ) {\n\t\t\t\t\tfilteredData = filteredData.filter( ( item ) =>\n\t\t\t\t\t\thandler( item, field, filter.value )\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t}\n\n\t// Handle sorting.\n\tconst sortByField = view.sort?.field\n\t\t? _fields.find( ( field ) => {\n\t\t\t\treturn (\n\t\t\t\t\tfield.enableSorting !== false &&\n\t\t\t\t\tfield.id === view.sort?.field\n\t\t\t\t);\n\t\t  } )\n\t\t: null;\n\tconst groupByField = view.groupBy?.field\n\t\t? _fields.find( ( field ) => {\n\t\t\t\treturn (\n\t\t\t\t\tfield.enableSorting !== false &&\n\t\t\t\t\tfield.id === view.groupBy?.field\n\t\t\t\t);\n\t\t  } )\n\t\t: null;\n\tif ( sortByField || groupByField ) {\n\t\tfilteredData.sort( ( a, b ) => {\n\t\t\tif ( groupByField ) {\n\t\t\t\tconst groupCompare = groupByField.sort(\n\t\t\t\t\ta,\n\t\t\t\t\tb,\n\t\t\t\t\tview.groupBy?.direction ?? 'asc'\n\t\t\t\t);\n\n\t\t\t\t// If items are in different groups, return the group comparison result.\n\t\t\t\t// Otherwise, fall back to sorting by the sort field.\n\t\t\t\tif ( groupCompare !== 0 ) {\n\t\t\t\t\treturn groupCompare;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif ( sortByField ) {\n\t\t\t\treturn sortByField.sort( a, b, view.sort?.direction ?? 'desc' );\n\t\t\t}\n\n\t\t\treturn 0;\n\t\t} );\n\t}\n\n\t// Handle pagination.\n\tlet totalItems = filteredData.length;\n\tlet totalPages = 1;\n\tif ( view.page !== undefined && view.perPage !== undefined ) {\n\t\tconst start = ( view.page - 1 ) * view.perPage;\n\t\ttotalItems = filteredData?.length || 0;\n\t\ttotalPages = Math.ceil( totalItems / view.perPage );\n\t\tfilteredData = filteredData?.slice( start, start + view.perPage );\n\t}\n\n\treturn {\n\t\tdata: filteredData,\n\t\tpaginationInfo: {\n\t\t\ttotalItems,\n\t\t\ttotalPages,\n\t\t},\n\t};\n}\n"],
-  "mappings": ";AAGA,OAAO,mBAAmB;AAK1B,OAAO,gBAAgB;AAKvB,SAAS,2BAA2B;AACpC,OAAO,qBAAqB;AAG5B,SAAS,qBAAsB,QAAQ,IAAK;AAC3C,SAAO,cAAe,MAAM,KAAK,EAAE,YAAY,CAAE;AAClD;AAEA,IAAM,cAAkB,CAAC;AAWV,SAAR,sBACN,MACA,MACA,QAIC;AACD,MAAK,CAAE,MAAO;AACb,WAAO;AAAA,MACN,MAAM;AAAA,MACN,gBAAgB,EAAE,YAAY,GAAG,YAAY,EAAE;AAAA,IAChD;AAAA,EACD;AACA,QAAM,UAAU,gBAAiB,MAAO;AACxC,MAAI,eAAe,CAAE,GAAG,IAAK;AAE7B,MAAK,KAAK,QAAS;AAClB,UAAM,mBAAmB,qBAAsB,KAAK,MAAO;AAC3D,mBAAe,aAAa,OAAQ,CAAE,SAAU;AAC/C,aAAO,QACL,OAAQ,CAAE,UAAW,MAAM,kBAAmB,EAC9C,KAAM,CAAE,UAAW;AACnB,cAAM,aAAa,MAAM,SAAU,EAAE,KAAK,CAAE;AAC5C,cAAM,SAAS,MAAM,QAAS,UAAW,IACtC,aACA,CAAE,UAAW;AAChB,eAAO,OAAO;AAAA,UAAM,CAAE,UACrB,qBAAsB,OAAQ,KAAM,CAAE,EAAE;AAAA,YACvC;AAAA,UACD;AAAA,QACD;AAAA,MACD,CAAE;AAAA,IACJ,CAAE;AAAA,EACH;AAEA,MAAK,KAAK,WAAW,KAAK,SAAS,SAAS,GAAI;AAC/C,SAAK,QAAQ,QAAS,CAAE,WAAY;AACnC,YAAM,QAAQ,QAAQ;AAAA,QACrB,CAAE,WAAY,OAAO,OAAO,OAAO;AAAA,MACpC;AACA,UAAK,OAAQ;AAGZ,YAAK,OAAO,aAAa,qBAAsB;AAC9C,qBAAY,kCAAkC;AAAA,YAC7C,OAAO;AAAA,YACP,aAAa;AAAA,UACd,CAAE;AAAA,QACH;AAEA,cAAM,UAAU,MAAM,OAAQ,OAAO,QAAqB;AAC1D,YAAK,SAAU;AACd,yBAAe,aAAa;AAAA,YAAQ,CAAE,SACrC,QAAS,MAAM,OAAO,OAAO,KAAM;AAAA,UACpC;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH;AAGA,QAAM,cAAc,KAAK,MAAM,QAC5B,QAAQ,KAAM,CAAE,UAAW;AAC3B,WACC,MAAM,kBAAkB,SACxB,MAAM,OAAO,KAAK,MAAM;AAAA,EAEzB,CAAE,IACF;AACH,QAAM,eAAe,KAAK,SAAS,QAChC,QAAQ,KAAM,CAAE,UAAW;AAC3B,WACC,MAAM,kBAAkB,SACxB,MAAM,OAAO,KAAK,SAAS;AAAA,EAE5B,CAAE,IACF;AACH,MAAK,eAAe,cAAe;AAClC,iBAAa,KAAM,CAAE,GAAG,MAAO;AAC9B,UAAK,cAAe;AACnB,cAAM,eAAe,aAAa;AAAA,UACjC;AAAA,UACA;AAAA,UACA,KAAK,SAAS,aAAa;AAAA,QAC5B;AAIA,YAAK,iBAAiB,GAAI;AACzB,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,UAAK,aAAc;AAClB,eAAO,YAAY,KAAM,GAAG,GAAG,KAAK,MAAM,aAAa,MAAO;AAAA,MAC/D;AAEA,aAAO;AAAA,IACR,CAAE;AAAA,EACH;AAGA,MAAI,aAAa,aAAa;AAC9B,MAAI,aAAa;AACjB,MAAK,KAAK,SAAS,UAAa,KAAK,YAAY,QAAY;AAC5D,UAAM,SAAU,KAAK,OAAO,KAAM,KAAK;AACvC,iBAAa,cAAc,UAAU;AACrC,iBAAa,KAAK,KAAM,aAAa,KAAK,OAAQ;AAClD,mBAAe,cAAc,MAAO,OAAO,QAAQ,KAAK,OAAQ;AAAA,EACjE;AAEA,SAAO;AAAA,IACN,MAAM;AAAA,IACN,gBAAgB;AAAA,MACf;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { OPERATOR_IS_NOT_ALL } from '../constants';\nimport normalizeFields from '../field-types';\nimport type { Field, Operator, View } from '../types';\n\nfunction normalizeSearchInput( input = '' ) {\n\treturn removeAccents( input.trim().toLowerCase() );\n}\n\nconst EMPTY_ARRAY: [] = [];\n\n/**\n * Applies the filtering, sorting and pagination to the raw data based on the view configuration.\n *\n * @param data   Raw data.\n * @param view   View config.\n * @param fields Fields config.\n *\n * @return Filtered, sorted and paginated data.\n */\nexport default function filterSortAndPaginate< Item >(\n\tdata: Item[],\n\tview: View,\n\tfields: Field< Item >[]\n): {\n\tdata: Item[];\n\tpaginationInfo: { totalItems: number; totalPages: number };\n} {\n\tif ( ! data ) {\n\t\treturn {\n\t\t\tdata: EMPTY_ARRAY,\n\t\t\tpaginationInfo: { totalItems: 0, totalPages: 0 },\n\t\t};\n\t}\n\tconst _fields = normalizeFields( fields );\n\tlet filteredData = [ ...data ];\n\t// Handle global search.\n\tif ( view.search ) {\n\t\tconst normalizedSearch = normalizeSearchInput( view.search );\n\t\tfilteredData = filteredData.filter( ( item ) => {\n\t\t\treturn _fields\n\t\t\t\t.filter( ( field ) => field.enableGlobalSearch )\n\t\t\t\t.some( ( field ) => {\n\t\t\t\t\tconst fieldValue = field.getValue( { item } );\n\t\t\t\t\tconst values = Array.isArray( fieldValue )\n\t\t\t\t\t\t? fieldValue\n\t\t\t\t\t\t: [ fieldValue ];\n\t\t\t\t\treturn values.some( ( value ) =>\n\t\t\t\t\t\tnormalizeSearchInput( String( value ) ).includes(\n\t\t\t\t\t\t\tnormalizedSearch\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t} );\n\t\t} );\n\t}\n\n\tif ( view.filters && view.filters?.length > 0 ) {\n\t\tview.filters.forEach( ( filter ) => {\n\t\t\tconst field = _fields.find(\n\t\t\t\t( _field ) => _field.id === filter.field\n\t\t\t);\n\t\t\tif ( field ) {\n\t\t\t\t// Show deprecation warning for `isNotAll` operator.\n\t\t\t\t// We still handle this by mapping it to `isNone` in `getFilter`.\n\t\t\t\tif ( filter.operator === OPERATOR_IS_NOT_ALL ) {\n\t\t\t\t\tdeprecated( \"The 'isNotAll' filter operator\", {\n\t\t\t\t\t\tsince: '7.0',\n\t\t\t\t\t\talternative: \"'isNone'\",\n\t\t\t\t\t} );\n\t\t\t\t}\n\n\t\t\t\tconst handler = field.filter[ filter.operator as Operator ];\n\t\t\t\tif ( handler ) {\n\t\t\t\t\tfilteredData = filteredData.filter( ( item ) =>\n\t\t\t\t\t\thandler( item, field, filter.value )\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t}\n\n\t// Handle sorting.\n\tconst sortByField = view.sort?.field\n\t\t? _fields.find( ( field ) => {\n\t\t\t\treturn (\n\t\t\t\t\tfield.enableSorting !== false &&\n\t\t\t\t\tfield.id === view.sort?.field\n\t\t\t\t);\n\t\t  } )\n\t\t: null;\n\tconst groupByField = view.groupBy?.field\n\t\t? _fields.find( ( field ) => {\n\t\t\t\treturn (\n\t\t\t\t\tfield.enableSorting !== false &&\n\t\t\t\t\tfield.id === view.groupBy?.field\n\t\t\t\t);\n\t\t  } )\n\t\t: null;\n\tif ( sortByField || groupByField ) {\n\t\tfilteredData.sort( ( a, b ) => {\n\t\t\tif ( groupByField ) {\n\t\t\t\tconst groupCompare = groupByField.sort(\n\t\t\t\t\ta,\n\t\t\t\t\tb,\n\t\t\t\t\tview.groupBy?.direction ?? 'asc'\n\t\t\t\t);\n\n\t\t\t\t// If items are in different groups, return the group comparison result.\n\t\t\t\t// Otherwise, fall back to sorting by the sort field.\n\t\t\t\tif ( groupCompare !== 0 ) {\n\t\t\t\t\treturn groupCompare;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif ( sortByField ) {\n\t\t\t\treturn sortByField.sort( a, b, view.sort?.direction ?? 'desc' );\n\t\t\t}\n\n\t\t\treturn 0;\n\t\t} );\n\t}\n\n\t// Handle pagination.\n\tlet totalItems = filteredData.length;\n\tlet totalPages = 1;\n\n\t// Use position-based pagination for infinite scroll\n\tif (\n\t\tview.infiniteScrollEnabled &&\n\t\tview.startPosition !== undefined &&\n\t\tview.perPage !== undefined\n\t) {\n\t\t// Convert 1-indexed positions to 0-indexed array indices\n\t\tconst start = view.startPosition - 1;\n\t\tconst end = Math.min( start + view.perPage, totalItems );\n\t\tfilteredData = filteredData?.slice( start, end );\n\t} else if ( view.page !== undefined && view.perPage !== undefined ) {\n\t\t// Use traditional page-based pagination\n\t\tconst start = ( view.page - 1 ) * view.perPage;\n\t\ttotalItems = filteredData?.length || 0;\n\t\ttotalPages = Math.ceil( totalItems / view.perPage );\n\t\tfilteredData = filteredData?.slice( start, start + view.perPage );\n\t}\n\n\treturn {\n\t\tdata: filteredData,\n\t\tpaginationInfo: {\n\t\t\ttotalItems,\n\t\t\ttotalPages,\n\t\t},\n\t};\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/utils/get-footer-message.mjs

@@ -1,6 +1,6 @@
 // packages/dataviews/src/utils/get-footer-message.ts
 import { _n, sprintf } from "@wordpress/i18n";
-function getFooterMessage(selectionCount, itemsCount, totalItems) {
+function getFooterMessage(selectionCount, itemsCount, totalItems, onlyTotalCount = false) {
   if (selectionCount > 0) {
     return sprintf(
       /* translators: %d: number of items. */
@@ -8,18 +8,18 @@ function getFooterMessage(selectionCount, itemsCount, totalItems) {
       selectionCount
     );
   }
-  if (totalItems > itemsCount) {
+  if (onlyTotalCount || totalItems <= itemsCount) {
     return sprintf(
-      /* translators: %1$d: number of items. %2$d: total number of items. */
-      _n("%1$d of %2$d Item", "%1$d of %2$d Items", totalItems),
-      itemsCount,
+      /* translators: %d: number of items. */
+      _n("%d Item", "%d Items", totalItems),
       totalItems
     );
   }
   return sprintf(
-    /* translators: %d: number of items. */
-    _n("%d Item", "%d Items", itemsCount),
-    itemsCount
+    /* translators: %1$d: number of items. %2$d: total number of items. */
+    _n("%1$d of %2$d Item", "%1$d of %2$d Items", totalItems),
+    itemsCount,
+    totalItems
   );
 }
 export {

package/build-module/utils/get-footer-message.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/get-footer-message.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Get the footer message for the DataViews footer.\n *\n * @param selectionCount - The number of items selected.\n * @param itemsCount     - The number of items in the current page.\n * @param totalItems     - The total number of items.\n * @return               - The footer message.\n */\nexport default function getFooterMessage(\n\tselectionCount: number,\n\titemsCount: number,\n\ttotalItems: number\n): string {\n\tif ( selectionCount > 0 ) {\n\t\treturn sprintf(\n\t\t\t/* translators: %d: number of items. */\n\t\t\t_n( '%d Item selected', '%d Items selected', selectionCount ),\n\t\t\tselectionCount\n\t\t);\n\t}\n\n\tif ( totalItems > itemsCount ) {\n\t\treturn sprintf(\n\t\t\t/* translators: %1$d: number of items. %2$d: total number of items. */\n\t\t\t_n( '%1$d of %2$d Item', '%1$d of %2$d Items', totalItems ),\n\t\t\titemsCount,\n\t\t\ttotalItems\n\t\t);\n\t}\n\n\treturn sprintf(\n\t\t/* translators: %d: number of items. */\n\t\t_n( '%d Item', '%d Items', itemsCount ),\n\t\titemsCount\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,IAAI,eAAe;AAUb,SAAR,iBACN,gBACA,YACA,YACS;AACT,MAAK,iBAAiB,GAAI;AACzB,WAAO;AAAA;AAAA,MAEN,GAAI,oBAAoB,qBAAqB,cAAe;AAAA,MAC5D;AAAA,IACD;AAAA,EACD;AAEA,MAAK,aAAa,YAAa;AAC9B,WAAO;AAAA;AAAA,MAEN,GAAI,qBAAqB,sBAAsB,UAAW;AAAA,MAC1D;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AAAA;AAAA,IAEN,GAAI,WAAW,YAAY,UAAW;AAAA,IACtC;AAAA,EACD;AACD;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Get the footer message for the DataViews footer.\n *\n * @param selectionCount - The number of selected items.\n * @param itemsCount     - The number of items in the current page.\n * @param totalItems     - The total number of items.\n * @param onlyTotalCount - Whether to only show the total count (used with infinite scroll).\n * @return               - The footer message.\n */\nexport default function getFooterMessage(\n\tselectionCount: number,\n\titemsCount: number,\n\ttotalItems: number,\n\tonlyTotalCount = false\n): string {\n\tif ( selectionCount > 0 ) {\n\t\treturn sprintf(\n\t\t\t/* translators: %d: number of items. */\n\t\t\t_n( '%d Item selected', '%d Items selected', selectionCount ),\n\t\t\tselectionCount\n\t\t);\n\t}\n\n\t// No selection - show item count\n\tif ( onlyTotalCount || totalItems <= itemsCount ) {\n\t\treturn sprintf(\n\t\t\t/* translators: %d: number of items. */\n\t\t\t_n( '%d Item', '%d Items', totalItems ),\n\t\t\ttotalItems\n\t\t);\n\t}\n\n\treturn sprintf(\n\t\t/* translators: %1$d: number of items. %2$d: total number of items. */\n\t\t_n( '%1$d of %2$d Item', '%1$d of %2$d Items', totalItems ),\n\t\titemsCount,\n\t\ttotalItems\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,IAAI,eAAe;AAWb,SAAR,iBACN,gBACA,YACA,YACA,iBAAiB,OACR;AACT,MAAK,iBAAiB,GAAI;AACzB,WAAO;AAAA;AAAA,MAEN,GAAI,oBAAoB,qBAAqB,cAAe;AAAA,MAC5D;AAAA,IACD;AAAA,EACD;AAGA,MAAK,kBAAkB,cAAc,YAAa;AACjD,WAAO;AAAA;AAAA,MAEN,GAAI,WAAW,YAAY,UAAW;AAAA,MACtC;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AAAA;AAAA,IAEN,GAAI,qBAAqB,sBAAsB,UAAW;AAAA,IAC1D;AAAA,IACA;AAAA,EACD;AACD;",
   "names": []
 }

package/build-style/style-rtl.css

@@ -213,13 +213,11 @@
   border-radius: 2px;
 }
 
-/**
- * When DataViews are placed within cards, apply a consistent top padding.
- */
-.components-card__body:has(> .dataviews-wrapper),
-.components-card__body:has(> .dataviews-picker-wrapper) {
-  padding: 8px 0 0;
-  overflow: hidden;
+.dataviews__view-actions--infinite-scroll {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background-color: #fff;
 }
 
 .dataviews-bulk-actions-footer__item-count {
@@ -976,37 +974,48 @@
   pointer-events: none;
   outline: 2px solid transparent;
 }
-.dataviews-view-grid .dataviews-view-grid__card {
+
+.dataviews-view-grid .dataviews-view-grid__card,
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card {
   height: 100%;
   justify-content: flex-start;
   position: relative;
 }
-.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title {
+.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title,
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title {
   padding: 8px 0 4px;
 }
-.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field {
+.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field,
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field {
   min-height: 24px;
   overflow: hidden;
   align-content: center;
   text-align: start;
 }
-.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
+.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable,
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
   width: fit-content;
 }
-.dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
+.dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
   color: #1e1e1e;
 }
 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
-.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
+.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after,
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
   background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 }
-.dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after {
+.dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after {
   box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 }
-.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
+.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after,
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
-.dataviews-view-grid .dataviews-view-grid__media {
+.dataviews-view-grid .dataviews-view-grid__media,
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__media {
   width: 100%;
   aspect-ratio: 1/1;
   background-color: #fff;
@@ -1014,15 +1023,18 @@
   overflow: hidden;
   position: relative;
 }
-.dataviews-view-grid .dataviews-view-grid__media.dataviews-view-grid__media--placeholder {
+.dataviews-view-grid .dataviews-view-grid__media.dataviews-view-grid__media--placeholder,
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__media.dataviews-view-grid__media--placeholder {
   aspect-ratio: 3/1;
 }
-.dataviews-view-grid .dataviews-view-grid__media img {
+.dataviews-view-grid .dataviews-view-grid__media img,
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img {
   object-fit: cover;
   width: 100%;
   height: 100%;
 }
-.dataviews-view-grid .dataviews-view-grid__media::after {
+.dataviews-view-grid .dataviews-view-grid__media::after,
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__media::after {
   content: "";
   position: absolute;
   top: 0;
@@ -1033,7 +1045,8 @@
   border-radius: 4px;
   pointer-events: none;
 }
-.dataviews-view-grid .dataviews-view-grid__media .dataviews-view-grid__media-placeholder {
+.dataviews-view-grid .dataviews-view-grid__media .dataviews-view-grid__media-placeholder,
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__media .dataviews-view-grid__media-placeholder {
   width: 100%;
   height: 100%;
   display: block;
@@ -1041,48 +1054,58 @@
   box-shadow: none;
   background: #f0f0f0;
 }
-.dataviews-view-grid .dataviews-view-grid__fields {
+.dataviews-view-grid .dataviews-view-grid__fields,
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields {
   position: relative;
   font-size: 12px;
   line-height: 16px;
 }
-.dataviews-view-grid .dataviews-view-grid__fields:not(:empty) {
+.dataviews-view-grid .dataviews-view-grid__fields:not(:empty),
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields:not(:empty) {
   padding: 0 0 12px;
 }
-.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty) {
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty),
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty) {
   min-height: 24px;
   line-height: 20px;
   padding-top: 2px;
 }
-.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field {
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field,
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field {
   min-height: 24px;
   align-items: center;
 }
-.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name,
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
   width: 35%;
   color: #757575;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
   width: 65%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))),
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
   display: none;
 }
-.dataviews-view-grid .dataviews-view-grid__badge-fields:not(:empty) {
+.dataviews-view-grid .dataviews-view-grid__badge-fields:not(:empty),
+.dataviews-view-grid-infinite-scroll .dataviews-view-grid__badge-fields:not(:empty) {
   padding-bottom: 12px;
 }
-.dataviews-view-grid.is-refreshing {
+.dataviews-view-grid.is-refreshing,
+.dataviews-view-grid-infinite-scroll.is-refreshing {
   opacity: 0.5;
   pointer-events: none;
 }
 @media not (prefers-reduced-motion) {
-  .dataviews-view-grid.is-refreshing {
+  .dataviews-view-grid.is-refreshing,
+  .dataviews-view-grid-infinite-scroll.is-refreshing {
     opacity: 1;
     animation: dataviews-pulse 1s ease-in-out infinite;
   }
@@ -2233,17 +2256,18 @@ div.dataviews-view-list {
   align-items: center;
 }
 
-.dataforms-layouts-card__field-header-label {
-  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  font-weight: 499;
-  font-size: 15px;
-  line-height: 20px;
-}
-
 .dataforms-layouts-card__field {
   width: 100%;
 }
 
+.dataforms-layouts-card__field-header-content {
+  min-height: 24px;
+}
+
+.dataforms-layouts-card__field-header-content-description {
+  display: contents;
+}
+
 .dataforms-layouts-card__field-description {
   color: #757575;
   display: block;