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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dataviews/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode, ComponentProps, ReactElement } 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 DataViewsFooter from '../components/dataviews-footer';\nimport DataViewsSearch from '../components/dataviews-search';\nimport { BulkActionsFooter } from '../components/dataviews-bulk-actions';\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 type { Action, Field, View, SupportedLayouts } from '../types';\nimport type { SelectionOrUpdater } from '../types/private';\ntype ItemWithId = { id: string };\n\ntype DataViewsProps< Item > = {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tfields: Field< Item >[];\n\tsearch?: boolean;\n\tsearchLabel?: string;\n\tactions?: Action< Item >[];\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\tonClickItem?: ( item: Item ) => void;\n\trenderItemLink?: (\n\t\tprops: {\n\t\t\titem: Item;\n\t\t} & ComponentProps< 'a' >\n\t) => ReactElement;\n\tisItemClickable?: ( item: Item ) => boolean;\n\theader?: ReactNode;\n\tgetItemLevel?: ( item: Item ) => number;\n\tchildren?: ReactNode;\n\tconfig?: {\n\t\tperPageSizes: number[];\n\t};\n\tempty?: ReactNode;\n\tonReset?: ( () => void ) | false;\n} & ( Item extends ItemWithId\n\t? { getItemId?: ( item: Item ) => string }\n\t: { getItemId: ( item: Item ) => string } );\n\nconst defaultGetItemId = ( item: ItemWithId ) => item.id;\nconst defaultIsItemClickable = () => true;\nconst EMPTY_ARRAY: any[] = [];\n\nconst dataViewsLayouts = VIEW_LAYOUTS.filter(\n\t( viewLayout ) => ! viewLayout.isPicker\n);\n\ntype DefaultUIProps = Pick<\n\tDataViewsProps< any >,\n\t'header' | 'search' | 'searchLabel'\n>;\n\nfunction DefaultUI( {\n\theader,\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\tjustify=\"start\"\n\t\t\t\t\tgap=\"sm\"\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\t{ header }\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<DataViewsFooter />\n\t\t</>\n\t);\n}\n\nfunction DataViews< Item >( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions = EMPTY_ARRAY,\n\tdata,\n\tgetItemId = defaultGetItemId,\n\tgetItemLevel,\n\tisLoading = false,\n\tpaginationInfo,\n\tdefaultLayouts: defaultLayoutsProperty,\n\tselection: selectionProperty,\n\tonChangeSelection,\n\tonClickItem,\n\trenderItemLink,\n\tisItemClickable = defaultIsItemClickable,\n\theader,\n\tchildren,\n\tconfig = { perPageSizes: [ 10, 20, 50, 100 ] },\n\tempty,\n\tonReset,\n}: DataViewsProps< 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 [ selectionState, setSelectionState ] = useState< string[] >( [] );\n\tconst isUncontrolled =\n\t\tselectionProperty === undefined || onChangeSelection === undefined;\n\tconst selection = isUncontrolled ? selectionState : selectionProperty;\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 ( isUncontrolled ) {\n\t\t\tsetSelectionState( newValue );\n\t\t}\n\t\tif ( onChangeSelection ) {\n\t\t\tonChangeSelection( newValue );\n\t\t}\n\t}\n\tconst _fields = useMemo( () => normalizeFields( fields ), [ fields ] );\n\tconst _selection = useMemo( () => {\n\t\treturn selection.filter( ( id ) =>\n\t\t\tdata.some( ( item ) => getItemId( item ) === id )\n\t\t);\n\t}, [ selection, data, getItemId ] );\n\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\tconst {\n\t\tdata: displayData,\n\t\tpaginationInfo: displayPaginationInfo,\n\t\thasInitiallyLoaded,\n\t} = useData( data, isLoading, paginationInfo );\n\n\t// Attach scroll event listener for infinite scroll\n\tuseEffect( () => {\n\t\tif (\n\t\t\t! hasInitiallyLoaded ||\n\t\t\t! view.infiniteScrollEnabled ||\n\t\t\t! containerRef.current\n\t\t) {\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}, [\n\t\thasInitiallyLoaded,\n\t\tinfiniteScrollHandler,\n\t\tview.infiniteScrollEnabled,\n\t] );\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 dataViewsLayouts.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: displayPaginationInfo,\n\t\t\t\tselection: _selection,\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\tgetItemLevel,\n\t\t\t\tisItemClickable,\n\t\t\t\tonClickItem,\n\t\t\t\trenderItemLink,\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\tempty,\n\t\t\t\thasInitiallyLoaded,\n\t\t\t\thasInfiniteScrollHandler: !! infiniteScrollHandler,\n\t\t\t\tonReset,\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-wrapper\">\n\t\t\t\t{ children ?? (\n\t\t\t\t\t<DefaultUI\n\t\t\t\t\t\theader={ header }\n\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\tsearchLabel={ searchLabel }\n\t\t\t\t\t/>\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 DataViewsSubComponents = DataViews as typeof DataViews & {\n\tBulkActionToolbar: typeof BulkActionsFooter;\n\tFilters: typeof Filters;\n\tFiltersToggle: typeof FiltersToggle;\n\tFiltersToggled: typeof FiltersToggled;\n\tLayout: typeof DataViewsLayout;\n\tLayoutSwitcher: typeof ViewTypeMenu;\n\tPagination: typeof DataViewsPagination;\n\tSearch: typeof DataViewsSearch;\n\tViewConfig: typeof DataviewsViewConfigDropdown;\n\tFooter: typeof DataViewsFooter;\n};\n\nDataViewsSubComponents.BulkActionToolbar = BulkActionsFooter;\nDataViewsSubComponents.Filters = Filters;\nDataViewsSubComponents.FiltersToggled = FiltersToggled;\nDataViewsSubComponents.FiltersToggle = FiltersToggle;\nDataViewsSubComponents.Layout = DataViewsLayout;\nDataViewsSubComponents.LayoutSwitcher = ViewTypeMenu;\nDataViewsSubComponents.Pagination = DataViewsPagination;\nDataViewsSubComponents.Search = DataViewsSearch;\nDataViewsSubComponents.ViewConfig = DataviewsViewConfigDropdown;\nDataViewsSubComponents.Footer = DataViewsFooter;\n\nexport default DataViewsSubComponents;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode, ComponentProps, ReactElement } 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 DataViewsFooter from '../components/dataviews-footer';\nimport DataViewsSearch from '../components/dataviews-search';\nimport { BulkActionsFooter } from '../components/dataviews-bulk-actions';\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 { Action, Field, View, SupportedLayouts } from '../types';\nimport type { SelectionOrUpdater } from '../types/private';\ntype ItemWithId = { id: string };\n\ntype DataViewsProps< Item > = {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tfields: Field< Item >[];\n\tsearch?: boolean;\n\tsearchLabel?: string;\n\tactions?: Action< Item >[];\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\tonClickItem?: ( item: Item ) => void;\n\trenderItemLink?: (\n\t\tprops: {\n\t\t\titem: Item;\n\t\t} & ComponentProps< 'a' >\n\t) => ReactElement;\n\tisItemClickable?: ( item: Item ) => boolean;\n\theader?: ReactNode;\n\tgetItemLevel?: ( item: Item ) => number;\n\tchildren?: ReactNode;\n\tconfig?: {\n\t\tperPageSizes: number[];\n\t};\n\tempty?: ReactNode;\n\tonReset?: ( () => void ) | false;\n} & ( Item extends ItemWithId\n\t? { getItemId?: ( item: Item ) => string }\n\t: { getItemId: ( item: Item ) => string } );\n\nconst defaultGetItemId = ( item: ItemWithId ) => item.id;\nconst defaultIsItemClickable = () => true;\nconst EMPTY_ARRAY: any[] = [];\n\nconst dataViewsLayouts = VIEW_LAYOUTS.filter(\n\t( viewLayout ) => ! viewLayout.isPicker\n);\n\ntype DefaultUIProps = Pick<\n\tDataViewsProps< any >,\n\t'header' | 'search' | 'searchLabel'\n>;\n\nfunction DefaultUI( {\n\theader,\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\tjustify=\"start\"\n\t\t\t\t\tgap=\"sm\"\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\t{ header }\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<DataViewsFooter />\n\t\t</>\n\t);\n}\n\nfunction DataViews< Item >( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions = EMPTY_ARRAY,\n\tdata,\n\tgetItemId = defaultGetItemId,\n\tgetItemLevel,\n\tisLoading = false,\n\tpaginationInfo,\n\tdefaultLayouts: defaultLayoutsProperty,\n\tselection: selectionProperty,\n\tonChangeSelection,\n\tonClickItem,\n\trenderItemLink,\n\tisItemClickable = defaultIsItemClickable,\n\theader,\n\tchildren,\n\tconfig = { perPageSizes: [ 10, 20, 50, 100 ] },\n\tempty,\n\tonReset,\n}: DataViewsProps< Item > ) {\n\tconst [ selectionState, setSelectionState ] = useState< string[] >( [] );\n\tconst isUncontrolled =\n\t\tselectionProperty === undefined || onChangeSelection === undefined;\n\tconst selection = isUncontrolled ? selectionState : selectionProperty;\n\n\t// useData handles both infinite scroll and standard pagination paths,\n\t// preserving previous data while loading and tracking initial load state.\n\tconst {\n\t\tdata: displayData,\n\t\tpaginationInfo: displayPaginationInfo,\n\t\thasInitiallyLoaded,\n\t\tsetVisibleEntries,\n\t} = useData( {\n\t\tview,\n\t\tdata: data as any,\n\t\tgetItemId: getItemId as any,\n\t\tisLoading,\n\t\tselection,\n\t\tpaginationInfo,\n\t} ) as {\n\t\tdata: ( Item & { position?: number } )[];\n\t\tpaginationInfo: { totalItems: number; totalPages: number };\n\t\thasInitiallyLoaded: boolean;\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 ( isUncontrolled ) {\n\t\t\tsetSelectionState( newValue );\n\t\t}\n\t\tif ( onChangeSelection ) {\n\t\t\tonChangeSelection( newValue );\n\t\t}\n\t}\n\tconst _fields = useMemo( () => normalizeFields( fields ), [ fields ] );\n\t// When infinite scroll is enabled, don't filter selection by current data\n\t// because items may be scrolled out of view but still selected.\n\tconst _selection = useMemo( () => {\n\t\tif ( view.infiniteScrollEnabled ) {\n\t\t\treturn selection;\n\t\t}\n\t\treturn selection.filter( ( id ) =>\n\t\t\tdata.some( ( item ) => getItemId( item ) === id )\n\t\t);\n\t}, [ selection, data, getItemId, view.infiniteScrollEnabled ] );\n\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\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 dataViewsLayouts.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: displayPaginationInfo,\n\t\t\t\tselection: _selection,\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\tgetItemLevel,\n\t\t\t\tisItemClickable,\n\t\t\t\tonClickItem,\n\t\t\t\trenderItemLink,\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\tempty,\n\t\t\t\thasInitiallyLoaded,\n\t\t\t\tonReset,\n\t\t\t\tintersectionObserver,\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-wrapper\">\n\t\t\t\t{ children ?? (\n\t\t\t\t\t<DefaultUI\n\t\t\t\t\t\theader={ header }\n\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\tsearchLabel={ searchLabel }\n\t\t\t\t\t/>\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 DataViewsSubComponents = DataViews as typeof DataViews & {\n\tBulkActionToolbar: typeof BulkActionsFooter;\n\tFilters: typeof Filters;\n\tFiltersToggle: typeof FiltersToggle;\n\tFiltersToggled: typeof FiltersToggled;\n\tLayout: typeof DataViewsLayout;\n\tLayoutSwitcher: typeof ViewTypeMenu;\n\tPagination: typeof DataViewsPagination;\n\tSearch: typeof DataViewsSearch;\n\tViewConfig: typeof DataviewsViewConfigDropdown;\n\tFooter: typeof DataViewsFooter;\n};\n\nDataViewsSubComponents.BulkActionToolbar = BulkActionsFooter;\nDataViewsSubComponents.Filters = Filters;\nDataViewsSubComponents.FiltersToggled = FiltersToggled;\nDataViewsSubComponents.FiltersToggle = FiltersToggle;\nDataViewsSubComponents.Layout = DataViewsLayout;\nDataViewsSubComponents.LayoutSwitcher = ViewTypeMenu;\nDataViewsSubComponents.Pagination = DataViewsPagination;\nDataViewsSubComponents.Search = DataViewsSearch;\nDataViewsSubComponents.ViewConfig = DataviewsViewConfigDropdown;\nDataViewsSubComponents.Footer = DataViewsFooter;\n\nexport default DataViewsSubComponents;\n"],
+  "mappings": "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",
   "names": []
 }

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,7 +185,7 @@ function DataViewsPicker({
         itemListLabel,
         empty,
         hasInitiallyLoaded: true,
-        hasInfiniteScrollHandler: !!infiniteScrollHandler
+        intersectionObserver
       },
       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\">\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": "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",
   "names": []
 }