@wordpress/dataviews 1.1.0 → 2.0.0

package/src/{search.js → search.tsx}

@@ -6,20 +6,37 @@ import { useEffect, useRef, memo } from '@wordpress/element';
 import { SearchControl } from '@wordpress/components';
 import { useDebouncedInput } from '@wordpress/compose';
 
-const Search = memo( function Search( { label, view, onChangeView } ) {
+/**
+ * Internal dependencies
+ */
+import type { View } from './types';
+
+interface SearchProps {
+	label?: string;
+	view: View;
+	onChangeView: ( view: View ) => void;
+}
+
+const Search = memo( function Search( {
+	label,
+	view,
+	onChangeView,
+}: SearchProps ) {
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
 		view.search
 	);
 	useEffect( () => {
-		setSearch( view.search );
-	}, [ view ] );
+		setSearch( view.search ?? '' );
+	}, [ view.search, setSearch ] );
 	const onChangeViewRef = useRef( onChangeView );
+	const viewRef = useRef( view );
 	useEffect( () => {
 		onChangeViewRef.current = onChangeView;
-	}, [ onChangeView ] );
+		viewRef.current = view;
+	}, [ onChangeView, view ] );
 	useEffect( () => {
 		onChangeViewRef.current( {
-			...view,
+			...viewRef.current,
 			page: 1,
 			search: debouncedSearch,
 		} );

package/src/{single-selection-checkbox.js → single-selection-checkbox.tsx}

@@ -4,7 +4,22 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { CheckboxControl } from '@wordpress/components';
 
-export default function SingleSelectionCheckbox( {
+/**
+ * Internal dependencies
+ */
+import type { Field, AnyItem } from './types';
+
+interface SingleSelectionCheckboxProps< Item extends AnyItem > {
+	selection: string[];
+	onSelectionChange: ( selection: Item[] ) => void;
+	item: Item;
+	data: Item[];
+	getItemId: ( item: Item ) => string;
+	primaryField?: Field< Item >;
+	disabled: boolean;
+}
+
+export default function SingleSelectionCheckbox< Item extends AnyItem >( {
 	selection,
 	onSelectionChange,
 	item,
@@ -12,7 +27,7 @@ export default function SingleSelectionCheckbox( {
 	getItemId,
 	primaryField,
 	disabled,
-} ) {
+}: SingleSelectionCheckboxProps< Item > ) {
 	const id = getItemId( item );
 	const isSelected = selection.includes( id );
 	let selectionLabel;

package/src/style.scss

@@ -3,15 +3,20 @@
 	overflow: auto;
 	box-sizing: border-box;
 	scroll-padding-bottom: $grid-unit-80;
+	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
+	container: dataviews-wrapper / inline-size;
+	display: flex;
+	flex-direction: column;
 }
 
 .dataviews-filters__view-actions {
 	box-sizing: border-box;
-	padding: $grid-unit-15 $grid-unit-40 0;
-	margin-bottom: $grid-unit-15;
+	padding: $grid-unit-20 $grid-unit-60;
 	flex-shrink: 0;
 	position: sticky;
 	left: 0;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
 
 	.components-search-control {
 		.components-base-control__field {
@@ -21,8 +26,6 @@
 }
 
 .dataviews-filters__container {
-	padding-right: $grid-unit-40;
-
 	.dataviews-filters__reset-button[aria-disabled="true"] {
 		&,
 		&:hover {
@@ -44,10 +47,12 @@
 	bottom: 0;
 	left: 0;
 	background-color: $white;
-	padding: $grid-unit-15 $grid-unit-40;
+	padding: $grid-unit-15 $grid-unit-60;
 	border-top: $border-width solid $gray-100;
 	color: $gray-700;
 	flex-shrink: 0;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
 }
 
 .dataviews-pagination__page-selection {
@@ -68,6 +73,7 @@
 	border-collapse: collapse;
 	position: relative;
 	color: $gray-700;
+	margin-bottom: auto;
 
 	a {
 		text-decoration: none;
@@ -100,9 +106,18 @@
 			gap: $grid-unit-05;
 		}
 
+		th,
+		td {
+			&:first-child,
+			&:last-child {
+				transition: padding ease-out 0.1s;
+				@include reduce-motion("transition");
+			}
+		}
+
 		td:first-child,
 		th:first-child {
-			padding-left: $grid-unit-40;
+			padding-left: $grid-unit-60;
 
 			.dataviews-view-table-header-button,
 			.dataviews-view-table-header {
@@ -112,7 +127,7 @@
 
 		td:last-child,
 		th:last-child {
-			padding-right: $grid-unit-40;
+			padding-right: $grid-unit-60;
 		}
 
 		&:last-child {
@@ -278,10 +293,16 @@
 }
 
 .dataviews-view-grid {
-	margin-bottom: $grid-unit-30;
-	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+	margin-bottom: auto;
+	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
 	grid-template-rows: max-content;
-	padding: 0 $grid-unit-40;
+	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
@@ -339,6 +360,7 @@
 			height: 100%;
 			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
 			border-radius: $grid-unit-05;
+			pointer-events: none;
 		}
 	}
 
@@ -395,33 +417,46 @@
 }
 
 .dataviews-view-list {
-	margin: 0;
-	padding: $grid-unit-10;
+	margin: 0 0 auto;
 
 	li {
 		margin: 0;
 		cursor: pointer;
+		border-top: 1px solid $gray-100;
 
 		.dataviews-view-list__item-wrapper {
 			position: relative;
-			padding-right: $grid-unit-30;
 			border-radius: $grid-unit-05;
 
-			&::after {
-				position: absolute;
-				content: "";
-				top: 100%;
-				left: $grid-unit-30;
-				right: $grid-unit-30;
-				background: $gray-100;
-				height: 1px;
-			}
-
 			> * {
 				width: 100%;
 			}
 		}
 
+		.dataviews-view-list__item-actions {
+			.components-button {
+				opacity: 0;
+				position: fixed;
+			}
+		}
+
+		&.is-selected,
+		&.is-hovered,
+		&:focus-within {
+			.dataviews-view-list__item-actions {
+				padding-right: $grid-unit-40;
+
+				.components-button {
+					opacity: 1;
+					position: static;
+				}
+			}
+
+			.dataviews-view-list__item {
+				padding-right: 0;
+			}
+		}
+
 		&:not(.is-selected) {
 			.dataviews-view-list__primary-field {
 				color: $gray-900;
@@ -429,6 +464,7 @@
 			&:hover,
 			&:focus-within {
 				color: var(--wp-admin-theme-color);
+				background-color: #f8f8f8;
 
 				.dataviews-view-list__primary-field,
 				.dataviews-view-list__fields {
@@ -436,28 +472,24 @@
 				}
 			}
 		}
+
 	}
 
 	li.is-selected,
 	li.is-selected:focus-within {
 		.dataviews-view-list__item-wrapper {
-			background-color: var(--wp-admin-theme-color);
-			color: $white;
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			color: $gray-900;
 
 			.dataviews-view-list__primary-field,
-			.dataviews-view-list__fields,
-			.components-button {
-				color: $white;
-			}
-
-			&::after {
-				background: transparent;
+			.dataviews-view-list__fields {
+				color: var(--wp-admin-theme-color);
 			}
 		}
 	}
 
 	.dataviews-view-list__item {
-		padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-30;
+		padding: $grid-unit-20 0 $grid-unit-20 $grid-unit-30;
 		width: 100%;
 		scroll-margin: $grid-unit-10 0;
 
@@ -465,17 +497,17 @@
 			&::before {
 				position: absolute;
 				content: "";
-				top: -1px;
-				right: -1px;
-				bottom: -1px;
-				left: -1px;
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				z-index: -1;
-				border-radius: $grid-unit-05;
+				top: calc(var(--wp-admin-border-width-focus) + 1px);
+				right: var(--wp-admin-border-width-focus);
+				bottom: var(--wp-admin-border-width-focus);
+				left: var(--wp-admin-border-width-focus);
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				border-radius: $radius-block-ui;
 			}
 		}
 		.dataviews-view-list__primary-field {
 			min-height: $grid-unit-05 * 5;
+			line-height: $grid-unit-05 * 5;
 			overflow: hidden;
 		}
 	}
@@ -483,11 +515,11 @@
 	.dataviews-view-list__media-wrapper {
 		width: $grid-unit-50;
 		height: $grid-unit-50;
-		border-radius: $grid-unit-05;
 		overflow: hidden;
 		position: relative;
 		flex-shrink: 0;
 		background-color: $gray-100;
+		border-radius: $grid-unit-05;
 
 		img {
 			width: 100%;
@@ -519,13 +551,20 @@
 		gap: $grid-unit-10;
 		flex-wrap: wrap;
 		font-size: 12px;
-		line-height: $grid-unit-20;
 
 		.dataviews-view-list__field {
 			&:has(.dataviews-view-list__field-value:empty) {
 				display: none;
 			}
 		}
+
+		.dataviews-view-list__field-value {
+			line-height: $grid-unit-05 * 5;
+			display: inline-flex;
+		}
+	}
+	.dataviews-view-list__item-actions {
+		padding-right: $grid-unit-30;
 	}
 
 	& + .dataviews-pagination {
@@ -540,11 +579,13 @@
 
 .dataviews-no-results,
 .dataviews-loading {
-	padding: 0 $grid-unit-40;
+	padding: 0 $grid-unit-60;
 	flex-grow: 1;
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
 }
 
 .dataviews-view-table-selection-checkbox {
@@ -555,6 +596,11 @@
 	}
 
 	line-height: 0;
+	flex-shrink: 0;
+
+	.components-checkbox-control__input-container {
+		margin: 0;
+	}
 }
 
 .dataviews-filters__custom-menu-radio-item-prefix {
@@ -797,3 +843,80 @@
 		}
 	}
 }
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.dataviews-pagination,
+	.dataviews-filters__view-actions {
+		padding: $grid-unit-15 $grid-unit-30;
+	}
+
+	.dataviews-filters__view-actions {
+		.components-search-control {
+			.components-base-control__field {
+				max-width: 112px;
+			}
+		}
+	}
+
+	.dataviews-view-table tr td:first-child,
+	.dataviews-view-table tr th:first-child {
+		padding-left: $grid-unit-30;
+	}
+
+	.dataviews-view-table tr td:last-child,
+	.dataviews-view-table tr th:last-child {
+		padding-right: $grid-unit-30;
+	}
+
+	.dataviews-view-grid,
+	.dataviews-no-results,
+	.dataviews-loading {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+}
+
+.dataviews-bulk-actions-toolbar-wrapper {
+	display: flex;
+	flex-grow: 1;
+	width: 100%;
+
+	.components-toolbar-group {
+		align-items: center;
+	}
+
+	.components-button.is-busy {
+		max-height: $button-size;
+	}
+}
+
+.dataviews-bulk-actions {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	align-content: center;
+	flex-wrap: wrap;
+	width: 100%;
+	bottom: $grid-unit-30;
+	z-index: z-index(".dataviews-bulk-actions");
+
+	.components-accessible-toolbar {
+		border-color: $gray-300;
+		box-shadow: $shadow-popover;
+
+		.components-toolbar-group {
+			border-color: $gray-200;
+
+			&:last-child {
+				border: 0;
+			}
+		}
+	}
+
+	.dataviews-bulk-actions__selection-count {
+		display: flex;
+		align-items: center;
+		margin: 0 $grid-unit-10 0 $grid-unit-10;
+	}
+}