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

package/build-module/dataviews-picker/index.mjs

@@ -1,6 +1,13 @@
 // packages/dataviews/src/dataviews-picker/index.tsx
-import { useEffect, useMemo, useRef, useState } from "@wordpress/element";
-import { useResizeObserver, throttle } from "@wordpress/compose";
+import clsx from "clsx";
+import {
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "@wordpress/element";
+import { useResizeObserver } from "@wordpress/compose";
 import { Stack } from "@wordpress/ui";
 import DataViewsContext from "../components/dataviews-context/index.mjs";
 import { VIEW_LAYOUTS } from "../components/dataviews-layouts/index.mjs";
@@ -19,6 +26,8 @@ import DataViewsViewConfig, {
   ViewTypeMenu
 } from "../components/dataviews-view-config/index.mjs";
 import normalizeFields from "../field-types/index.mjs";
+import useData from "../hooks/use-data.mjs";
+import { useInfiniteScroll } from "../hooks/use-infinite-scroll.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var isItemClickable = () => false;
 var dataViewsPickerLayouts = VIEW_LAYOUTS.filter(
@@ -30,6 +39,8 @@ function DefaultUI({
   search = true,
   searchLabel = void 0
 }) {
+  const { view } = useContext(DataViewsContext);
+  const isInfiniteScroll = view.infiniteScrollEnabled;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       Stack,
@@ -37,7 +48,9 @@ function DefaultUI({
         direction: "row",
         align: "top",
         justify: "space-between",
-        className: "dataviews__view-actions",
+        className: clsx("dataviews__view-actions", {
+          "dataviews__view-actions--infinite-scroll": isInfiniteScroll
+        }),
         gap: "xs",
         children: [
           /* @__PURE__ */ jsxs(
@@ -81,7 +94,13 @@ function DataViewsPicker({
   itemListLabel,
   empty
 }) {
-  const { infiniteScrollHandler } = paginationInfo;
+  const { data: displayData, setVisibleEntries } = useData({
+    view,
+    data,
+    getItemId,
+    selection,
+    paginationInfo
+  });
   const containerRef = useRef(null);
   const [containerWidth, setContainerWidth] = useState(0);
   const resizeObserverRef = useResizeObserver(
@@ -110,31 +129,19 @@ function DataViewsPicker({
   const [isShowingFilter, setIsShowingFilter] = useState(
     hasPrimaryOrLockedFilters
   );
+  const { intersectionObserver } = useInfiniteScroll({
+    view,
+    onChangeView,
+    isLoading,
+    paginationInfo,
+    containerRef,
+    setVisibleEntries
+  });
   useEffect(() => {
     if (hasPrimaryOrLockedFilters && !isShowingFilter) {
       setIsShowingFilter(true);
     }
   }, [hasPrimaryOrLockedFilters, isShowingFilter]);
-  useEffect(() => {
-    if (!view.infiniteScrollEnabled || !containerRef.current) {
-      return;
-    }
-    const handleScroll = throttle((event) => {
-      const target = event.target;
-      const scrollTop = target.scrollTop;
-      const scrollHeight = target.scrollHeight;
-      const clientHeight = target.clientHeight;
-      if (scrollTop + clientHeight >= scrollHeight - 100) {
-        infiniteScrollHandler?.();
-      }
-    }, 100);
-    const container = containerRef.current;
-    container.addEventListener("scroll", handleScroll);
-    return () => {
-      container.removeEventListener("scroll", handleScroll);
-      handleScroll.cancel();
-    };
-  }, [infiniteScrollHandler, view.infiniteScrollEnabled]);
   const defaultLayouts = useMemo(
     () => Object.fromEntries(
       Object.entries(defaultLayoutsProperty).filter(
@@ -158,7 +165,7 @@ function DataViewsPicker({
         onChangeView,
         fields: _fields,
         actions,
-        data,
+        data: displayData,
         isLoading,
         paginationInfo,
         isItemClickable,
@@ -178,9 +185,9 @@ function DataViewsPicker({
         itemListLabel,
         empty,
         hasInitiallyLoaded: true,
-        hasInfiniteScrollHandler: !!infiniteScrollHandler
+        intersectionObserver
       },
-      children: /* @__PURE__ */ jsx("div", { className: "dataviews-picker-wrapper", ref: containerRef, children: children ?? /* @__PURE__ */ jsx(DefaultUI, { search, searchLabel }) })
+      children: /* @__PURE__ */ jsx("div", { className: "dataviews-picker-wrapper", children: children ?? /* @__PURE__ */ jsx(DefaultUI, { search, searchLabel }) })
     }
   );
 }

package/build-module/dataviews-picker/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dataviews-picker/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useMemo, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver, throttle } from '@wordpress/compose';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../components/dataviews-context';\nimport { VIEW_LAYOUTS } from '../components/dataviews-layouts';\nimport {\n\tFilters,\n\tFiltersToggled,\n\tuseFilters,\n\tFiltersToggle,\n} from '../components/dataviews-filters';\nimport DataViewsLayout from '../components/dataviews-layout';\nimport { DataViewsPickerFooter } from '../components/dataviews-picker-footer';\nimport DataViewsSearch from '../components/dataviews-search';\nimport { DataViewsPagination } from '../components/dataviews-pagination';\nimport DataViewsViewConfig, {\n\tDataviewsViewConfigDropdown,\n\tViewTypeMenu,\n} from '../components/dataviews-view-config';\nimport normalizeFields from '../field-types';\nimport type { ActionButton, Field, View, SupportedLayouts } from '../types';\nimport type { SelectionOrUpdater } from '../types/private';\ntype ItemWithId = { id: string };\n\nconst isItemClickable = () => false;\n\nconst dataViewsPickerLayouts = VIEW_LAYOUTS.filter(\n\t( viewLayout ) => viewLayout.isPicker\n);\n\ntype DataViewsPickerProps< Item > = {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tfields: Field< Item >[];\n\tactions?: ActionButton< Item >[];\n\tsearch?: boolean;\n\tsearchLabel?: string;\n\tdata: Item[];\n\tisLoading?: boolean;\n\tpaginationInfo: {\n\t\ttotalItems: number;\n\t\ttotalPages: number;\n\t\tinfiniteScrollHandler?: () => void;\n\t};\n\tdefaultLayouts: SupportedLayouts;\n\tselection: string[];\n\tonChangeSelection: ( items: string[] ) => void;\n\tchildren?: ReactNode;\n\tconfig?: {\n\t\tperPageSizes: number[];\n\t};\n\titemListLabel?: string;\n\tempty?: ReactNode;\n} & ( Item extends ItemWithId\n\t? { getItemId?: ( item: Item ) => string }\n\t: { getItemId: ( item: Item ) => string } );\n\nconst defaultGetItemId = ( item: ItemWithId ) => item.id;\nconst EMPTY_ARRAY: any[] = [];\n\ntype DefaultUIProps = Pick<\n\tDataViewsPickerProps< any >,\n\t'search' | 'searchLabel'\n>;\n\nfunction DefaultUI( {\n\tsearch = true,\n\tsearchLabel = undefined,\n}: DefaultUIProps ) {\n\treturn (\n\t\t<>\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\talign=\"top\"\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName=\"dataviews__view-actions\"\n\t\t\t\tgap=\"xs\"\n\t\t\t>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\tclassName=\"dataviews__search\"\n\t\t\t\t>\n\t\t\t\t\t{ search && <DataViewsSearch label={ searchLabel } /> }\n\t\t\t\t\t<FiltersToggle />\n\t\t\t\t</Stack>\n\t\t\t\t<Stack direction=\"row\" gap=\"xs\" style={ { flexShrink: 0 } }>\n\t\t\t\t\t<DataViewsViewConfig />\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t\t<FiltersToggled className=\"dataviews-filters__container\" />\n\t\t\t<DataViewsLayout />\n\t\t\t<DataViewsPickerFooter />\n\t\t</>\n\t);\n}\n\nfunction DataViewsPicker< Item >( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions = EMPTY_ARRAY,\n\tdata,\n\tgetItemId = defaultGetItemId,\n\tisLoading = false,\n\tpaginationInfo,\n\tdefaultLayouts: defaultLayoutsProperty,\n\tselection,\n\tonChangeSelection,\n\tchildren,\n\tconfig = { perPageSizes: [ 10, 20, 50, 100 ] },\n\titemListLabel,\n\tempty,\n}: DataViewsPickerProps< Item > ) {\n\tconst { infiniteScrollHandler } = paginationInfo;\n\tconst containerRef = useRef< HTMLDivElement >( null );\n\tconst [ containerWidth, setContainerWidth ] = useState( 0 );\n\tconst resizeObserverRef = useResizeObserver(\n\t\t( resizeObserverEntries: any ) => {\n\t\t\tsetContainerWidth(\n\t\t\t\tresizeObserverEntries[ 0 ].borderBoxSize[ 0 ].inlineSize\n\t\t\t);\n\t\t},\n\t\t{ box: 'border-box' }\n\t);\n\tconst [ openedFilter, setOpenedFilter ] = useState< string | null >( null );\n\tfunction setSelectionWithChange( value: SelectionOrUpdater ) {\n\t\tconst newValue =\n\t\t\ttypeof value === 'function' ? value( selection ) : value;\n\t\tif ( onChangeSelection ) {\n\t\t\tonChangeSelection( newValue );\n\t\t}\n\t}\n\tconst _fields = useMemo( () => normalizeFields( fields ), [ fields ] );\n\tconst filters = useFilters( _fields, view );\n\tconst hasPrimaryOrLockedFilters = useMemo(\n\t\t() =>\n\t\t\t( filters || [] ).some(\n\t\t\t\t( filter ) => filter.isPrimary || filter.isLocked\n\t\t\t),\n\t\t[ filters ]\n\t);\n\tconst [ isShowingFilter, setIsShowingFilter ] = useState< boolean >(\n\t\thasPrimaryOrLockedFilters\n\t);\n\n\tuseEffect( () => {\n\t\tif ( hasPrimaryOrLockedFilters && ! isShowingFilter ) {\n\t\t\tsetIsShowingFilter( true );\n\t\t}\n\t}, [ hasPrimaryOrLockedFilters, isShowingFilter ] );\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\tconst handleScroll = throttle( ( event: unknown ) => {\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// Check if user has scrolled near the bottom\n\t\t\tif ( scrollTop + clientHeight >= scrollHeight - 100 ) {\n\t\t\t\tinfiniteScrollHandler?.();\n\t\t\t}\n\t\t}, 100 ); // Throttle to 100ms\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}, [ infiniteScrollHandler, view.infiniteScrollEnabled ] );\n\n\t// Filter out DataViewsPicker layouts.\n\tconst defaultLayouts = useMemo(\n\t\t() =>\n\t\t\tObject.fromEntries(\n\t\t\t\tObject.entries( defaultLayoutsProperty ).filter(\n\t\t\t\t\t( [ layoutType ] ) => {\n\t\t\t\t\t\treturn dataViewsPickerLayouts.some(\n\t\t\t\t\t\t\t( viewLayout ) => viewLayout.type === layoutType\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t),\n\t\t[ defaultLayoutsProperty ]\n\t);\n\n\tif ( ! defaultLayouts[ view.type ] ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<DataViewsContext.Provider\n\t\t\tvalue={ {\n\t\t\t\tview,\n\t\t\t\tonChangeView,\n\t\t\t\tfields: _fields,\n\t\t\t\tactions,\n\t\t\t\tdata,\n\t\t\t\tisLoading,\n\t\t\t\tpaginationInfo,\n\t\t\t\tisItemClickable,\n\t\t\t\tselection,\n\t\t\t\tonChangeSelection: setSelectionWithChange,\n\t\t\t\topenedFilter,\n\t\t\t\tsetOpenedFilter,\n\t\t\t\tgetItemId,\n\t\t\t\tcontainerWidth,\n\t\t\t\tcontainerRef,\n\t\t\t\tresizeObserverRef,\n\t\t\t\tdefaultLayouts,\n\t\t\t\tfilters,\n\t\t\t\tisShowingFilter,\n\t\t\t\tsetIsShowingFilter,\n\t\t\t\tconfig,\n\t\t\t\titemListLabel,\n\t\t\t\tempty,\n\t\t\t\thasInitiallyLoaded: true,\n\t\t\t\thasInfiniteScrollHandler: !! infiniteScrollHandler,\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-picker-wrapper\" ref={ containerRef }>\n\t\t\t\t{ children ?? (\n\t\t\t\t\t<DefaultUI search={ search } searchLabel={ searchLabel } />\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</DataViewsContext.Provider>\n\t);\n}\n\n// Populate the DataViews sub components\nconst DataViewsPickerSubComponents =\n\tDataViewsPicker as typeof DataViewsPicker & {\n\t\tBulkActionToolbar: typeof DataViewsPickerFooter;\n\t\tFilters: typeof Filters;\n\t\tFiltersToggled: typeof FiltersToggled;\n\t\tFiltersToggle: typeof FiltersToggle;\n\t\tLayout: typeof DataViewsLayout;\n\t\tLayoutSwitcher: typeof ViewTypeMenu;\n\t\tPagination: typeof DataViewsPagination;\n\t\tSearch: typeof DataViewsSearch;\n\t\tViewConfig: typeof DataviewsViewConfigDropdown;\n\t};\n\nDataViewsPickerSubComponents.BulkActionToolbar = DataViewsPickerFooter;\nDataViewsPickerSubComponents.Filters = Filters;\nDataViewsPickerSubComponents.FiltersToggled = FiltersToggled;\nDataViewsPickerSubComponents.FiltersToggle = FiltersToggle;\nDataViewsPickerSubComponents.Layout = DataViewsLayout;\nDataViewsPickerSubComponents.LayoutSwitcher = ViewTypeMenu;\nDataViewsPickerSubComponents.Pagination = DataViewsPagination;\nDataViewsPickerSubComponents.Search = DataViewsSearch;\nDataViewsPickerSubComponents.ViewConfig = DataviewsViewConfigDropdown;\n\nexport default DataViewsPickerSubComponents;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../components/dataviews-context';\nimport { VIEW_LAYOUTS } from '../components/dataviews-layouts';\nimport {\n\tFilters,\n\tFiltersToggled,\n\tuseFilters,\n\tFiltersToggle,\n} from '../components/dataviews-filters';\nimport DataViewsLayout from '../components/dataviews-layout';\nimport { DataViewsPickerFooter } from '../components/dataviews-picker-footer';\nimport DataViewsSearch from '../components/dataviews-search';\nimport { DataViewsPagination } from '../components/dataviews-pagination';\nimport DataViewsViewConfig, {\n\tDataviewsViewConfigDropdown,\n\tViewTypeMenu,\n} from '../components/dataviews-view-config';\nimport normalizeFields from '../field-types';\nimport useData from '../hooks/use-data';\nimport { useInfiniteScroll } from '../hooks/use-infinite-scroll';\nimport type { ActionButton, Field, View, SupportedLayouts } from '../types';\nimport type { SelectionOrUpdater } from '../types/private';\ntype ItemWithId = { id: string };\n\nconst isItemClickable = () => false;\n\nconst dataViewsPickerLayouts = VIEW_LAYOUTS.filter(\n\t( viewLayout ) => viewLayout.isPicker\n);\n\ntype DataViewsPickerProps< Item > = {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tfields: Field< Item >[];\n\tactions?: ActionButton< Item >[];\n\tsearch?: boolean;\n\tsearchLabel?: string;\n\tdata: Item[];\n\tisLoading?: boolean;\n\tpaginationInfo: {\n\t\ttotalItems: number;\n\t\ttotalPages: number;\n\t};\n\tdefaultLayouts: SupportedLayouts;\n\tselection: string[];\n\tonChangeSelection: ( items: string[] ) => void;\n\tchildren?: ReactNode;\n\tconfig?: {\n\t\tperPageSizes: number[];\n\t};\n\titemListLabel?: string;\n\tempty?: ReactNode;\n} & ( Item extends ItemWithId\n\t? { getItemId?: ( item: Item ) => string }\n\t: { getItemId: ( item: Item ) => string } );\n\nconst defaultGetItemId = ( item: ItemWithId ) => item.id;\nconst EMPTY_ARRAY: any[] = [];\n\ntype DefaultUIProps = Pick<\n\tDataViewsPickerProps< any >,\n\t'search' | 'searchLabel'\n>;\n\nfunction DefaultUI( {\n\tsearch = true,\n\tsearchLabel = undefined,\n}: DefaultUIProps ) {\n\tconst { view } = useContext( DataViewsContext );\n\tconst isInfiniteScroll = view.infiniteScrollEnabled;\n\treturn (\n\t\t<>\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\talign=\"top\"\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName={ clsx( 'dataviews__view-actions', {\n\t\t\t\t\t'dataviews__view-actions--infinite-scroll':\n\t\t\t\t\t\tisInfiniteScroll,\n\t\t\t\t} ) }\n\t\t\t\tgap=\"xs\"\n\t\t\t>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\tclassName=\"dataviews__search\"\n\t\t\t\t>\n\t\t\t\t\t{ search && <DataViewsSearch label={ searchLabel } /> }\n\t\t\t\t\t<FiltersToggle />\n\t\t\t\t</Stack>\n\t\t\t\t<Stack direction=\"row\" gap=\"xs\" style={ { flexShrink: 0 } }>\n\t\t\t\t\t<DataViewsViewConfig />\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t\t<FiltersToggled className=\"dataviews-filters__container\" />\n\t\t\t<DataViewsLayout />\n\t\t\t<DataViewsPickerFooter />\n\t\t</>\n\t);\n}\n\nfunction DataViewsPicker< Item >( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions = EMPTY_ARRAY,\n\tdata,\n\tgetItemId = defaultGetItemId,\n\tisLoading = false,\n\tpaginationInfo,\n\tdefaultLayouts: defaultLayoutsProperty,\n\tselection,\n\tonChangeSelection,\n\tchildren,\n\tconfig = { perPageSizes: [ 10, 20, 50, 100 ] },\n\titemListLabel,\n\tempty,\n}: DataViewsPickerProps< Item > ) {\n\t// useData ensures data loading is correct whether infinite scroll is enabled or pagination is used.\n\tconst { data: displayData, setVisibleEntries } = useData( {\n\t\tview,\n\t\tdata: data as any,\n\t\tgetItemId: getItemId as any,\n\t\tselection,\n\t\tpaginationInfo,\n\t} ) as {\n\t\tdata: ( Item & { position?: number } )[];\n\t\tsetVisibleEntries?: React.Dispatch< React.SetStateAction< number[] > >;\n\t};\n\tconst containerRef = useRef< HTMLDivElement >( null );\n\tconst [ containerWidth, setContainerWidth ] = useState( 0 );\n\tconst resizeObserverRef = useResizeObserver(\n\t\t( resizeObserverEntries: any ) => {\n\t\t\tsetContainerWidth(\n\t\t\t\tresizeObserverEntries[ 0 ].borderBoxSize[ 0 ].inlineSize\n\t\t\t);\n\t\t},\n\t\t{ box: 'border-box' }\n\t);\n\tconst [ openedFilter, setOpenedFilter ] = useState< string | null >( null );\n\tfunction setSelectionWithChange( value: SelectionOrUpdater ) {\n\t\tconst newValue =\n\t\t\ttypeof value === 'function' ? value( selection ) : value;\n\t\tif ( onChangeSelection ) {\n\t\t\tonChangeSelection( newValue );\n\t\t}\n\t}\n\tconst _fields = useMemo( () => normalizeFields( fields ), [ fields ] );\n\tconst filters = useFilters( _fields, view );\n\n\tconst hasPrimaryOrLockedFilters = useMemo(\n\t\t() =>\n\t\t\t( filters || [] ).some(\n\t\t\t\t( filter ) => filter.isPrimary || filter.isLocked\n\t\t\t),\n\t\t[ filters ]\n\t);\n\tconst [ isShowingFilter, setIsShowingFilter ] = useState< boolean >(\n\t\thasPrimaryOrLockedFilters\n\t);\n\n\tconst { intersectionObserver } = useInfiniteScroll( {\n\t\tview,\n\t\tonChangeView,\n\t\tisLoading,\n\t\tpaginationInfo,\n\t\tcontainerRef,\n\t\tsetVisibleEntries,\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( hasPrimaryOrLockedFilters && ! isShowingFilter ) {\n\t\t\tsetIsShowingFilter( true );\n\t\t}\n\t}, [ hasPrimaryOrLockedFilters, isShowingFilter ] );\n\n\t// Filter out DataViewsPicker layouts.\n\tconst defaultLayouts = useMemo(\n\t\t() =>\n\t\t\tObject.fromEntries(\n\t\t\t\tObject.entries( defaultLayoutsProperty ).filter(\n\t\t\t\t\t( [ layoutType ] ) => {\n\t\t\t\t\t\treturn dataViewsPickerLayouts.some(\n\t\t\t\t\t\t\t( viewLayout ) => viewLayout.type === layoutType\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t),\n\t\t[ defaultLayoutsProperty ]\n\t);\n\n\tif ( ! defaultLayouts[ view.type ] ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<DataViewsContext.Provider\n\t\t\tvalue={ {\n\t\t\t\tview,\n\t\t\t\tonChangeView,\n\t\t\t\tfields: _fields,\n\t\t\t\tactions,\n\t\t\t\tdata: displayData,\n\t\t\t\tisLoading,\n\t\t\t\tpaginationInfo,\n\t\t\t\tisItemClickable,\n\t\t\t\tselection,\n\t\t\t\tonChangeSelection: setSelectionWithChange,\n\t\t\t\topenedFilter,\n\t\t\t\tsetOpenedFilter,\n\t\t\t\tgetItemId,\n\t\t\t\tcontainerWidth,\n\t\t\t\tcontainerRef,\n\t\t\t\tresizeObserverRef,\n\t\t\t\tdefaultLayouts,\n\t\t\t\tfilters,\n\t\t\t\tisShowingFilter,\n\t\t\t\tsetIsShowingFilter,\n\t\t\t\tconfig,\n\t\t\t\titemListLabel,\n\t\t\t\tempty,\n\t\t\t\thasInitiallyLoaded: true,\n\t\t\t\tintersectionObserver,\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-picker-wrapper\">\n\t\t\t\t{ children ?? (\n\t\t\t\t\t<DefaultUI search={ search } searchLabel={ searchLabel } />\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</DataViewsContext.Provider>\n\t);\n}\n\n// Populate the DataViews sub components\nconst DataViewsPickerSubComponents =\n\tDataViewsPicker as typeof DataViewsPicker & {\n\t\tBulkActionToolbar: typeof DataViewsPickerFooter;\n\t\tFilters: typeof Filters;\n\t\tFiltersToggled: typeof FiltersToggled;\n\t\tFiltersToggle: typeof FiltersToggle;\n\t\tLayout: typeof DataViewsLayout;\n\t\tLayoutSwitcher: typeof ViewTypeMenu;\n\t\tPagination: typeof DataViewsPagination;\n\t\tSearch: typeof DataViewsSearch;\n\t\tViewConfig: typeof DataviewsViewConfigDropdown;\n\t};\n\nDataViewsPickerSubComponents.BulkActionToolbar = DataViewsPickerFooter;\nDataViewsPickerSubComponents.Filters = Filters;\nDataViewsPickerSubComponents.FiltersToggled = FiltersToggled;\nDataViewsPickerSubComponents.FiltersToggle = FiltersToggle;\nDataViewsPickerSubComponents.Layout = DataViewsLayout;\nDataViewsPickerSubComponents.LayoutSwitcher = ViewTypeMenu;\nDataViewsPickerSubComponents.Pagination = DataViewsPagination;\nDataViewsPickerSubComponents.Search = DataViewsSearch;\nDataViewsPickerSubComponents.ViewConfig = DataviewsViewConfigDropdown;\n\nexport default DataViewsPickerSubComponents;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/hooks/index.mjs

@@ -1,6 +1,12 @@
 // packages/dataviews/src/hooks/index.ts
 import { default as default2 } from "./use-form-validity.mjs";
+import { default as default3 } from "./use-data.mjs";
+import { useInfiniteScroll } from "./use-infinite-scroll.mjs";
+import { default as default4 } from "./use-selected-items.mjs";
 export {
-  default2 as useFormValidity
+  default3 as useData,
+  default2 as useFormValidity,
+  useInfiniteScroll,
+  default4 as useSelectedItems
 };
 //# sourceMappingURL=index.mjs.map

package/build-module/hooks/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/hooks/index.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nexport { default as useFormValidity } from './use-form-validity';\n"],
-  "mappings": ";AAGA,SAAoB,WAAXA,gBAAkC;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nexport { default as useFormValidity } from './use-form-validity';\nexport { default as useData } from './use-data';\nexport { useInfiniteScroll } from './use-infinite-scroll';\nexport { default as useSelectedItems } from './use-selected-items';\n"],
+  "mappings": ";AAGA,SAAoB,WAAXA,gBAAkC;AAC3C,SAAoB,WAAXA,gBAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAoB,WAAXA,gBAAmC;",
   "names": ["default"]
 }

package/build-module/hooks/use-data.mjs

@@ -1,22 +1,159 @@
 // packages/dataviews/src/hooks/use-data.ts
-import { useEffect, useRef, useState } from "@wordpress/element";
-function useData(data, isLoading, paginationInfo) {
-  const previousDataRef = useRef(data);
-  const previousPaginationInfoRef = useRef(paginationInfo);
+import { useState, useEffect, useMemo, useRef } from "@wordpress/element";
+function useData({
+  view,
+  data: shownData,
+  getItemId,
+  isLoading,
+  paginationInfo,
+  selection
+}) {
+  const isInfiniteScrollEnabled = view.infiniteScrollEnabled;
   const [hasInitiallyLoaded, setHasInitiallyLoaded] = useState(
     !isLoading
   );
   useEffect(() => {
     if (!isLoading) {
-      previousDataRef.current = data;
-      previousPaginationInfoRef.current = paginationInfo;
       setHasInitiallyLoaded(true);
     }
-  }, [data, isLoading, paginationInfo]);
+  }, [isLoading]);
+  const previousDataRef = useRef(shownData);
+  const previousPaginationInfoRef = useRef(paginationInfo);
+  useEffect(() => {
+    if (!isLoading) {
+      previousDataRef.current = shownData;
+      previousPaginationInfoRef.current = paginationInfo;
+    }
+  }, [shownData, isLoading, paginationInfo]);
+  const [visibleEntries, setVisibleEntries] = useState([]);
+  const positionMapRef = useRef(/* @__PURE__ */ new Map());
+  const allLoadedRecordsRef = useRef([]);
+  const prevViewParamsRef = useRef({
+    search: void 0,
+    filters: void 0,
+    perPage: void 0
+  });
+  const scrollDirectionRef = useRef(void 0);
+  const prevStartPositionRef = useRef(void 0);
+  const hasInitializedRef = useRef(false);
+  const allLoadedRecords = useMemo(() => {
+    if (view.startPosition !== void 0 && prevStartPositionRef.current !== void 0) {
+      if (view.startPosition < prevStartPositionRef.current) {
+        scrollDirectionRef.current = "up";
+      } else if (view.startPosition > prevStartPositionRef.current) {
+        scrollDirectionRef.current = "down";
+      }
+    }
+    prevStartPositionRef.current = view.startPosition;
+    const currentFiltersKey = JSON.stringify(view.filters ?? []);
+    const prevFiltersKey = prevViewParamsRef.current.filters;
+    const shouldReset = !hasInitializedRef.current || !view.infiniteScrollEnabled || view.search !== prevViewParamsRef.current.search || currentFiltersKey !== prevFiltersKey || view.perPage !== prevViewParamsRef.current.perPage;
+    hasInitializedRef.current = true;
+    prevViewParamsRef.current = {
+      search: view.search,
+      filters: currentFiltersKey,
+      perPage: view.perPage
+    };
+    if (shouldReset) {
+      positionMapRef.current.clear();
+      scrollDirectionRef.current = void 0;
+      const startPosition = view.search ? 1 : view.startPosition ?? 1;
+      const records = shownData.map((record, index) => {
+        const position = startPosition + index;
+        positionMapRef.current.set(getItemId(record), position);
+        return {
+          ...record,
+          position
+        };
+      });
+      allLoadedRecordsRef.current = records;
+      return records;
+    }
+    const prev = allLoadedRecordsRef.current;
+    const shownDataIds = new Set(shownData.map(getItemId));
+    const scrollDirection = scrollDirectionRef.current;
+    const basePosition = view.search ? 1 : view.startPosition ?? 1;
+    const newRecords = shownData.map((record, index) => {
+      const itemId = getItemId(record);
+      const position = view.infiniteScrollEnabled ? basePosition + index : void 0;
+      if (position !== void 0) {
+        positionMapRef.current.set(itemId, position);
+      }
+      return {
+        ...record,
+        position
+      };
+    });
+    if (newRecords.length === 0) {
+      return prev;
+    }
+    const prevWithoutDuplicates = prev.filter(
+      (record) => !shownDataIds.has(getItemId(record))
+    );
+    const allRecords = scrollDirection === "up" ? [...newRecords, ...prevWithoutDuplicates] : [...prevWithoutDuplicates, ...newRecords];
+    allRecords.sort((a, b) => {
+      const posA = a.position;
+      const posB = b.position;
+      return posA - posB;
+    });
+    let result = allRecords;
+    if (visibleEntries.length > 0) {
+      const visibleMin = Math.min(...visibleEntries);
+      const visibleMax = Math.max(...visibleEntries);
+      const buffer = 20;
+      const recordPositions = allRecords.map(
+        (r) => r.position
+      );
+      const minRecordPos = Math.min(...recordPositions);
+      const maxRecordPos = Math.max(...recordPositions);
+      const hasOverlap = !(maxRecordPos < visibleMin - buffer || minRecordPos > visibleMax + buffer);
+      if (hasOverlap) {
+        result = allRecords.filter((record) => {
+          const itemId = getItemId(record);
+          const isSelected = selection?.includes(itemId);
+          if (isSelected) {
+            return true;
+          }
+          const itemPosition = record.position;
+          if (scrollDirection === "up") {
+            return itemPosition <= visibleMax + buffer;
+          } else if (scrollDirection === "down") {
+            return itemPosition >= visibleMin - buffer;
+          }
+          return itemPosition >= visibleMin - buffer && itemPosition <= visibleMax + buffer;
+        });
+      }
+    }
+    allLoadedRecordsRef.current = result;
+    return result;
+  }, [
+    shownData,
+    view.search,
+    view.filters,
+    view.perPage,
+    view.startPosition,
+    view.infiniteScrollEnabled,
+    visibleEntries,
+    selection,
+    getItemId
+  ]);
+  if (!isInfiniteScrollEnabled) {
+    const dataToReturn = isLoading && previousDataRef.current?.length ? previousDataRef.current : shownData;
+    return {
+      data: dataToReturn.map((item) => ({
+        ...item,
+        position: void 0
+      })),
+      paginationInfo: isLoading && previousDataRef.current?.length ? previousPaginationInfoRef.current : paginationInfo,
+      hasInitiallyLoaded,
+      setVisibleEntries: void 0
+    };
+  }
   return {
-    data: isLoading && previousDataRef.current?.length ? previousDataRef.current : data,
-    paginationInfo: isLoading && previousDataRef.current?.length ? previousPaginationInfoRef.current : paginationInfo,
-    hasInitiallyLoaded
+    data: allLoadedRecords,
+    paginationInfo,
+    hasInitiallyLoaded,
+    setVisibleEntries
   };
 }
 export {

package/build-module/hooks/use-data.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/hooks/use-data.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\n\ntype PaginationInfo = {\n\ttotalItems: number;\n\ttotalPages: number;\n\tinfiniteScrollHandler?: () => void;\n};\n\nexport default function useData< Item >(\n\tdata: Item[],\n\tisLoading: boolean | undefined,\n\tpaginationInfo: PaginationInfo\n): {\n\tdata: Item[];\n\tpaginationInfo: PaginationInfo;\n\thasInitiallyLoaded: boolean;\n} {\n\tconst previousDataRef = useRef< Item[] >( data );\n\tconst previousPaginationInfoRef =\n\t\tuseRef< PaginationInfo >( paginationInfo );\n\tconst [ hasInitiallyLoaded, setHasInitiallyLoaded ] = useState(\n\t\t! isLoading\n\t);\n\tuseEffect( () => {\n\t\tif ( ! isLoading ) {\n\t\t\tpreviousDataRef.current = data;\n\t\t\tpreviousPaginationInfoRef.current = paginationInfo;\n\t\t\tsetHasInitiallyLoaded( true );\n\t\t}\n\t}, [ data, isLoading, paginationInfo ] );\n\treturn {\n\t\tdata:\n\t\t\tisLoading && previousDataRef.current?.length\n\t\t\t\t? previousDataRef.current\n\t\t\t\t: data,\n\t\tpaginationInfo:\n\t\t\tisLoading && previousDataRef.current?.length\n\t\t\t\t? previousPaginationInfoRef.current\n\t\t\t\t: paginationInfo,\n\t\thasInitiallyLoaded,\n\t};\n}\n"],
-  "mappings": ";AAGA,SAAS,WAAW,QAAQ,gBAAgB;AAQ7B,SAAR,QACN,MACA,WACA,gBAKC;AACD,QAAM,kBAAkB,OAAkB,IAAK;AAC/C,QAAM,4BACL,OAA0B,cAAe;AAC1C,QAAM,CAAE,oBAAoB,qBAAsB,IAAI;AAAA,IACrD,CAAE;AAAA,EACH;AACA,YAAW,MAAM;AAChB,QAAK,CAAE,WAAY;AAClB,sBAAgB,UAAU;AAC1B,gCAA0B,UAAU;AACpC,4BAAuB,IAAK;AAAA,IAC7B;AAAA,EACD,GAAG,CAAE,MAAM,WAAW,cAAe,CAAE;AACvC,SAAO;AAAA,IACN,MACC,aAAa,gBAAgB,SAAS,SACnC,gBAAgB,UAChB;AAAA,IACJ,gBACC,aAAa,gBAAgB,SAAS,SACnC,0BAA0B,UAC1B;AAAA,IACJ;AAAA,EACD;AACD;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useMemo, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { View } from '../types';\n\ntype PaginationInfo = {\n\ttotalItems: number;\n\ttotalPages: number;\n};\n\ninterface UseDataParams< Item > {\n\tview: View;\n\tdata: Item[];\n\tgetItemId: ( item: Item ) => string;\n\tisLoading?: boolean;\n\tpaginationInfo: PaginationInfo;\n\tselection?: string[];\n}\n\ninterface UseDataResult< Item > {\n\tdata: ( Item & { position?: number } )[];\n\tpaginationInfo: PaginationInfo;\n\thasInitiallyLoaded: boolean;\n\tsetVisibleEntries?: React.Dispatch< React.SetStateAction< number[] > >;\n}\n\n/**\n * Hook to manage data for DataViews.\n *\n * When infinite scroll is enabled, this hook handles:\n * - Loading more data when scrolling up or down\n * - Maintaining stable positions for items\n * - Unloading items that are no longer visible (with a buffer)\n *\n * When infinite scroll is disabled, it preserves the previous data and\n * pagination info while loading, so the UI doesn't flash empty.\n *\n * In both cases, it tracks whether data has initially loaded.\n *\n * @param params                - Configuration parameters\n * @param params.view           - Current view configuration\n * @param params.data           - Current page of data\n * @param params.getItemId      - Function to extract item ID\n * @param params.isLoading      - Whether data is currently loading\n * @param params.paginationInfo - Pagination info (totalItems, totalPages)\n * @param params.selection      - Currently selected item IDs\n * @return Object containing data, paginationInfo, hasInitiallyLoaded,\n *         and optional setVisibleEntries callback\n */\nexport default function useData< Item >( {\n\tview,\n\tdata: shownData,\n\tgetItemId,\n\tisLoading,\n\tpaginationInfo,\n\tselection,\n}: UseDataParams< Item > ): UseDataResult< Item > {\n\tconst isInfiniteScrollEnabled = view.infiniteScrollEnabled;\n\n\tconst [ hasInitiallyLoaded, setHasInitiallyLoaded ] = useState(\n\t\t! isLoading\n\t);\n\tuseEffect( () => {\n\t\tif ( ! isLoading ) {\n\t\t\tsetHasInitiallyLoaded( true );\n\t\t}\n\t}, [ isLoading ] );\n\n\tconst previousDataRef = useRef< Item[] >( shownData );\n\tconst previousPaginationInfoRef =\n\t\tuseRef< PaginationInfo >( paginationInfo );\n\tuseEffect( () => {\n\t\tif ( ! isLoading ) {\n\t\t\tpreviousDataRef.current = shownData;\n\t\t\tpreviousPaginationInfoRef.current = paginationInfo;\n\t\t}\n\t}, [ shownData, isLoading, paginationInfo ] );\n\n\t// Infinite scroll state.\n\tconst [ visibleEntries, setVisibleEntries ] = useState< number[] >( [] );\n\n\t// Track the mapping of item IDs to their positions in the full dataset\n\tconst positionMapRef = useRef< Map< string, number > >( new Map() );\n\n\t// Store accumulated records in a ref for persistence across renders\n\tconst allLoadedRecordsRef = useRef< Item[] >( [] );\n\n\t// Track previous view parameters to detect when we need to reset\n\tconst prevViewParamsRef = useRef< {\n\t\tsearch: string | undefined;\n\t\tfilters: string | undefined;\n\t\tperPage: number | undefined;\n\t} >( {\n\t\tsearch: undefined,\n\t\tfilters: undefined,\n\t\tperPage: undefined,\n\t} );\n\n\t// Determine scroll direction based on position changes\n\tconst scrollDirectionRef = useRef< 'up' | 'down' | undefined >( undefined );\n\tconst prevStartPositionRef = useRef< number | undefined >( undefined );\n\n\t// Track whether we've done initial load\n\tconst hasInitializedRef = useRef( false );\n\n\t// Compute data synchronously during render using useMemo\n\t// This ensures the returned data is always in sync with shownData\n\tconst allLoadedRecords = useMemo( () => {\n\t\t// Update scroll direction based on position changes\n\t\tif (\n\t\t\tview.startPosition !== undefined &&\n\t\t\tprevStartPositionRef.current !== undefined\n\t\t) {\n\t\t\tif ( view.startPosition < prevStartPositionRef.current ) {\n\t\t\t\tscrollDirectionRef.current = 'up';\n\t\t\t} else if ( view.startPosition > prevStartPositionRef.current ) {\n\t\t\t\tscrollDirectionRef.current = 'down';\n\t\t\t}\n\t\t}\n\t\tprevStartPositionRef.current = view.startPosition;\n\n\t\t// Serialize filters for comparison\n\t\tconst currentFiltersKey = JSON.stringify( view.filters ?? [] );\n\t\tconst prevFiltersKey = prevViewParamsRef.current.filters;\n\n\t\t// Check if view parameters that require a reset have changed\n\t\tconst shouldReset =\n\t\t\t! hasInitializedRef.current ||\n\t\t\t! view.infiniteScrollEnabled ||\n\t\t\tview.search !== prevViewParamsRef.current.search ||\n\t\t\tcurrentFiltersKey !== prevFiltersKey ||\n\t\t\tview.perPage !== prevViewParamsRef.current.perPage;\n\t\thasInitializedRef.current = true;\n\t\t// Update tracked view parameters\n\t\tprevViewParamsRef.current = {\n\t\t\tsearch: view.search,\n\t\t\tfilters: currentFiltersKey,\n\t\t\tperPage: view.perPage,\n\t\t};\n\n\t\tif ( shouldReset ) {\n\t\t\t// Reset - clear position map and replace all data\n\t\t\tpositionMapRef.current.clear();\n\t\t\t// Reset scroll direction to prevent stale directional filtering\n\t\t\tscrollDirectionRef.current = undefined;\n\t\t\t// Use the view's startPosition if defined, otherwise default to 1\n\t\t\tconst startPosition = view.search ? 1 : view.startPosition ?? 1;\n\t\t\tconst records = shownData.map( ( record, index ) => {\n\t\t\t\tconst position = startPosition + index;\n\t\t\t\tpositionMapRef.current.set( getItemId( record ), position );\n\t\t\t\treturn {\n\t\t\t\t\t...record,\n\t\t\t\t\tposition,\n\t\t\t\t};\n\t\t\t} );\n\t\t\tallLoadedRecordsRef.current = records;\n\t\t\treturn records;\n\t\t}\n\n\t\t// Subsequent pages - merge with existing data\n\t\tconst prev = allLoadedRecordsRef.current;\n\t\tconst shownDataIds = new Set( shownData.map( getItemId ) );\n\t\tconst scrollDirection = scrollDirectionRef.current;\n\n\t\t// The position for each item in shownData should be based on the\n\t\t// current startPosition from the view, which reflects the actual\n\t\t// offset in the dataset. This ensures aria-posinset values are\n\t\t// semantically correct - if startPosition is 40, there are exactly\n\t\t// 39 items before the first item in shownData.\n\t\t// When there's an active search, always start from position 1 since\n\t\t// search results are a filtered subset, not a paginated view.\n\t\tconst basePosition = view.search ? 1 : view.startPosition ?? 1;\n\t\tconst newRecords = shownData.map( ( record, index ) => {\n\t\t\tconst itemId = getItemId( record );\n\t\t\tconst position = view.infiniteScrollEnabled\n\t\t\t\t? basePosition + index\n\t\t\t\t: undefined;\n\n\t\t\t// Always update the position map with the correct position\n\t\t\t// based on the current query's startPosition\n\t\t\tif ( position !== undefined ) {\n\t\t\t\tpositionMapRef.current.set( itemId, position );\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\t...record,\n\t\t\t\tposition,\n\t\t\t};\n\t\t} );\n\n\t\tif ( newRecords.length === 0 ) {\n\t\t\treturn prev;\n\t\t}\n\n\t\t// Remove duplicates from prev, keeping only records not in shownData\n\t\tconst prevWithoutDuplicates = prev.filter(\n\t\t\t( record ) => ! shownDataIds.has( getItemId( record ) )\n\t\t);\n\n\t\t// Update the loaded range\n\t\tconst allRecords =\n\t\t\tscrollDirection === 'up'\n\t\t\t\t? [ ...newRecords, ...prevWithoutDuplicates ]\n\t\t\t\t: [ ...prevWithoutDuplicates, ...newRecords ];\n\n\t\t// Sort all records by position to ensure correct order\n\t\t// This is crucial when items are reloaded after scrolling in different directions\n\t\tallRecords.sort( ( a, b ) => {\n\t\t\tconst posA = ( a as Item & { position: number } ).position;\n\t\t\tconst posB = ( b as Item & { position: number } ).position;\n\t\t\treturn posA - posB;\n\t\t} );\n\n\t\tlet result = allRecords;\n\n\t\tif ( visibleEntries.length > 0 ) {\n\t\t\tconst visibleMin = Math.min( ...visibleEntries );\n\t\t\tconst visibleMax = Math.max( ...visibleEntries );\n\t\t\t// Buffer size balances allowing new items to render (when prepended\n\t\t\t// during scroll up) while unloading items no longer on screen.\n\t\t\t// Use a larger buffer to prevent scrollbar from jumping when items\n\t\t\t// are unloaded, which could trigger unwanted scroll events.\n\t\t\tconst buffer = 20;\n\n\t\t\tconst recordPositions = allRecords.map(\n\t\t\t\t( r ) => ( r as Item & { position: number } ).position\n\t\t\t);\n\t\t\tconst minRecordPos = Math.min( ...recordPositions );\n\t\t\tconst maxRecordPos = Math.max( ...recordPositions );\n\n\t\t\t// Check if there's any overlap between visible range and actual record positions\n\t\t\t// to avoid filtering when visibleEntries are stale (e.g., after search/filter reset)\n\t\t\tconst hasOverlap = ! (\n\t\t\t\tmaxRecordPos < visibleMin - buffer ||\n\t\t\t\tminRecordPos > visibleMax + buffer\n\t\t\t);\n\n\t\t\tif ( hasOverlap ) {\n\t\t\t\tresult = allRecords.filter( ( record ) => {\n\t\t\t\t\tconst itemId = getItemId( record );\n\t\t\t\t\tconst isSelected = selection?.includes( itemId );\n\t\t\t\t\t// Never unload selected items, even if outside visible range\n\t\t\t\t\tif ( isSelected ) {\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst itemPosition = (\n\t\t\t\t\t\trecord as Item & { position: number }\n\t\t\t\t\t ).position;\n\t\t\t\t\t// When scrolling, only trim items from the end we're scrolling away from\n\t\t\t\t\tif ( scrollDirection === 'up' ) {\n\t\t\t\t\t\t// When scrolling up, only trim items below the visible range\n\t\t\t\t\t\treturn itemPosition <= visibleMax + buffer;\n\t\t\t\t\t} else if ( scrollDirection === 'down' ) {\n\t\t\t\t\t\t// When scrolling down, only trim items above the visible range\n\t\t\t\t\t\treturn itemPosition >= visibleMin - buffer;\n\t\t\t\t\t}\n\t\t\t\t\t// When not scrolling or first load, keep items within buffer range\n\t\t\t\t\treturn (\n\t\t\t\t\t\titemPosition >= visibleMin - buffer &&\n\t\t\t\t\t\titemPosition <= visibleMax + buffer\n\t\t\t\t\t);\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\tallLoadedRecordsRef.current = result;\n\t\treturn result;\n\t}, [\n\t\tshownData,\n\t\tview.search,\n\t\tview.filters,\n\t\tview.perPage,\n\t\tview.startPosition,\n\t\tview.infiniteScrollEnabled,\n\t\tvisibleEntries,\n\t\tselection,\n\t\tgetItemId,\n\t] );\n\n\t// When infinite scroll is disabled, preserve previous data while loading\n\tif ( ! isInfiniteScrollEnabled ) {\n\t\tconst dataToReturn =\n\t\t\tisLoading && previousDataRef.current?.length\n\t\t\t\t? previousDataRef.current\n\t\t\t\t: shownData;\n\t\treturn {\n\t\t\tdata: dataToReturn.map( ( item ) => ( {\n\t\t\t\t...item,\n\t\t\t\tposition: undefined,\n\t\t\t} ) ) as ( Item & { position?: number } )[],\n\t\t\tpaginationInfo:\n\t\t\t\tisLoading && previousDataRef.current?.length\n\t\t\t\t\t? previousPaginationInfoRef.current\n\t\t\t\t\t: paginationInfo,\n\t\t\thasInitiallyLoaded,\n\t\t\tsetVisibleEntries: undefined,\n\t\t};\n\t}\n\n\treturn {\n\t\tdata: allLoadedRecords as ( Item & { position?: number } )[],\n\t\tpaginationInfo,\n\t\thasInitiallyLoaded,\n\t\tsetVisibleEntries,\n\t};\n}\n"],
+  "mappings": ";AAGA,SAAS,UAAU,WAAW,SAAS,cAAc;AAmDtC,SAAR,QAAkC;AAAA,EACxC;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkD;AACjD,QAAM,0BAA0B,KAAK;AAErC,QAAM,CAAE,oBAAoB,qBAAsB,IAAI;AAAA,IACrD,CAAE;AAAA,EACH;AACA,YAAW,MAAM;AAChB,QAAK,CAAE,WAAY;AAClB,4BAAuB,IAAK;AAAA,IAC7B;AAAA,EACD,GAAG,CAAE,SAAU,CAAE;AAEjB,QAAM,kBAAkB,OAAkB,SAAU;AACpD,QAAM,4BACL,OAA0B,cAAe;AAC1C,YAAW,MAAM;AAChB,QAAK,CAAE,WAAY;AAClB,sBAAgB,UAAU;AAC1B,gCAA0B,UAAU;AAAA,IACrC;AAAA,EACD,GAAG,CAAE,WAAW,WAAW,cAAe,CAAE;AAG5C,QAAM,CAAE,gBAAgB,iBAAkB,IAAI,SAAsB,CAAC,CAAE;AAGvE,QAAM,iBAAiB,OAAiC,oBAAI,IAAI,CAAE;AAGlE,QAAM,sBAAsB,OAAkB,CAAC,CAAE;AAGjD,QAAM,oBAAoB,OAIrB;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,EACV,CAAE;AAGF,QAAM,qBAAqB,OAAqC,MAAU;AAC1E,QAAM,uBAAuB,OAA8B,MAAU;AAGrE,QAAM,oBAAoB,OAAQ,KAAM;AAIxC,QAAM,mBAAmB,QAAS,MAAM;AAEvC,QACC,KAAK,kBAAkB,UACvB,qBAAqB,YAAY,QAChC;AACD,UAAK,KAAK,gBAAgB,qBAAqB,SAAU;AACxD,2BAAmB,UAAU;AAAA,MAC9B,WAAY,KAAK,gBAAgB,qBAAqB,SAAU;AAC/D,2BAAmB,UAAU;AAAA,MAC9B;AAAA,IACD;AACA,yBAAqB,UAAU,KAAK;AAGpC,UAAM,oBAAoB,KAAK,UAAW,KAAK,WAAW,CAAC,CAAE;AAC7D,UAAM,iBAAiB,kBAAkB,QAAQ;AAGjD,UAAM,cACL,CAAE,kBAAkB,WACpB,CAAE,KAAK,yBACP,KAAK,WAAW,kBAAkB,QAAQ,UAC1C,sBAAsB,kBACtB,KAAK,YAAY,kBAAkB,QAAQ;AAC5C,sBAAkB,UAAU;AAE5B,sBAAkB,UAAU;AAAA,MAC3B,QAAQ,KAAK;AAAA,MACb,SAAS;AAAA,MACT,SAAS,KAAK;AAAA,IACf;AAEA,QAAK,aAAc;AAElB,qBAAe,QAAQ,MAAM;AAE7B,yBAAmB,UAAU;AAE7B,YAAM,gBAAgB,KAAK,SAAS,IAAI,KAAK,iBAAiB;AAC9D,YAAM,UAAU,UAAU,IAAK,CAAE,QAAQ,UAAW;AACnD,cAAM,WAAW,gBAAgB;AACjC,uBAAe,QAAQ,IAAK,UAAW,MAAO,GAAG,QAAS;AAC1D,eAAO;AAAA,UACN,GAAG;AAAA,UACH;AAAA,QACD;AAAA,MACD,CAAE;AACF,0BAAoB,UAAU;AAC9B,aAAO;AAAA,IACR;AAGA,UAAM,OAAO,oBAAoB;AACjC,UAAM,eAAe,IAAI,IAAK,UAAU,IAAK,SAAU,CAAE;AACzD,UAAM,kBAAkB,mBAAmB;AAS3C,UAAM,eAAe,KAAK,SAAS,IAAI,KAAK,iBAAiB;AAC7D,UAAM,aAAa,UAAU,IAAK,CAAE,QAAQ,UAAW;AACtD,YAAM,SAAS,UAAW,MAAO;AACjC,YAAM,WAAW,KAAK,wBACnB,eAAe,QACf;AAIH,UAAK,aAAa,QAAY;AAC7B,uBAAe,QAAQ,IAAK,QAAQ,QAAS;AAAA,MAC9C;AAEA,aAAO;AAAA,QACN,GAAG;AAAA,QACH;AAAA,MACD;AAAA,IACD,CAAE;AAEF,QAAK,WAAW,WAAW,GAAI;AAC9B,aAAO;AAAA,IACR;AAGA,UAAM,wBAAwB,KAAK;AAAA,MAClC,CAAE,WAAY,CAAE,aAAa,IAAK,UAAW,MAAO,CAAE;AAAA,IACvD;AAGA,UAAM,aACL,oBAAoB,OACjB,CAAE,GAAG,YAAY,GAAG,qBAAsB,IAC1C,CAAE,GAAG,uBAAuB,GAAG,UAAW;AAI9C,eAAW,KAAM,CAAE,GAAG,MAAO;AAC5B,YAAM,OAAS,EAAmC;AAClD,YAAM,OAAS,EAAmC;AAClD,aAAO,OAAO;AAAA,IACf,CAAE;AAEF,QAAI,SAAS;AAEb,QAAK,eAAe,SAAS,GAAI;AAChC,YAAM,aAAa,KAAK,IAAK,GAAG,cAAe;AAC/C,YAAM,aAAa,KAAK,IAAK,GAAG,cAAe;AAK/C,YAAM,SAAS;AAEf,YAAM,kBAAkB,WAAW;AAAA,QAClC,CAAE,MAAS,EAAmC;AAAA,MAC/C;AACA,YAAM,eAAe,KAAK,IAAK,GAAG,eAAgB;AAClD,YAAM,eAAe,KAAK,IAAK,GAAG,eAAgB;AAIlD,YAAM,aAAa,EAClB,eAAe,aAAa,UAC5B,eAAe,aAAa;AAG7B,UAAK,YAAa;AACjB,iBAAS,WAAW,OAAQ,CAAE,WAAY;AACzC,gBAAM,SAAS,UAAW,MAAO;AACjC,gBAAM,aAAa,WAAW,SAAU,MAAO;AAE/C,cAAK,YAAa;AACjB,mBAAO;AAAA,UACR;AAEA,gBAAM,eACL,OACE;AAEH,cAAK,oBAAoB,MAAO;AAE/B,mBAAO,gBAAgB,aAAa;AAAA,UACrC,WAAY,oBAAoB,QAAS;AAExC,mBAAO,gBAAgB,aAAa;AAAA,UACrC;AAEA,iBACC,gBAAgB,aAAa,UAC7B,gBAAgB,aAAa;AAAA,QAE/B,CAAE;AAAA,MACH;AAAA,IACD;AAEA,wBAAoB,UAAU;AAC9B,WAAO;AAAA,EACR,GAAG;AAAA,IACF;AAAA,IACA,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAGF,MAAK,CAAE,yBAA0B;AAChC,UAAM,eACL,aAAa,gBAAgB,SAAS,SACnC,gBAAgB,UAChB;AACJ,WAAO;AAAA,MACN,MAAM,aAAa,IAAK,CAAE,UAAY;AAAA,QACrC,GAAG;AAAA,QACH,UAAU;AAAA,MACX,EAAI;AAAA,MACJ,gBACC,aAAa,gBAAgB,SAAS,SACnC,0BAA0B,UAC1B;AAAA,MACJ;AAAA,MACA,mBAAmB;AAAA,IACpB;AAAA,EACD;AAEA,SAAO;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;",
   "names": []
 }

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": []
+}