From be85633624ee62b359b7b33cdef71cb445fe56c7 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Fri, 19 Jul 2024 15:52:21 +0300
Subject: [PATCH] post rebase fixes

---
 .../src/components/dataviews-context/index.ts |  2 ++
 .../src/components/dataviews-layout/index.tsx |  2 ++
 .../src/components/dataviews/index.tsx        | 10 ++++++
 .../src/layouts/grid/density-picker.tsx       |  9 +++--
 .../dataviews/src/layouts/grid/style.scss     | 36 ++++++++++++-------
 5 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-context/index.ts b/packages/dataviews/src/components/dataviews-context/index.ts
index 39e5e09015658e..3936288b3095b0 100644
--- a/packages/dataviews/src/components/dataviews-context/index.ts
+++ b/packages/dataviews/src/components/dataviews-context/index.ts
@@ -26,6 +26,7 @@ type DataViewsContextType< Item > = {
 	openedFilter: string | null;
 	setOpenedFilter: ( openedFilter: string | null ) => void;
 	getItemId: ( item: Item ) => string;
+	density: number;
 };
 
 const DataViewsContext = createContext< DataViewsContextType< any > >( {
@@ -42,6 +43,7 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	setOpenedFilter: () => {},
 	openedFilter: null,
 	getItemId: ( item ) => item.id,
+	density: 0,
 } );
 
 export default DataViewsContext;
diff --git a/packages/dataviews/src/components/dataviews-layout/index.tsx b/packages/dataviews/src/components/dataviews-layout/index.tsx
index 960dcf304c0180..eac70763e143c1 100644
--- a/packages/dataviews/src/components/dataviews-layout/index.tsx
+++ b/packages/dataviews/src/components/dataviews-layout/index.tsx
@@ -27,6 +27,7 @@ export default function DataViewsLayout() {
 		selection,
 		onChangeSelection,
 		setOpenedFilter,
+		density,
 	} = useContext( DataViewsContext );
 
 	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
@@ -44,6 +45,7 @@ export default function DataViewsLayout() {
 			selection={ selection }
 			setOpenedFilter={ setOpenedFilter }
 			view={ view }
+			density={ density }
 		/>
 	);
 }
diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx
index 618e04773c084e..5d45413f03b65a 100644
--- a/packages/dataviews/src/components/dataviews/index.tsx
+++ b/packages/dataviews/src/components/dataviews/index.tsx
@@ -18,6 +18,8 @@ import DataViewsViewConfig from '../dataviews-view-config';
 import { normalizeFields } from '../../normalize-fields';
 import type { Action, Field, View, SupportedLayouts } from '../../types';
 import type { SelectionOrUpdater } from '../../private-types';
+import DensityPicker from '../../layouts/grid/density-picker';
+import { LAYOUT_GRID } from '../../constants';
 
 type ItemWithId = { id: string };
 
@@ -59,6 +61,7 @@ export default function DataViews< Item >( {
 	onChangeSelection,
 }: DataViewsProps< Item > ) {
 	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
+	const [ density, setDensity ] = useState< number >( 0 );
 	const isUncontrolled =
 		selectionProperty === undefined || onChangeSelection === undefined;
 	const selection = isUncontrolled ? selectionState : selectionProperty;
@@ -95,6 +98,7 @@ export default function DataViews< Item >( {
 				openedFilter,
 				setOpenedFilter,
 				getItemId,
+				density,
 			} }
 		>
 			<div className="dataviews-wrapper">
@@ -111,6 +115,12 @@ export default function DataViews< Item >( {
 						{ search && <DataViewsSearch label={ searchLabel } /> }
 						<DataViewsFilters />
 					</HStack>
+					{ view.type === LAYOUT_GRID && (
+						<DensityPicker
+							density={ density }
+							setDensity={ setDensity }
+						/>
+					) }
 					<DataViewsBulkActions />
 					<DataViewsViewConfig defaultLayouts={ defaultLayouts } />
 				</HStack>
diff --git a/packages/dataviews/src/layouts/grid/density-picker.tsx b/packages/dataviews/src/layouts/grid/density-picker.tsx
index 31a0bc3eaf0b3c..df347507fb6340 100644
--- a/packages/dataviews/src/layouts/grid/density-picker.tsx
+++ b/packages/dataviews/src/layouts/grid/density-picker.tsx
@@ -69,10 +69,13 @@ export default function DensityPicker( {
 				return 0;
 			}
 			const breakValues = viewportBreaks[ viewport ];
-			if ( _density >= breakValues.min && _density <= breakValues.max ) {
-				return _density;
+			if ( _density < breakValues.min ) {
+				return breakValues.min;
 			}
-			return breakValues.default;
+			if ( _density > breakValues.max ) {
+				return breakValues.max;
+			}
+			return _density;
 		} );
 	}, [ setDensity, viewport ] );
 	if ( ! viewport ) {
diff --git a/packages/dataviews/src/layouts/grid/style.scss b/packages/dataviews/src/layouts/grid/style.scss
index 9e18c82a441702..91f0e2b8a381c9 100644
--- a/packages/dataviews/src/layouts/grid/style.scss
+++ b/packages/dataviews/src/layouts/grid/style.scss
@@ -1,22 +1,10 @@
 .dataviews-view-grid {
 	margin-bottom: auto;
-	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
 	grid-template-rows: max-content;
 	padding: 0 $grid-unit-60 $grid-unit-30;
 	transition: padding ease-out 0.1s;
 	@include reduce-motion("transition");
 
-	@include break-mobile() {
-		grid-template-columns: repeat(2, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
-
-	@include break-xlarge() {
-		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
-
-	@include break-huge() {
-		grid-template-columns: repeat(4, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
 
 	.dataviews-view-grid__card {
 		height: 100%;
@@ -122,6 +110,30 @@
 	}
 }
 
+.dataviews-view-grid.dataviews-view-grid {
+	grid-template-columns: repeat(1, minmax(0, 1fr));
+
+	@include break-mobile() {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	@include break-xlarge() {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+
+	@include break-huge() {
+		grid-template-columns: repeat(4, minmax(0, 1fr));
+	}
+
+	@include break-xhuge() {
+		grid-template-columns: repeat(5, minmax(0, 1fr));
+	}
+}
+
+.dataviews-density-picker__range-control {
+	width: 200px;
+}
+
 .dataviews-view-grid__field-value:empty,
 .dataviews-view-grid__field:empty {
 	display: none;