@wordpress/dataviews 0.8.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;
@@ -272,6 +274,9 @@
 .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper > * {
   flex-grow: 1;
 }
+.dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__primary-field a {
+  flex-grow: 0;
+}
 .dataviews-view-table .dataviews-view-table-header-button {
   padding: 4px 8px;
   font-size: 11px;
@@ -302,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;
@@ -312,17 +317,17 @@
 .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;
-  width: 100%;
+  flex-grow: 0;
+  color: #1e1e1e;
 }
 .dataviews-view-list__primary-field a:hover,
 .dataviews-view-grid__primary-field a:hover,
 .dataviews-view-table__primary-field a:hover {
-  color: #1e1e1e;
+  color: var(--wp-admin-theme-color);
 }
 .dataviews-view-list__primary-field a:focus,
 .dataviews-view-grid__primary-field a:focus,
@@ -335,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 {
@@ -398,12 +408,43 @@
   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;
+}
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(.is-column) {
+  align-items: center;
 }
-.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(.is-column) .dataviews-view-grid__field-name {
+  width: 35%;
+}
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(.is-column) .dataviews-view-grid__field-value {
+  width: 65%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.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;
@@ -411,6 +452,7 @@
 }
 .dataviews-view-list li {
   margin: 0;
+  cursor: pointer;
 }
 .dataviews-view-list li .dataviews-view-list__item-wrapper {
   position: relative;
@@ -426,11 +468,18 @@
   background: #f0f0f0;
   height: 1px;
 }
-.dataviews-view-list li:not(.is-selected):hover {
+.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);
 }
 .dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__primary-field,
