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

package/src/style.scss

@@ -1,5 +1,6 @@
 @use "./dataviews/style.scss" as *;
 @use "./components/dataviews-bulk-actions/style.scss" as *;
+@use "./components/dataviews-layout/style.scss" as *;
 @use "./components/dataviews-filters/style.scss" as *;
 @use "./components/dataviews-footer/style.scss" as *;
 @use "./components/dataviews-pagination/style.scss" as *;

package/src/types/dataviews.ts

@@ -133,7 +133,8 @@ interface ViewBase {
 	page?: number;
 
 	/**
-	 * The number of items per page
+	 * The number of items per page.
+	 * Also used as the batch size when infinite scroll is enabled.
 	 */
 	perPage?: number;
 
@@ -203,6 +204,12 @@ interface ViewBase {
 	 * Whether infinite scroll is enabled.
 	 */
 	infiniteScrollEnabled?: boolean;
+
+	/**
+	 * The start position for infinite scroll (1-indexed).
+	 * Used when infiniteScrollEnabled is true.
+	 */
+	startPosition?: number;
 }
 
 export interface ColumnStyle {
@@ -285,6 +292,11 @@ export interface ViewGrid extends ViewBase {
 		 * The preview size of the grid.
 		 */
 		previewSize?: number;
+
+		/**
+		 * The density of the grid layout.
+		 */
+		density?: Density;
 	};
 }
 
@@ -301,6 +313,11 @@ export interface ViewPickerGrid extends ViewBase {
 		 * The preview size of the grid.
 		 */
 		previewSize?: number;
+
+		/**
+		 * The density of the grid layout.
+		 */
+		density?: Density;
 	};
 }
 

package/src/types/field-api.ts

@@ -157,10 +157,21 @@ export type EditConfigText = {
 };
 
 /**
- * Edit configuration for other control types (excluding 'text' and 'textarea').
+ * Edit configuration for datetime controls.
+ */
+export type EditConfigDatetime = {
+	control: 'datetime';
+	/**
+	 * Whether to render a compact version without the calendar widget.
+	 */
+	compact?: boolean;
+};
+
+/**
+ * Edit configuration for other control types (excluding 'text', 'textarea', and 'datetime').
  */
 export type EditConfigGeneric = {
-	control: Exclude< FieldTypeName, 'text' | 'textarea' >;
+	control: Exclude< FieldTypeName, 'text' | 'textarea' | 'datetime' >;
 };
 
 /**
@@ -170,6 +181,7 @@ export type EditConfigGeneric = {
 export type EditConfig =
 	| EditConfigTextarea
 	| EditConfigText
+	| EditConfigDatetime
 	| EditConfigGeneric;
 
 /**
@@ -200,7 +212,7 @@ export type Field< Item > = {
 	/**
 	 * A description of the field.
 	 */
