From fc0eb9a045c41b005dc84fd3e8e3ed56f8a662cb Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Wed, 18 Dec 2024 09:58:48 +0200
Subject: [PATCH] DataViews: Handle `grid` preview size based on container
 width

---
 .../src/components/dataviews-context/index.ts |  2 +
 .../src/components/dataviews/index.tsx        | 13 ++++-
 .../grid/preview-size-picker.tsx              | 55 +++++++++----------
 .../src/dataviews-layouts/grid/style.scss     | 35 ++++++------
 4 files changed, 58 insertions(+), 47 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-context/index.ts b/packages/dataviews/src/components/dataviews-context/index.ts
index 4bef3ecdbcbb4a..3e272902a6087d 100644
--- a/packages/dataviews/src/components/dataviews-context/index.ts
+++ b/packages/dataviews/src/components/dataviews-context/index.ts
@@ -28,6 +28,7 @@ type DataViewsContextType< Item > = {
 	getItemId: ( item: Item ) => string;
 	onClickItem?: ( item: Item ) => void;
 	isItemClickable: ( item: Item ) => boolean;
+	containerWidth: number;
 };
 
 const DataViewsContext = createContext< DataViewsContextType< any > >( {
@@ -45,6 +46,7 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	openedFilter: null,
 	getItemId: ( item ) => item.id,
 	isItemClickable: () => true,
+	containerWidth: 0,
 } );
 
 export default DataViewsContext;
diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx
index 99d9b6d684b08c..aee40724880bbb 100644
--- a/packages/dataviews/src/components/dataviews/index.tsx
+++ b/packages/dataviews/src/components/dataviews/index.tsx
@@ -8,6 +8,7 @@ import type { ReactNode } from 'react';
  */
 import { __experimentalHStack as HStack } from '@wordpress/components';
 import { useMemo, useState } from '@wordpress/element';
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -73,6 +74,15 @@ export default function DataViews< Item >( {
 	isItemClickable = defaultIsItemClickable,
 	header,
 }: DataViewsProps< Item > ) {
+	const [ containerWidth, setContainerWidth ] = useState( 0 );
+	const containerRef = useResizeObserver(
+		( resizeObserverEntries: any ) => {
+			setContainerWidth(
+				resizeObserverEntries[ 0 ].borderBoxSize[ 0 ].inlineSize
+			);
+		},
+		{ box: 'border-box' }
+	);
 	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
 	const isUncontrolled =
 		selectionProperty === undefined || onChangeSelection === undefined;
@@ -117,9 +127,10 @@ export default function DataViews< Item >( {
 				getItemId,
 				isItemClickable,
 				onClickItem,
+				containerWidth,
 			} }
 		>
-			<div className="dataviews-wrapper">
+			<div className="dataviews-wrapper" ref={ containerRef }>
 				<HStack
 					alignment="top"
 					justify="space-between"
diff --git a/packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx b/packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx
index b48c6422bd6b37..027632090b31b4 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx
+++ b/packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx
@@ -3,7 +3,6 @@
  */
 import { RangeControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useViewportMatch } from '@wordpress/compose';
 import { useMemo, useContext } from '@wordpress/element';
 
 /**
@@ -12,7 +11,9 @@ import { useMemo, useContext } from '@wordpress/element';
 import DataViewsContext from '../../components/dataviews-context';
 import type { ViewGrid } from '../../types';
 
-const viewportBreaks = {
+const viewportBreaks: {
+	[ key: string ]: { min: number; max: number; default: number };
+} = {
 	xhuge: { min: 3, max: 6, default: 5 },
 	huge: { min: 2, max: 4, default: 4 },
 	xlarge: { min: 2, max: 3, default: 3 },
@@ -20,38 +21,35 @@ const viewportBreaks = {
 	mobile: { min: 1, max: 2, default: 2 },
 };
 
-function useViewPortBreakpoint() {
-	const isXHuge = useViewportMatch( 'xhuge', '>=' );
-	const isHuge = useViewportMatch( 'huge', '>=' );
-	const isXlarge = useViewportMatch( 'xlarge', '>=' );
-	const isLarge = useViewportMatch( 'large', '>=' );
-	const isMobile = useViewportMatch( 'mobile', '>=' );
+/**
+ * Breakpoints were adjusted from media queries breakpoints to account for
+ * the sidebar width. This was done to match the existing styles we had.
+ */
+const BREAKPOINTS = {
+	xhuge: 1520,
+	huge: 1140,
+	xlarge: 780,
+	large: 480,
+	mobile: 0,
+};
 
-	if ( isXHuge ) {
-		return 'xhuge';
-	}
-	if ( isHuge ) {
-		return 'huge';
-	}
-	if ( isXlarge ) {
-		return 'xlarge';
-	}
-	if ( isLarge ) {
-		return 'large';
-	}
-	if ( isMobile ) {
-		return 'mobile';
+function useViewPortBreakpoint() {
+	const containerWidth = useContext( DataViewsContext ).containerWidth;
+	for ( const [ key, value ] of Object.entries( BREAKPOINTS ) ) {
+		if ( containerWidth >= value ) {
+			return key;
+		}
 	}
-	return null;
+	return 'mobile';
 }
 
 export function useUpdatedPreviewSizeOnViewportChange() {
-	const viewport = useViewPortBreakpoint();
 	const view = useContext( DataViewsContext ).view as ViewGrid;
+	const viewport = useViewPortBreakpoint();
 	return useMemo( () => {
 		const previewSize = view.layout?.previewSize;
 		let newPreviewSize;
-		if ( ! viewport || ! previewSize ) {
+		if ( ! previewSize ) {
 			return;
 		}
 		const breakValues = viewportBreaks[ viewport ];
@@ -69,9 +67,8 @@ export default function PreviewSizePicker() {
 	const viewport = useViewPortBreakpoint();
 	const context = useContext( DataViewsContext );
 	const view = context.view as ViewGrid;
-	const breakValues = viewportBreaks[ viewport || 'mobile' ];
+	const breakValues = viewportBreaks[ viewport ];
 	const previewSizeToUse = view.layout?.previewSize || breakValues.default;
-
 	const marks = useMemo(
 		() =>
 			Array.from(
@@ -84,11 +81,9 @@ export default function PreviewSizePicker() {
 			),
 		[ breakValues ]
 	);
-
-	if ( ! viewport ) {
+	if ( viewport === 'mobile' ) {
 		return null;
 	}
-
 	return (
 		<RangeControl
 			__nextHasNoMarginBottom
diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
index 8fa3d4463c4397..79e739ca5c798f 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -3,6 +3,7 @@
 	grid-template-rows: max-content;
 	padding: 0 $grid-unit-60 $grid-unit-30;
 	transition: padding ease-out 0.1s;
+	container-type: inline-size;
 	@include reduce-motion("transition");
 
 
@@ -126,21 +127,30 @@
 }
 
 .dataviews-view-grid.dataviews-view-grid {
-	grid-template-columns: repeat(1, minmax(0, 1fr));
-
-	@include break-mobile() {
+	/**
+	 * Breakpoints were adjusted from media queries breakpoints to account for
+	 * the sidebar width. This was done to match the existing styles we had.
+	 */
+	/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+	@container (max-width: 480px) {
+		grid-template-columns: repeat(1, minmax(0, 1fr));
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+	/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+	@container (min-width: 480px) {
 		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
-
-	@include break-xlarge() {
+	/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+	@container (min-width: 780px) {
 		grid-template-columns: repeat(3, minmax(0, 1fr));
 	}
-
-	@include break-huge() {
+	/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+	@container (min-width: 1140px) {
 		grid-template-columns: repeat(4, minmax(0, 1fr));
 	}
-
-	@include break-xhuge() {
+	/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+	@container (min-width: 1520px) {
 		grid-template-columns: repeat(5, minmax(0, 1fr));
 	}
 }
@@ -163,13 +173,6 @@
 	top: $grid-unit-10;
 }
 
-@container (max-width: 430px) {
-	.dataviews-view-grid {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
-	}
-}
-
 .dataviews-view-grid__media--clickable {
 	cursor: pointer;
 }