@wordpress/dataviews 0.9.0 → 1.0.0

package/build-style/style-rtl.css

@@ -96,7 +96,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
-  --wp-bound-block-color: #9747ff;
+  --wp-bound-block-color: var(--wp-block-synced-color);
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -191,10 +191,6 @@
 .dataviews-view-table th.dataviews-view-table__checkbox-column {
   padding-left: 0;
 }
-.dataviews-view-table td .components-checkbox-control__input-container,
-.dataviews-view-table th .components-checkbox-control__input-container {
-  margin: 4px;
-}
 .dataviews-view-table tr {
   border-bottom: 1px solid #f0f0f0;
 }
@@ -236,6 +232,12 @@
 .dataviews-view-table tr:hover .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
   opacity: 1;
 }
+@media (hover: none) {
+  .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input,
+.dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
+    opacity: 1;
+  }
+}
 .dataviews-view-table tr.is-selected {
   background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
   color: #757575;
@@ -305,7 +307,7 @@
 .dataviews-view-table__primary-field {
   font-size: 13px;
   font-weight: 500;
-  color: #1e1e1e;
+  color: #757575;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: block;
@@ -315,12 +317,12 @@
 .dataviews-view-grid__primary-field a,
 .dataviews-view-table__primary-field a {
   text-decoration: none;
-  color: inherit;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   display: block;
   flex-grow: 0;
+  color: #1e1e1e;
 }
 .dataviews-view-list__primary-field a:hover,
 .dataviews-view-grid__primary-field a:hover,
@@ -338,13 +340,18 @@
 .dataviews-view-grid__primary-field button.components-button.is-link,
 .dataviews-view-table__primary-field button.components-button.is-link {
   text-decoration: none;
-  color: inherit;
   font-weight: inherit;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   display: block;
   width: 100%;
+  color: #1e1e1e;
+}
+.dataviews-view-list__primary-field button.components-button.is-link:hover,
+.dataviews-view-grid__primary-field button.components-button.is-link:hover,
+.dataviews-view-table__primary-field button.components-button.is-link:hover {
+  color: var(--wp-admin-theme-color);
 }
 
 .dataviews-view-grid {
@@ -401,8 +408,9 @@
   line-height: 16px;
 }
 .dataviews-view-grid .dataviews-view-grid__fields:not(:empty) {
-  padding: 12px;
+  padding: 12px 0;
   padding-top: 0;
+  margin: 0 12px;
 }
 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field {
   align-items: flex-start;
@@ -422,6 +430,21 @@
 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
   color: #757575;
 }
+.dataviews-view-grid .dataviews-view-grid__badge-fields:not(:empty) {
+  padding: 12px;
+  padding-top: 0;
+}
+.dataviews-view-grid .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value {
+  width: -moz-fit-content;
+  width: fit-content;
+  background: #f0f0f0;
+  padding: 0 8px;
+  min-height: 24px;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+}
 
 .dataviews-view-list {
   margin: 0;
@@ -448,6 +471,9 @@
 .dataviews-view-list li .dataviews-view-list__item-wrapper > * {
   width: 100%;
 }
+.dataviews-view-list li:not(.is-selected) .dataviews-view-list__primary-field {
+  color: #1e1e1e;
+}
 .dataviews-view-list li:not(.is-selected):hover, .dataviews-view-list li:not(.is-selected):focus-within {
   color: var(--wp-admin-theme-color);
 }
@@ -536,18 +562,6 @@
 .dataviews-view-list + .dataviews-pagination {
   justify-content: space-between;
 }
-.dataviews-view-list .dataviews-view-list__details-button {
-  align-self: center;
-  opacity: 0;
-}
-.dataviews-view-list li.is-selected .dataviews-view-list__details-button,
-.dataviews-view-list li:hover .dataviews-view-list__details-button,
-.dataviews-view-list li:focus-within .dataviews-view-list__details-button {
-  opacity: 1;
-}
-.dataviews-view-list li.is-selected .dataviews-view-list__details-button:focus {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) currentColor;
-}
 
 .dataviews-action-modal {
   z-index: 1000001;
@@ -562,16 +576,14 @@
   justify-content: center;
 }
 
-.dataviews-view-table-selection-checkbox label {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+.dataviews-view-table-selection-checkbox {
+  --checkbox-input-size: 24px;
+  line-height: 0;
+}
+@media (min-width: 600px) {
+  .dataviews-view-table-selection-checkbox {
+    --checkbox-input-size: 16px;
+  }
 }
 
 .dataviews-filters__custom-menu-radio-item-prefix {

package/build-style/style.css

@@ -96,7 +96,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
-  --wp-bound-block-color: #9747ff;
+  --wp-bound-block-color: var(--wp-block-synced-color);
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -191,10 +191,6 @@
 .dataviews-view-table th.dataviews-view-table__checkbox-column {
   padding-right: 0;
 }
-.dataviews-view-table td .components-checkbox-control__input-container,
-.dataviews-view-table th .components-checkbox-control__input-container {
-  margin: 4px;
-}
 .dataviews-view-table tr {
   border-bottom: 1px solid #f0f0f0;
 }
@@ -236,6 +232,12 @@
 .dataviews-view-table tr:hover .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
   opacity: 1;
 }
+@media (hover: none) {
+  .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input,
+.dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
+    opacity: 1;
+  }
+}
 .dataviews-view-table tr.is-selected {
   background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
   color: #757575;
@@ -305,7 +307,7 @@
 .dataviews-view-table__primary-field {
   font-size: 13px;
   font-weight: 500;
-  color: #1e1e1e;
+  color: #757575;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: block;
@@ -315,12 +317,12 @@
 .dataviews-view-grid__primary-field a,
 .dataviews-view-table__primary-field a {
   text-decoration: none;
-  color: inherit;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   display: block;
   flex-grow: 0;
+  color: #1e1e1e;
 }
 .dataviews-view-list__primary-field a:hover,
 .dataviews-view-grid__primary-field a:hover,
@@ -338,13 +340,18 @@
 .dataviews-view-grid__primary-field button.components-button.is-link,
 .dataviews-view-table__primary-field button.components-button.is-link {
   text-decoration: none;
-  color: inherit;
   font-weight: inherit;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   display: block;
   width: 100%;
+  color: #1e1e1e;
+}
+.dataviews-view-list__primary-field button.components-button.is-link:hover,
+.dataviews-view-grid__primary-field button.components-button.is-link:hover,
+.dataviews-view-table__primary-field button.components-button.is-link:hover {
+  color: var(--wp-admin-theme-color);
 }
 
 .dataviews-view-grid {
@@ -401,8 +408,9 @@
   line-height: 16px;
 }
 .dataviews-view-grid .dataviews-view-grid__fields:not(:empty) {
-  padding: 12px;
+  padding: 12px 0;
   padding-top: 0;
+  margin: 0 12px;
 }
 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field {
   align-items: flex-start;
@@ -422,6 +430,21 @@
 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
   color: #757575;
 }
+.dataviews-view-grid .dataviews-view-grid__badge-fields:not(:empty) {
+  padding: 12px;
+  padding-top: 0;
+}
+.dataviews-view-grid .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value {
+  width: -moz-fit-content;
+  width: fit-content;
+  background: #f0f0f0;
+  padding: 0 8px;
+  min-height: 24px;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+}
 
 .dataviews-view-list {
   margin: 0;
@@ -448,6 +471,9 @@
 .dataviews-view-list li .dataviews-view-list__item-wrapper > * {
   width: 100%;
 }
+.dataviews-view-list li:not(.is-selected) .dataviews-view-list__primary-field {
+  color: #1e1e1e;
+}
 .dataviews-view-list li:not(.is-selected):hover, .dataviews-view-list li:not(.is-selected):focus-within {
   color: var(--wp-admin-theme-color);
 }
@@ -536,18 +562,6 @@
 .dataviews-view-list + .dataviews-pagination {
   justify-content: space-between;
 }
-.dataviews-view-list .dataviews-view-list__details-button {
-  align-self: center;
-  opacity: 0;
-}
-.dataviews-view-list li.is-selected .dataviews-view-list__details-button,
-.dataviews-view-list li:hover .dataviews-view-list__details-button,
-.dataviews-view-list li:focus-within .dataviews-view-list__details-button {
-  opacity: 1;
-}
-.dataviews-view-list li.is-selected .dataviews-view-list__details-button:focus {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) currentColor;
-}
 
 .dataviews-action-modal {
   z-index: 1000001;
@@ -562,16 +576,14 @@
   justify-content: center;
 }
 
-.dataviews-view-table-selection-checkbox label {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+.dataviews-view-table-selection-checkbox {
+  --checkbox-input-size: 24px;
+  line-height: 0;
+}
+@media (min-width: 600px) {
+  .dataviews-view-table-selection-checkbox {
+    --checkbox-input-size: 16px;
+  }
 }
 
 .dataviews-filters__custom-menu-radio-item-prefix {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "0.9.0",
+	"version": "1.0.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,15 +29,15 @@
 	"dependencies": {
 		"@ariakit/react": "^0.3.12",
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.55.0",
-		"@wordpress/components": "^27.3.0",
-		"@wordpress/compose": "^6.32.0",
-		"@wordpress/element": "^5.32.0",
-		"@wordpress/i18n": "^4.55.0",
-		"@wordpress/icons": "^9.46.0",
-		"@wordpress/keycodes": "^3.55.0",
-		"@wordpress/primitives": "^3.53.0",
-		"@wordpress/private-apis": "^0.37.0",
+		"@wordpress/a11y": "^3.56.0",
+		"@wordpress/components": "^27.4.0",
+		"@wordpress/compose": "^6.33.0",
+		"@wordpress/element": "^5.33.0",
+		"@wordpress/i18n": "^4.56.0",
+		"@wordpress/icons": "^9.47.0",
+		"@wordpress/keycodes": "^3.56.0",
+		"@wordpress/primitives": "^3.54.0",
+		"@wordpress/private-apis": "^0.38.0",
 		"classnames": "^2.3.1",
 		"remove-accents": "^0.5.0"
 	},
@@ -47,5 +47,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ac2b13783c28f959770cf029a797a712f59e1958"
+	"gitHead": "280403b4c1cf6cc2c55a6c4d56f9ef91145e4191"
 }

package/src/dataviews.js

@@ -41,8 +41,6 @@ export default function DataViews( {
 	paginationInfo,
 	supportedLayouts,
 	onSelectionChange = defaultOnSelectionChange,
-	onDetailsChange = null,
-	deferredRendering = false,
 } ) {
 	const [ selection, setSelection ] = useState( [] );
 	const [ openedFilter, setOpenedFilter ] = useState( null );
@@ -136,9 +134,7 @@ export default function DataViews( {
 				getItemId={ getItemId }
 				isLoading={ isLoading }
 				onSelectionChange={ onSetSelection }
-				onDetailsChange={ onDetailsChange }
 				selection={ selection }
-				deferredRendering={ deferredRendering }
 				setOpenedFilter={ setOpenedFilter }
 			/>
 			<Pagination

package/src/filter-summary.js

@@ -18,7 +18,9 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { useRef, createInterpolateElement } from '@wordpress/element';
 import { closeSmall } from '@wordpress/icons';
-import { ENTER, SPACE } from '@wordpress/keycodes';
+
+const ENTER = 'Enter';
+const SPACE = ' ';
 
 /**
  * Internal dependencies
@@ -229,9 +231,7 @@ export default function FilterSummary( {
 							tabIndex={ 0 }
 							onClick={ onToggle }
 							onKeyDown={ ( event ) => {
-								if (
-									[ ENTER, SPACE ].includes( event.keyCode )
-								) {
+								if ( [ ENTER, SPACE ].includes( event.key ) ) {
 									onToggle();
 									event.preventDefault();
 								}

package/src/search-widget.js

@@ -39,6 +39,7 @@ function normalizeSearchInput( input = '' ) {
 	return removeAccents( input.trim().toLowerCase() );
 }
 
+const EMPTY_ARRAY = [];
 const getCurrentValue = ( filterDefinition, currentFilter ) => {
 	if ( filterDefinition.singleSelection ) {
 		return currentFilter?.value;
@@ -52,7 +53,7 @@ const getCurrentValue = ( filterDefinition, currentFilter ) => {
 		return [ currentFilter.value ];
 	}
 
-	return [];
+	return EMPTY_ARRAY;
 };
 
 const getNewValue = ( filterDefinition, currentFilter, value ) => {
@@ -73,7 +74,7 @@ function ListBox( { view, filter, onChangeView } ) {
 	const compositeStore = useCompositeStore( {
 		virtualFocus: true,
 		focusLoop: true,
-		// When we have no or just one operators, we can set the first item as active.
+		// When we have no or just one operator, we can set the first item as active.
 		// We do that by passing `undefined` to `defaultActiveId`. Otherwise, we set it to `null`,
 		// so the first item is not selected, since the focus is on the operators control.
 		defaultActiveId: filter.operators?.length === 1 ? undefined : null,
@@ -198,7 +199,7 @@ function ComboboxList( { view, filter, onChangeView } ) {
 	}, [ filter.elements, deferredSearchValue ] );
 	return (
 		<Ariakit.ComboboxProvider
-			value={ searchValue }
+			resetValueOnSelect={ false }
 			selectedValue={ currentValue }
 			setSelectedValue={ ( value ) => {
 				const newFilters = currentFilter

package/src/single-selection-checkbox.js

@@ -32,7 +32,7 @@ export default function SingleSelectionCheckbox( {
 		<CheckboxControl
 			className="dataviews-view-table-selection-checkbox"
 			__nextHasNoMarginBottom
-			label={ selectionLabel }
+			aria-label={ selectionLabel }
 			aria-disabled={ disabled }
 			checked={ isSelected }
 			onChange={ () => {

package/src/style.scss

@@ -92,10 +92,6 @@
 		&.dataviews-view-table__checkbox-column {
 			padding-right: 0;
 		}
-
-		.components-checkbox-control__input-container {
-			margin: $grid-unit-05;
-		}
 	}
 	tr {
 		border-bottom: 1px solid $gray-100;
@@ -150,6 +146,14 @@
 			}
 		}
 
+		@media (hover: none) {
+			// Show checkboxes and quick-actions on devices that do not support hover.
+			.components-checkbox-control__input.components-checkbox-control__input,
+			.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
+				opacity: 1;
+			}
+		}
+
 		&.is-selected {
 			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 			color: $gray-700;
@@ -237,7 +241,7 @@
 .dataviews-view-table__primary-field {
 	font-size: $default-font-size;
 	font-weight: 500;
-	color: $gray-900;
+	color: $gray-700;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	display: block;
@@ -245,12 +249,12 @@
 
 	a {
 		text-decoration: none;
-		color: inherit;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		overflow: hidden;
 		display: block;
 		flex-grow: 0;
+		color: $gray-900;
 
 		&:hover {
 			color: var(--wp-admin-theme-color);
@@ -260,13 +264,16 @@
 
 	button.components-button.is-link {
 		text-decoration: none;
-		color: inherit;
 		font-weight: inherit;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		overflow: hidden;
 		display: block;
 		width: 100%;
+		color: $gray-900;
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
 	}
 }
 
@@ -328,8 +335,9 @@
 		line-height: 16px;
 
 		&:not(:empty) {
-			padding: $grid-unit-15;
+			padding: $grid-unit-15 0;
 			padding-top: 0;
+			margin: 0 $grid-unit-15;
 		}
 
 		.dataviews-view-grid__field {
@@ -355,6 +363,24 @@
 			}
 		}
 	}
+
+	.dataviews-view-grid__badge-fields {
+		&:not(:empty) {
+			padding: $grid-unit-15;
+			padding-top: 0;
+		}
+
+		.dataviews-view-grid__field-value {
+			width: fit-content;
+			background: $gray-100;
+			padding: 0 $grid-unit-10;
+			min-height: $grid-unit-30;
+			border-radius: $radius-block-ui;
+			display: flex;
+			align-items: center;
+			font-size: 12px;
+		}
+	}
 }
 
 .dataviews-view-list {
@@ -386,6 +412,9 @@
 		}
 
 		&:not(.is-selected) {
+			.dataviews-view-list__primary-field {
+				color: $gray-900;
+			}
 			&:hover,
 			&:focus-within {
 				color: var(--wp-admin-theme-color);
@@ -492,26 +521,6 @@
 		justify-content: space-between;
 	}
 
-	.dataviews-view-list__details-button {
-		align-self: center;
-		opacity: 0;
-	}
-
-	li.is-selected,
-	li:hover,
-	li:focus-within {
-		.dataviews-view-list__details-button {
-			opacity: 1;
-		}
-	}
-
-	li.is-selected {
-		.dataviews-view-list__details-button {
-			&:focus {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) currentColor;
-			}
-		}
-	}
 }
 
 .dataviews-action-modal {
@@ -527,16 +536,14 @@
 	justify-content: center;
 }
 
-.dataviews-view-table-selection-checkbox label {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	border: 0;
+.dataviews-view-table-selection-checkbox {
+	// Experimental override for CheckboxControl size (fragile)
+	--checkbox-input-size: 24px;
+	@include break-small() {
+		--checkbox-input-size: 16px;
+	}
+
+	line-height: 0;
 }
 
 .dataviews-filters__custom-menu-radio-item-prefix {