-	description?: string;
+	description?: string | ReactElement;
 
 	/**
 	 * Placeholder for the field.
@@ -449,6 +461,7 @@ export type DataFormControlProps< Item > = {
 		prefix?: React.ComponentType;
 		suffix?: React.ComponentType;
 		rows?: number;
+		compact?: boolean;
 	};
 };
 

package/src/utils/filter-sort-and-paginate.ts

@@ -135,7 +135,19 @@ export default function filterSortAndPaginate< Item >(
 	// Handle pagination.
 	let totalItems = filteredData.length;
 	let totalPages = 1;
-	if ( view.page !== undefined && view.perPage !== undefined ) {
+
+	// Use position-based pagination for infinite scroll
+	if (
+		view.infiniteScrollEnabled &&
+		view.startPosition !== undefined &&
+		view.perPage !== undefined
+	) {
+		// Convert 1-indexed positions to 0-indexed array indices
+		const start = view.startPosition - 1;
+		const end = Math.min( start + view.perPage, totalItems );
+		filteredData = filteredData?.slice( start, end );
+	} else if ( view.page !== undefined && view.perPage !== undefined ) {
+		// Use traditional page-based pagination
 		const start = ( view.page - 1 ) * view.perPage;
 		totalItems = filteredData?.length || 0;
 		totalPages = Math.ceil( totalItems / view.perPage );

package/src/utils/get-footer-message.ts

@@ -6,15 +6,17 @@ import { _n, sprintf } from '@wordpress/i18n';
 /**
  * Get the footer message for the DataViews footer.
  *
- * @param selectionCount - The number of items selected.
+ * @param selectionCount - The number of selected items.
  * @param itemsCount     - The number of items in the current page.
  * @param totalItems     - The total number of items.
+ * @param onlyTotalCount - Whether to only show the total count (used with infinite scroll).
  * @return               - The footer message.
  */
 export default function getFooterMessage(
 	selectionCount: number,
 	itemsCount: number,
-	totalItems: number
+	totalItems: number,
+	onlyTotalCount = false
 ): string {
 	if ( selectionCount > 0 ) {
 		return sprintf(
@@ -24,18 +26,19 @@ export default function getFooterMessage(
 		);
 	}
 
-	if ( totalItems > itemsCount ) {
+	// No selection - show item count
+	if ( onlyTotalCount || totalItems <= itemsCount ) {
 		return sprintf(
-			/* translators: %1$d: number of items. %2$d: total number of items. */
-			_n( '%1$d of %2$d Item', '%1$d of %2$d Items', totalItems ),
-			itemsCount,
+			/* translators: %d: number of items. */
+			_n( '%d Item', '%d Items', totalItems ),
 			totalItems
 		);
 	}
 
 	return sprintf(
-		/* translators: %d: number of items. */
-		_n( '%d Item', '%d Items', itemsCount ),
-		itemsCount
+		/* translators: %1$d: number of items. %2$d: total number of items. */
+		_n( '%1$d of %2$d Item', '%1$d of %2$d Items', totalItems ),
+		itemsCount,
+		totalItems
 	);
 }

package/src/utils/test/filter-sort-and-paginate.js

@@ -41,7 +41,7 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result ).toHaveLength( 4 );
+		expect( result ).toHaveLength( 6 );
 		expect(
 			result.find( ( item ) => item.name.title === 'Neptune' )
 		).toBeDefined();
@@ -92,7 +92,7 @@ describe( 'filters', () => {
 		);
 
 		// Should find items with "Moon" in categories
-		expect( result ).toHaveLength( 10 );
+		expect( result ).toHaveLength( 25 );
 		expect( result.map( ( r ) => r.name.title ).sort() ).toContain(
 			'Europa'
 		);
@@ -119,7 +119,7 @@ describe( 'filters', () => {
 		);
 
 		// Should find items with "Planet" in categories (case-insensitive)
-		expect( result ).toHaveLength( 9 );
+		expect( result ).toHaveLength( 13 );
 		expect( result.map( ( r ) => r.name.title ) ).toContain( 'Neptune' );
 		expect( result.map( ( r ) => r.name.title ) ).toContain( 'Mercury' );
 		expect( result.map( ( r ) => r.name.title ) ).toContain( 'Earth' );
@@ -158,7 +158,7 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result ).toHaveLength( 17 );
+		expect( result ).toHaveLength( 35 );
 		expect( result[ 0 ].name.title ).toBe( 'Moon' );
 		expect( result[ 1 ].name.title ).toBe( 'Io' );
 		expect( result[ 2 ].name.title ).toBe( 'Europa' );
@@ -213,7 +213,7 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result ).toHaveLength( 11 );
+		expect( result ).toHaveLength( 29 );
 		expect( result[ 0 ].name.title ).toBe( 'Moon' );
 		expect( result[ 1 ].name.title ).toBe( 'Io' );
 		expect( result[ 2 ].name.title ).toBe( 'Europa' );
@@ -262,7 +262,7 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result ).toHaveLength( 15 );
+		expect( result ).toHaveLength( 33 );
 		expect( result[ 0 ].name.title ).toBe( 'Moon' );
 		expect( result[ 1 ].name.title ).toBe( 'Io' );
 		expect( result[ 2 ].name.title ).toBe( 'Europa' );
@@ -322,7 +322,7 @@ describe( 'filters', () => {
 			fields
 		);
 		expect( console ).toHaveWarned();
-		expect( result ).toHaveLength( 10 );
+		expect( result ).toHaveLength( 28 );
 		expect( result[ 0 ].name.title ).toBe( 'Moon' );
 		expect( result[ 1 ].name.title ).toBe( 'Io' );
 		expect( result[ 2 ].name.title ).toBe( 'Europa' );
@@ -349,7 +349,7 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result ).toHaveLength( 19 );
+		expect( result ).toHaveLength( 37 );
 		expect( result[ 0 ].name.title ).toBe( 'Moon' );
 		expect( result[ 1 ].name.title ).toBe( 'Io' );
 		expect( result[ 2 ].name.title ).toBe( 'Europa' );