-.dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__fields {
+.dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__fields, .dataviews-view-list li:not(.is-selected):focus-within .dataviews-view-list__primary-field,
+.dataviews-view-list li:not(.is-selected):focus-within .dataviews-view-list__fields {
   color: var(--wp-admin-theme-color);
 }
 .dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper,
@@ -453,9 +502,9 @@
 .dataviews-view-list .dataviews-view-list__item {
   padding: 12px 24px 12px 0;
   width: 100%;
-  cursor: pointer;
+  scroll-margin: 8px 0;
 }
-.dataviews-view-list .dataviews-view-list__item:focus::before {
+.dataviews-view-list .dataviews-view-list__item:focus-visible::before {
   position: absolute;
   content: "";
   top: -1px;
@@ -468,6 +517,7 @@
 }
 .dataviews-view-list .dataviews-view-list__item .dataviews-view-list__primary-field {
   min-height: 20px;
+  overflow: hidden;
 }
 .dataviews-view-list .dataviews-view-list__media-wrapper {
   width: 40px;
@@ -506,24 +556,12 @@
   font-size: 12px;
   line-height: 16px;
 }
-.dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:empty {
+.dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:has(.dataviews-view-list__field-value:empty) {
   display: none;
 }
 .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;
@@ -538,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;
@@ -272,6 +274,9 @@
 .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper > * {
   flex-grow: 1;
 }
+.dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__primary-field a {
+  flex-grow: 0;
+}
 .dataviews-view-table .dataviews-view-table-header-button {
   padding: 4px 8px;
   font-size: 11px;
@@ -302,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;
@@ -312,17 +317,17 @@
 .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;
-  width: 100%;
+  flex-grow: 0;
+  color: #1e1e1e;
 }
 .dataviews-view-list__primary-field a:hover,
 .dataviews-view-grid__primary-field a:hover,
 .dataviews-view-table__primary-field a:hover {
-  color: #1e1e1e;
+  color: var(--wp-admin-theme-color);
 }
 .dataviews-view-list__primary-field a:focus,
 .dataviews-view-grid__primary-field a:focus,
@@ -335,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 {
@@ -398,12 +408,43 @@
   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;
+}
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(.is-column) {
+  align-items: center;
 }
-.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(.is-column) .dataviews-view-grid__field-name {
+  width: 35%;
+}
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(.is-column) .dataviews-view-grid__field-value {
+  width: 65%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.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;
@@ -411,6 +452,7 @@
 }
 .dataviews-view-list li {
   margin: 0;
+  cursor: pointer;
 }
 .dataviews-view-list li .dataviews-view-list__item-wrapper {
   position: relative;
@@ -426,11 +468,18 @@
   background: #f0f0f0;
   height: 1px;
 }
-.dataviews-view-list li:not(.is-selected):hover {
+.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);
 }
 .dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__primary-field,
-.dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__fields {
+.dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__fields, .dataviews-view-list li:not(.is-selected):focus-within .dataviews-view-list__primary-field,
+.dataviews-view-list li:not(.is-selected):focus-within .dataviews-view-list__fields {
   color: var(--wp-admin-theme-color);
 }
 .dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper,
@@ -453,9 +502,9 @@
 .dataviews-view-list .dataviews-view-list__item {
   padding: 12px 0 12px 24px;
   width: 100%;
-  cursor: pointer;
+  scroll-margin: 8px 0;
 }
-.dataviews-view-list .dataviews-view-list__item:focus::before {
+.dataviews-view-list .dataviews-view-list__item:focus-visible::before {
   position: absolute;
   content: "";
   top: -1px;
@@ -468,6 +517,7 @@
 }
 .dataviews-view-list .dataviews-view-list__item .dataviews-view-list__primary-field {
   min-height: 20px;
+  overflow: hidden;
 }
 .dataviews-view-list .dataviews-view-list__media-wrapper {
   width: 40px;
@@ -506,24 +556,12 @@
   font-size: 12px;
   line-height: 16px;
 }
-.dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:empty {
+.dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:has(.dataviews-view-list__field-value:empty) {
   display: none;
 }
 .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;
@@ -538,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.8.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.54.0",
-		"@wordpress/components": "^27.2.0",
-		"@wordpress/compose": "^6.31.0",
-		"@wordpress/element": "^5.31.0",
-		"@wordpress/i18n": "^4.54.0",
-		"@wordpress/icons": "^9.45.0",
-		"@wordpress/keycodes": "^3.54.0",
-		"@wordpress/primitives": "^3.52.0",
-		"@wordpress/private-apis": "^0.36.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": "ffc07735d0abfb3f69e91d48f25b7fe8d1ef92d2"
+	"gitHead": "280403b4c1cf6cc2c55a6c4d56f9ef91145e4191"
 }

package/src/constants.js

@@ -16,9 +16,6 @@ import ViewTable from './view-table';
 import ViewGrid from './view-grid';
 import ViewList from './view-list';
 
-// Field types.
-export const ENUMERATION_TYPE = 'enumeration';
-
 // Filter operators.
 export const OPERATOR_IS = 'is';
 export const OPERATOR_IS_NOT = 'isNot';

package/src/dataviews.js

@@ -13,6 +13,7 @@ import Filters from './filters';
 import Search from './search';
 import { VIEW_LAYOUTS, LAYOUT_TABLE, LAYOUT_GRID } from './constants';
 import BulkActions from './bulk-actions';
+import { normalizeFields } from './normalize-fields';
 
 const defaultGetItemId = ( item ) => item.id;
 const defaultOnSelectionChange = () => {};
@@ -40,8 +41,6 @@ export default function DataViews( {
 	paginationInfo,
 	supportedLayouts,
 	onSelectionChange = defaultOnSelectionChange,
-	onDetailsChange = null,
-	deferredRendering = false,
 } ) {
 	const [ selection, setSelection ] = useState( [] );
 	const [ openedFilter, setOpenedFilter ] = useState( null );
@@ -76,18 +75,7 @@ export default function DataViews( {
 	const ViewComponent = VIEW_LAYOUTS.find(
 		( v ) => v.type === view.type
 	).component;
-	const _fields = useMemo( () => {
-		return fields.map( ( field ) => {
-			const getValue =
-				field.getValue || ( ( { item } ) => item[ field.id ] );
-
-			return {
-				...field,
-				getValue,
-				render: field.render || getValue,
-			};
-		} );
-	}, [ fields ] );
+	const _fields = useMemo( () => normalizeFields( fields ), [ fields ] );
 
 	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
 		actions,
@@ -146,9 +134,7 @@ export default function DataViews( {
 				getItemId={ getItemId }
 				isLoading={ isLoading }
 				onSelectionChange={ onSetSelection }
-				onDetailsChange={ onDetailsChange }
 				selection={ selection }
-				deferredRendering={ deferredRendering }
 				setOpenedFilter={ setOpenedFilter }
 			/>
 			<Pagination