@wordpress/dataviews 13.0.0 → 13.1.0

package/src/dataviews/stories/with-card.tsx

@@ -18,7 +18,11 @@ import filterSortAndPaginate from '../../utils/filter-sort-and-paginate';
 import type { View } from '../../types';
 import { actions, data, fields } from './fixtures';
 
-const WithCardComponent = () => {
+const WithCardComponent = ( {
+	containerHeight,
+}: {
+	containerHeight: string;
+} ) => {
 	const [ view, setView ] = useState< View >( {
 		type: LAYOUT_TABLE,
 		search: '',
@@ -37,7 +41,7 @@ const WithCardComponent = () => {
 	return (
 		<Card>
 			<CardHeader>Header</CardHeader>
-			<CardBody>
+			<CardBody style={ { height: containerHeight, minHeight: 0 } }>
 				<DataViews
 					getItemId={ ( item ) => item.id.toString() }
 					paginationInfo={ paginationInfo }

package/src/dataviews/style.scss

@@ -15,7 +15,6 @@
 .dataviews-wrapper,
 .dataviews-picker-wrapper {
 	height: 100%;
-	overflow: auto;
 	box-sizing: border-box;
 	scroll-padding-bottom: $grid-unit-80;
 	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */

package/src/dataviews/test/dataviews.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -240,6 +240,47 @@ describe( 'DataViews component', () => {
 		expect( screen.getByText( 'TEST TITLE' ) ).toBeInTheDocument();
 	} );
 
+	it( 'should trigger infinite scroll when the layout container scrolls', () => {
+		const infiniteScrollHandler = jest.fn();
+		const { container } = render(
+			<DataViewWrapper
+				view={ {
+					type: LAYOUT_GRID,
+					infiniteScrollEnabled: true,
+					perPage: 1,
+				} }
+				paginationInfo={ {
+					totalItems: data.length,
+					totalPages: data.length,
+					infiniteScrollHandler,
+				} }
+			/>
+		);
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+		const layoutContainer = container.querySelector(
+			'.dataviews-layout__container'
+		) as HTMLDivElement;
+
+		Object.defineProperties( layoutContainer, {
+			scrollTop: {
+				configurable: true,
+				value: 500,
+			},
+			scrollHeight: {
+				configurable: true,
+				value: 1000,
+			},
+			clientHeight: {
+				configurable: true,
+				value: 500,
+			},
+		} );
+
+		fireEvent.scroll( layoutContainer );
+
+		expect( infiniteScrollHandler ).toHaveBeenCalledTimes( 1 );
+	} );
+
 	describe( 'in table view', () => {
 		it( 'should display columns for each field', () => {
 			render( <DataViewWrapper /> );

package/src/dataviews-picker/index.tsx

@@ -241,7 +241,7 @@ function DataViewsPicker< Item >( {
 				hasInfiniteScrollHandler: !! infiniteScrollHandler,
 			} }
 		>
-			<div className="dataviews-picker-wrapper" ref={ containerRef }>
+			<div className="dataviews-picker-wrapper">
 				{ children ?? (
 					<DefaultUI search={ search } searchLabel={ searchLabel } />
 				) }

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/dataform.ts

@@ -23,17 +23,30 @@ export type NormalizedRegularLayout = {
 
 export type EditVisibility = 'always' | 'on-hover';
 
+type PanelOpenAsDropdown = {
+	type: 'dropdown';
+};
+export type PanelOpenAsModal = {
+	type: 'modal';
+	applyLabel: string;
+	cancelLabel: string;
+};
+
 export type PanelLayout = {
 	type: 'panel';
 	labelPosition?: LabelPosition;
-	openAs?: 'dropdown' | 'modal';
+	openAs?:
+		| 'dropdown'
+		| 'modal'
+		| { type: 'dropdown' }
+		| { type: 'modal'; applyLabel?: string; cancelLabel?: string };
 	summary?: PanelSummaryField;
 	editVisibility?: EditVisibility;
 };
 export type NormalizedPanelLayout = {
 	type: 'panel';
 	labelPosition: LabelPosition;
-	openAs: 'dropdown' | 'modal';
+	openAs: PanelOpenAsDropdown | PanelOpenAsModal;
 	summary: NormalizedPanelSummaryField;
 	editVisibility: EditVisibility;
 };

package/src/types/dataviews.ts

@@ -285,6 +285,11 @@ export interface ViewGrid extends ViewBase {
 		 * The preview size of the grid.
 		 */
 		previewSize?: number;
+
+		/**
+		 * The density of the grid layout.
+		 */
+		density?: Density;
 	};
 }
 
@@ -301,6 +306,11 @@ export interface ViewPickerGrid extends ViewBase {
 		 * The preview size of the grid.
 		 */
 		previewSize?: number;
+
+		/**
+		 * The density of the grid layout.
+		 */
+		density?: Density;
 	};
 }
 

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;
-}