@@ -476,7 +476,7 @@ describe( 'filters', () => {
 			fields
 		);
 		// Should return items that don't contain "Solar system" in description
-		expect( result ).toHaveLength( 12 );
+		expect( result ).toHaveLength( 30 );
 		expect(
 			result.filter( ( r ) =>
 				r.name.description.includes( 'Solar system' )
@@ -484,16 +484,34 @@ describe( 'filters', () => {
 		).toHaveLength( 0 );
 		expect( result.map( ( r ) => r.name.title ).sort() ).toEqual( [
 			'Amalthea',
+			'Ariel',
 			'Callisto',
+			'Ceres',
+			'Charon',
+			'Deimos',
+			'Dione',
+			'Enceladus',
 			'Europa',
 			'Ganymede',
+			'Haumea',
 			'Himalia',
+			'Iapetus',
 			'Io',
+			'Makemake',
+			'Mimas',
+			'Miranda',
 			'Moon',
 			'Nereid',
+			'Oberon',
+			'Phobos',
 			'Proteus',
+			'Rhea',
+			'Tethys',
 			'Thessalonikopolymnianebuchodonossarinacharybdis',
+			'Titan',
+			'Titania',
 			'Triton',
+			'Umbriel',
 			'Venus',
 		] );
 	} );
@@ -662,7 +680,7 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result.length ).toBe( 17 );
+		expect( result.length ).toBe( 35 );
 		expect( result.map( ( r ) => r.name.title ) ).not.toContain(
 			'Neptune'
 		);
@@ -911,33 +929,37 @@ describe( 'sorting', () => {
 			fields
 		);
 
-		expect( result ).toHaveLength( 19 );
+		expect( result ).toHaveLength( 37 );
 
-		expect( result[ 0 ].type ).toBe( 'Gas giant' );
-		expect( result[ 0 ].name.title ).toBe( 'Saturn' );
-		expect( result[ 1 ].type ).toBe( 'Gas giant' );
-		expect( result[ 1 ].name.title ).toBe( 'Jupiter' );
+		expect( result[ 0 ].type ).toBe( 'Dwarf planet' );
+		expect( result[ 1 ].type ).toBe( 'Dwarf planet' );
+		expect( result[ 2 ].type ).toBe( 'Dwarf planet' );
 
-		expect( result[ 2 ].type ).toBe( 'Ice giant' );
-		expect( result[ 2 ].name.title ).toBe( 'Uranus' );
-		expect( result[ 3 ].type ).toBe( 'Ice giant' );
-		expect( result[ 3 ].name.title ).toBe( 'Neptune' );
+		expect( result[ 3 ].type ).toBe( 'Gas giant' );
+		expect( result[ 3 ].name.title ).toBe( 'Saturn' );
+		expect( result[ 4 ].type ).toBe( 'Gas giant' );
+		expect( result[ 4 ].name.title ).toBe( 'Jupiter' );
+
+		expect( result[ 5 ].type ).toBe( 'Ice giant' );
+		expect( result[ 5 ].name.title ).toBe( 'Uranus' );
+		expect( result[ 6 ].type ).toBe( 'Ice giant' );
+		expect( result[ 6 ].name.title ).toBe( 'Neptune' );
 
 		// All satellites should be grouped together
 		const satelliteItems = result.filter(
 			( item ) => item.type === 'Satellite'
 		);
-		expect( satelliteItems ).toHaveLength( 10 );
-		expect( satelliteItems[ 0 ].name.title ).toBe( 'Triton' );
-		expect( satelliteItems[ 1 ].name.title ).toBe( 'Proteus' );
-		expect( satelliteItems[ 2 ].name.title ).toBe( 'Nereid' );
-		expect( satelliteItems[ 3 ].name.title ).toBe( 'Moon' );
-		expect( satelliteItems[ 4 ].name.title ).toBe( 'Io' );
-		expect( satelliteItems[ 5 ].name.title ).toBe( 'Himalia' );
-		expect( satelliteItems[ 6 ].name.title ).toBe( 'Ganymede' );
-		expect( satelliteItems[ 7 ].name.title ).toBe( 'Europa' );
-		expect( satelliteItems[ 8 ].name.title ).toBe( 'Callisto' );
-		expect( satelliteItems[ 9 ].name.title ).toBe( 'Amalthea' );
+		expect( satelliteItems ).toHaveLength( 25 );
+		expect( satelliteItems[ 0 ].name.title ).toBe( 'Umbriel' );
+		expect( satelliteItems[ 1 ].name.title ).toBe( 'Triton' );
+		expect( satelliteItems[ 2 ].name.title ).toBe( 'Titania' );
+		expect( satelliteItems[ 3 ].name.title ).toBe( 'Titan' );
+		expect( satelliteItems[ 4 ].name.title ).toBe( 'Tethys' );
+		expect( satelliteItems[ 5 ].name.title ).toBe( 'Rhea' );
+		expect( satelliteItems[ 6 ].name.title ).toBe( 'Proteus' );
+		expect( satelliteItems[ 7 ].name.title ).toBe( 'Phobos' );
+		expect( satelliteItems[ 8 ].name.title ).toBe( 'Oberon' );
+		expect( satelliteItems[ 9 ].name.title ).toBe( 'Nereid' );
 
 		// All terrestrial planets should be grouped together
 		const terrestrialItems = result.filter(
@@ -960,7 +982,7 @@ describe( 'sorting', () => {
 			fields
 		);
 
-		expect( result ).toHaveLength( 19 );
+		expect( result ).toHaveLength( 37 );
 
 		// Terrestrial group should come first (reverse alphabetical: T)
 		expect( result[ 0 ].type ).toBe( 'Terrestrial' );
@@ -974,25 +996,25 @@ describe( 'sorting', () => {
 
 		// Satellite group should come second (reverse alphabetical: S)
 		expect( result[ 4 ].type ).toBe( 'Satellite' );
-		expect( result[ 4 ].name.title ).toBe( 'Triton' );
+		expect( result[ 4 ].name.title ).toBe( 'Umbriel' );
 		expect( result[ 5 ].type ).toBe( 'Satellite' );
-		expect( result[ 5 ].name.title ).toBe( 'Proteus' );
+		expect( result[ 5 ].name.title ).toBe( 'Triton' );
 
 		// Verify all satellites are grouped together
 		const satelliteItems = result.filter(
 			( item ) => item.type === 'Satellite'
 		);
-		expect( satelliteItems ).toHaveLength( 10 );
-		expect( satelliteItems[ 0 ].name.title ).toBe( 'Triton' );
-		expect( satelliteItems[ 1 ].name.title ).toBe( 'Proteus' );
-		expect( satelliteItems[ 2 ].name.title ).toBe( 'Nereid' );
-		expect( satelliteItems[ 3 ].name.title ).toBe( 'Moon' );
-		expect( satelliteItems[ 4 ].name.title ).toBe( 'Io' );
-		expect( satelliteItems[ 5 ].name.title ).toBe( 'Himalia' );
-		expect( satelliteItems[ 6 ].name.title ).toBe( 'Ganymede' );
-		expect( satelliteItems[ 7 ].name.title ).toBe( 'Europa' );
-		expect( satelliteItems[ 8 ].name.title ).toBe( 'Callisto' );
-		expect( satelliteItems[ 9 ].name.title ).toBe( 'Amalthea' );
+		expect( satelliteItems ).toHaveLength( 25 );
+		expect( satelliteItems[ 0 ].name.title ).toBe( 'Umbriel' );
+		expect( satelliteItems[ 1 ].name.title ).toBe( 'Triton' );
+		expect( satelliteItems[ 2 ].name.title ).toBe( 'Titania' );
+		expect( satelliteItems[ 3 ].name.title ).toBe( 'Titan' );
+		expect( satelliteItems[ 4 ].name.title ).toBe( 'Tethys' );
+		expect( satelliteItems[ 5 ].name.title ).toBe( 'Rhea' );
+		expect( satelliteItems[ 6 ].name.title ).toBe( 'Proteus' );
+		expect( satelliteItems[ 7 ].name.title ).toBe( 'Phobos' );
+		expect( satelliteItems[ 8 ].name.title ).toBe( 'Oberon' );
+		expect( satelliteItems[ 9 ].name.title ).toBe( 'Nereid' );
 
 		// Verify all terrestrial planets are grouped together
 		const terrestrialItems = result.filter(
@@ -1014,7 +1036,7 @@ describe( 'sorting', () => {
 			fields
 		);
 
-		expect( result ).toHaveLength( 19 );
+		expect( result ).toHaveLength( 37 );
 		expect( result[ 0 ].name.title ).toBe( 'Saturn' );
 		expect( result[ 1 ].name.title ).toBe( 'Jupiter' );
 		expect( result[ 2 ].name.title ).toBe( 'Uranus' );
@@ -1048,11 +1070,13 @@ describe( 'sorting', () => {
 			},
 			fields
 		);
-		expect( resultDesc ).toHaveLength( 19 );
+		expect( resultDesc ).toHaveLength( 37 );
 		expect( resultDesc[ 0 ].name.title ).toBe( 'Europa' );
-		expect( resultDesc[ 1 ].name.title ).toBe( 'Earth' );
+		expect( resultDesc[ 1 ].name.title ).toBe( 'Ceres' );
 		// Skip intermediate items
-		expect( resultDesc[ resultDesc.length - 2 ].name.title ).toBe( 'Io' );
+		expect( resultDesc[ resultDesc.length - 2 ].name.title ).toBe(
+			'Deimos'
+		);
 		expect( resultDesc[ resultDesc.length - 1 ].name.title ).toBe(
 			'Jupiter'
 		);
@@ -1064,11 +1088,11 @@ describe( 'sorting', () => {
 			},
 			fields
 		);
-		expect( resultAsc ).toHaveLength( 19 );
+		expect( resultAsc ).toHaveLength( 37 );
 		expect( resultAsc[ 0 ].name.title ).toBe( 'Jupiter' );
-		expect( resultAsc[ 1 ].name.title ).toBe( 'Io' );
+		expect( resultAsc[ 1 ].name.title ).toBe( 'Deimos' );
 		// Skip intermediate items
-		expect( resultAsc[ resultAsc.length - 2 ].name.title ).toBe( 'Earth' );
+		expect( resultAsc[ resultAsc.length - 2 ].name.title ).toBe( 'Ceres' );
 		expect( resultAsc[ resultAsc.length - 1 ].name.title ).toBe( 'Europa' );
 	} );
 
@@ -1086,7 +1110,7 @@ describe( 'sorting', () => {
 			)
 		);
 
-		expect( result ).toHaveLength( 19 );
+		expect( result ).toHaveLength( 37 );
 		expect( result[ 0 ].name.title ).toBe( 'Saturn' );
 		expect( result[ 1 ].name.title ).toBe( 'Jupiter' );
 		expect( result[ 2 ].name.title ).toBe( 'Uranus' );
@@ -1134,7 +1158,7 @@ describe( 'sorting', () => {
 			}
 		}
 
-		expect( groupCount ).toBe( 5 );
+		expect( groupCount ).toBe( 6 );
 	} );
 
 	it( 'should NOT sort the data if gropuBy.field is not sortable', () => {
@@ -1202,7 +1226,7 @@ describe( 'pagination', () => {
 		expect( result[ 1 ].name.title ).toBe( 'Ganymede' );
 		expect( paginationInfo ).toStrictEqual( {
 			totalItems: data.length,
-			totalPages: 10,
+			totalPages: 19,
 		} );
 	} );
 } );

package/build/components/dataviews-layouts/table/use-is-horizontal-scroll-end.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/components/dataviews-layouts/table/use-is-horizontal-scroll-end.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { MutableRefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useDebounce } from '@wordpress/compose';\nimport { useCallback, useEffect, useState } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\nconst isScrolledToEnd = ( element: Element ) => {\n\tif ( isRTL() ) {\n\t\tconst scrollLeft = Math.abs( element.scrollLeft );\n\t\treturn scrollLeft <= 1;\n\t}\n\n\treturn element.scrollLeft + element.clientWidth >= element.scrollWidth - 1;\n};\n\n/**\n * A hook to check if a given scroll container has reached the horizontal scroll end.\n *\n * The current way receives \"refs\" as arguments, but it lacks a mechanism to detect when a ref has changed.\n * As a result, when the \"ref\" is updated and attached to a new div, the computation should trigger again.\n * However, this isn't possible in the current setup because the hook is unaware that the ref has changed.\n *\n * See https://github.com/Automattic/wp-calypso/pull/103005#discussion_r2077567912.\n *\n * @param {Object}                                  params                    The parameters for the hook.\n * @param {MutableRefObject<HTMLDivElement | null>} params.scrollContainerRef The ref to the scroll container element.\n * @param {boolean}                                 [params.enabled=false]    Whether the hook is enabled.\n * @return {boolean} - Returns true if the scroll container is scrolled to the end or false otherwise.\n */\nexport function useIsHorizontalScrollEnd( {\n\tscrollContainerRef,\n\tenabled = false,\n}: {\n\tscrollContainerRef: React.MutableRefObject< HTMLDivElement | null >;\n\tenabled?: boolean;\n} ): boolean {\n\tconst [ isHorizontalScrollEnd, setIsHorizontalScrollEnd ] =\n\t\tuseState( false );\n\n\tconst handleIsHorizontalScrollEnd = useDebounce(\n\t\tuseCallback( () => {\n\t\t\tconst scrollContainer = scrollContainerRef.current;\n\t\t\tif ( scrollContainer ) {\n\t\t\t\tsetIsHorizontalScrollEnd( isScrolledToEnd( scrollContainer ) );\n\t\t\t}\n\t\t}, [ scrollContainerRef, setIsHorizontalScrollEnd ] ),\n\t\t200\n\t);\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\ttypeof window === 'undefined' ||\n\t\t\t! enabled ||\n\t\t\t! scrollContainerRef.current\n\t\t) {\n\t\t\treturn () => {};\n\t\t}\n\n\t\thandleIsHorizontalScrollEnd();\n\t\tscrollContainerRef.current.addEventListener(\n\t\t\t'scroll',\n\t\t\thandleIsHorizontalScrollEnd\n\t\t);\n\t\twindow.addEventListener( 'resize', handleIsHorizontalScrollEnd );\n\n\t\treturn () => {\n\t\t\tscrollContainerRef.current?.removeEventListener(\n\t\t\t\t'scroll',\n\t\t\t\thandleIsHorizontalScrollEnd\n\t\t\t);\n\t\t\twindow.removeEventListener( 'resize', handleIsHorizontalScrollEnd );\n\t\t};\n\t}, [ scrollContainerRef, enabled ] );\n\n\treturn isHorizontalScrollEnd;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,qBAA4B;AAC5B,qBAAiD;AACjD,kBAAsB;AAEtB,IAAM,kBAAkB,CAAE,YAAsB;AAC/C,UAAK,mBAAM,GAAI;AACd,UAAM,aAAa,KAAK,IAAK,QAAQ,UAAW;AAChD,WAAO,cAAc;AAAA,EACtB;AAEA,SAAO,QAAQ,aAAa,QAAQ,eAAe,QAAQ,cAAc;AAC1E;AAgBO,SAAS,yBAA0B;AAAA,EACzC;AAAA,EACA,UAAU;AACX,GAGa;AACZ,QAAM,CAAE,uBAAuB,wBAAyB,QACvD,yBAAU,KAAM;AAEjB,QAAM,kCAA8B;AAAA,QACnC,4BAAa,MAAM;AAClB,YAAM,kBAAkB,mBAAmB;AAC3C,UAAK,iBAAkB;AACtB,iCAA0B,gBAAiB,eAAgB,CAAE;AAAA,MAC9D;AAAA,IACD,GAAG,CAAE,oBAAoB,wBAAyB,CAAE;AAAA,IACpD;AAAA,EACD;AAEA,gCAAW,MAAM;AAChB,QACC,OAAO,WAAW,eAClB,CAAE,WACF,CAAE,mBAAmB,SACpB;AACD,aAAO,MAAM;AAAA,MAAC;AAAA,IACf;AAEA,gCAA4B;AAC5B,uBAAmB,QAAQ;AAAA,MAC1B;AAAA,MACA;AAAA,IACD;AACA,WAAO,iBAAkB,UAAU,2BAA4B;AAE/D,WAAO,MAAM;AACZ,yBAAmB,SAAS;AAAA,QAC3B;AAAA,QACA;AAAA,MACD;AACA,aAAO,oBAAqB,UAAU,2BAA4B;AAAA,IACnE;AAAA,EACD,GAAG,CAAE,oBAAoB,OAAQ,CAAE;AAEnC,SAAO;AACR;",
-  "names": []
-}

package/build-module/components/dataviews-layouts/table/use-is-horizontal-scroll-end.mjs

@@ -1,50 +0,0 @@
-// packages/dataviews/src/components/dataviews-layouts/table/use-is-horizontal-scroll-end.ts
-import { useDebounce } from "@wordpress/compose";
-import { useCallback, useEffect, useState } from "@wordpress/element";
-import { isRTL } from "@wordpress/i18n";
-var isScrolledToEnd = (element) => {
-  if (isRTL()) {
-    const scrollLeft = Math.abs(element.scrollLeft);
-    return scrollLeft <= 1;
-  }
-  return element.scrollLeft + element.clientWidth >= element.scrollWidth - 1;
-};
-function useIsHorizontalScrollEnd({
-  scrollContainerRef,
-  enabled = false
-}) {
-  const [isHorizontalScrollEnd, setIsHorizontalScrollEnd] = useState(false);
-  const handleIsHorizontalScrollEnd = useDebounce(
-    useCallback(() => {
-      const scrollContainer = scrollContainerRef.current;
-      if (scrollContainer) {
-        setIsHorizontalScrollEnd(isScrolledToEnd(scrollContainer));
-      }
-    }, [scrollContainerRef, setIsHorizontalScrollEnd]),
-    200
-  );
-  useEffect(() => {
-    if (typeof window === "undefined" || !enabled || !scrollContainerRef.current) {
-      return () => {
-      };
-    }
-    handleIsHorizontalScrollEnd();
-    scrollContainerRef.current.addEventListener(
-      "scroll",
-      handleIsHorizontalScrollEnd
-    );
-    window.addEventListener("resize", handleIsHorizontalScrollEnd);
-    return () => {
-      scrollContainerRef.current?.removeEventListener(
-        "scroll",
-        handleIsHorizontalScrollEnd
-      );
-      window.removeEventListener("resize", handleIsHorizontalScrollEnd);
-    };
-  }, [scrollContainerRef, enabled]);
-  return isHorizontalScrollEnd;
-}
-export {
-  useIsHorizontalScrollEnd
-};
-//# sourceMappingURL=use-is-horizontal-scroll-end.mjs.map

package/build-module/components/dataviews-layouts/table/use-is-horizontal-scroll-end.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/components/dataviews-layouts/table/use-is-horizontal-scroll-end.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { MutableRefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useDebounce } from '@wordpress/compose';\nimport { useCallback, useEffect, useState } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\nconst isScrolledToEnd = ( element: Element ) => {\n\tif ( isRTL() ) {\n\t\tconst scrollLeft = Math.abs( element.scrollLeft );\n\t\treturn scrollLeft <= 1;\n\t}\n\n\treturn element.scrollLeft + element.clientWidth >= element.scrollWidth - 1;\n};\n\n/**\n * A hook to check if a given scroll container has reached the horizontal scroll end.\n *\n * The current way receives \"refs\" as arguments, but it lacks a mechanism to detect when a ref has changed.\n * As a result, when the \"ref\" is updated and attached to a new div, the computation should trigger again.\n * However, this isn't possible in the current setup because the hook is unaware that the ref has changed.\n *\n * See https://github.com/Automattic/wp-calypso/pull/103005#discussion_r2077567912.\n *\n * @param {Object}                                  params                    The parameters for the hook.\n * @param {MutableRefObject<HTMLDivElement | null>} params.scrollContainerRef The ref to the scroll container element.\n * @param {boolean}                                 [params.enabled=false]    Whether the hook is enabled.\n * @return {boolean} - Returns true if the scroll container is scrolled to the end or false otherwise.\n */\nexport function useIsHorizontalScrollEnd( {\n\tscrollContainerRef,\n\tenabled = false,\n}: {\n\tscrollContainerRef: React.MutableRefObject< HTMLDivElement | null >;\n\tenabled?: boolean;\n} ): boolean {\n\tconst [ isHorizontalScrollEnd, setIsHorizontalScrollEnd ] =\n\t\tuseState( false );\n\n\tconst handleIsHorizontalScrollEnd = useDebounce(\n\t\tuseCallback( () => {\n\t\t\tconst scrollContainer = scrollContainerRef.current;\n\t\t\tif ( scrollContainer ) {\n\t\t\t\tsetIsHorizontalScrollEnd( isScrolledToEnd( scrollContainer ) );\n\t\t\t}\n\t\t}, [ scrollContainerRef, setIsHorizontalScrollEnd ] ),\n\t\t200\n\t);\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\ttypeof window === 'undefined' ||\n\t\t\t! enabled ||\n\t\t\t! scrollContainerRef.current\n\t\t) {\n\t\t\treturn () => {};\n\t\t}\n\n\t\thandleIsHorizontalScrollEnd();\n\t\tscrollContainerRef.current.addEventListener(\n\t\t\t'scroll',\n\t\t\thandleIsHorizontalScrollEnd\n\t\t);\n\t\twindow.addEventListener( 'resize', handleIsHorizontalScrollEnd );\n\n\t\treturn () => {\n\t\t\tscrollContainerRef.current?.removeEventListener(\n\t\t\t\t'scroll',\n\t\t\t\thandleIsHorizontalScrollEnd\n\t\t\t);\n\t\t\twindow.removeEventListener( 'resize', handleIsHorizontalScrollEnd );\n\t\t};\n\t}, [ scrollContainerRef, enabled ] );\n\n\treturn isHorizontalScrollEnd;\n}\n"],
-  "mappings": ";AAQA,SAAS,mBAAmB;AAC5B,SAAS,aAAa,WAAW,gBAAgB;AACjD,SAAS,aAAa;AAEtB,IAAM,kBAAkB,CAAE,YAAsB;AAC/C,MAAK,MAAM,GAAI;AACd,UAAM,aAAa,KAAK,IAAK,QAAQ,UAAW;AAChD,WAAO,cAAc;AAAA,EACtB;AAEA,SAAO,QAAQ,aAAa,QAAQ,eAAe,QAAQ,cAAc;AAC1E;AAgBO,SAAS,yBAA0B;AAAA,EACzC;AAAA,EACA,UAAU;AACX,GAGa;AACZ,QAAM,CAAE,uBAAuB,wBAAyB,IACvD,SAAU,KAAM;AAEjB,QAAM,8BAA8B;AAAA,IACnC,YAAa,MAAM;AAClB,YAAM,kBAAkB,mBAAmB;AAC3C,UAAK,iBAAkB;AACtB,iCAA0B,gBAAiB,eAAgB,CAAE;AAAA,MAC9D;AAAA,IACD,GAAG,CAAE,oBAAoB,wBAAyB,CAAE;AAAA,IACpD;AAAA,EACD;AAEA,YAAW,MAAM;AAChB,QACC,OAAO,WAAW,eAClB,CAAE,WACF,CAAE,mBAAmB,SACpB;AACD,aAAO,MAAM;AAAA,MAAC;AAAA,IACf;AAEA,gCAA4B;AAC5B,uBAAmB,QAAQ;AAAA,MAC1B;AAAA,MACA;AAAA,IACD;AACA,WAAO,iBAAkB,UAAU,2BAA4B;AAE/D,WAAO,MAAM;AACZ,yBAAmB,SAAS;AAAA,QAC3B;AAAA,QACA;AAAA,MACD;AACA,aAAO,oBAAqB,UAAU,2BAA4B;AAAA,IACnE;AAAA,EACD,GAAG,CAAE,oBAAoB,OAAQ,CAAE;AAEnC,SAAO;AACR;",
-  "names": []
-}

package/build-types/components/dataviews-layouts/table/use-is-horizontal-scroll-end.d.ts

@@ -1,19 +0,0 @@
-/**
- * A hook to check if a given scroll container has reached the horizontal scroll end.
- *
- * The current way receives "refs" as arguments, but it lacks a mechanism to detect when a ref has changed.
- * As a result, when the "ref" is updated and attached to a new div, the computation should trigger again.
- * However, this isn't possible in the current setup because the hook is unaware that the ref has changed.
- *
- * See https://github.com/Automattic/wp-calypso/pull/103005#discussion_r2077567912.
- *
- * @param {Object}                                  params                    The parameters for the hook.
- * @param {MutableRefObject<HTMLDivElement | null>} params.scrollContainerRef The ref to the scroll container element.
- * @param {boolean}                                 [params.enabled=false]    Whether the hook is enabled.
- * @return {boolean} - Returns true if the scroll container is scrolled to the end or false otherwise.
- */
-export declare function useIsHorizontalScrollEnd({ scrollContainerRef, enabled, }: {
-    scrollContainerRef: React.MutableRefObject<HTMLDivElement | null>;
-    enabled?: boolean;
-}): boolean;
-//# sourceMappingURL=use-is-horizontal-scroll-end.d.ts.map

package/build-types/components/dataviews-layouts/table/use-is-horizontal-scroll-end.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-is-horizontal-scroll-end.d.ts","sourceRoot":"","sources":["../../../../src/components/dataviews-layouts/table/use-is-horizontal-scroll-end.ts"],"names":[],"mappings":"AAqBA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,wBAAwB,CAAE,EACzC,kBAAkB,EAClB,OAAe,GACf,EAAE;IACF,kBAAkB,EAAE,KAAK,CAAC,gBAAgB,CAAE,cAAc,GAAG,IAAI,CAAE,CAAC;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,GAAI,OAAO,CAwCX"}

package/src/components/dataviews-layouts/table/use-is-horizontal-scroll-end.ts

@@ -1,82 +0,0 @@
-/**
- * External dependencies
- */
-import type { MutableRefObject } from 'react';
-
-/**
- * WordPress dependencies
- */
-import { useDebounce } from '@wordpress/compose';
-import { useCallback, useEffect, useState } from '@wordpress/element';
-import { isRTL } from '@wordpress/i18n';
-
-const isScrolledToEnd = ( element: Element ) => {
-	if ( isRTL() ) {
-		const scrollLeft = Math.abs( element.scrollLeft );
-		return scrollLeft <= 1;
-	}
-
-	return element.scrollLeft + element.clientWidth >= element.scrollWidth - 1;
-};
-
-/**
- * A hook to check if a given scroll container has reached the horizontal scroll end.
- *
- * The current way receives "refs" as arguments, but it lacks a mechanism to detect when a ref has changed.
- * As a result, when the "ref" is updated and attached to a new div, the computation should trigger again.
- * However, this isn't possible in the current setup because the hook is unaware that the ref has changed.
- *
- * See https://github.com/Automattic/wp-calypso/pull/103005#discussion_r2077567912.
- *
- * @param {Object}                                  params                    The parameters for the hook.
- * @param {MutableRefObject<HTMLDivElement | null>} params.scrollContainerRef The ref to the scroll container element.
- * @param {boolean}                                 [params.enabled=false]    Whether the hook is enabled.
- * @return {boolean} - Returns true if the scroll container is scrolled to the end or false otherwise.
- */
-export function useIsHorizontalScrollEnd( {
-	scrollContainerRef,
-	enabled = false,
-}: {
-	scrollContainerRef: React.MutableRefObject< HTMLDivElement | null >;
-	enabled?: boolean;
-} ): boolean {
-	const [ isHorizontalScrollEnd, setIsHorizontalScrollEnd ] =
-		useState( false );
-
-	const handleIsHorizontalScrollEnd = useDebounce(
-		useCallback( () => {
-			const scrollContainer = scrollContainerRef.current;
-			if ( scrollContainer ) {
-				setIsHorizontalScrollEnd( isScrolledToEnd( scrollContainer ) );
-			}
-		}, [ scrollContainerRef, setIsHorizontalScrollEnd ] ),
-		200
-	);
-
-	useEffect( () => {
-		if (
-			typeof window === 'undefined' ||
-			! enabled ||
-			! scrollContainerRef.current
-		) {
-			return () => {};
-		}
-
-		handleIsHorizontalScrollEnd();
-		scrollContainerRef.current.addEventListener(
-			'scroll',
-			handleIsHorizontalScrollEnd
-		);
-		window.addEventListener( 'resize', handleIsHorizontalScrollEnd );
-
-		return () => {
-			scrollContainerRef.current?.removeEventListener(
-				'scroll',
-				handleIsHorizontalScrollEnd
-			);
-			window.removeEventListener( 'resize', handleIsHorizontalScrollEnd );
-		};
-	}, [ scrollContainerRef, enabled ] );
-
-	return isHorizontalScrollEnd;
-}