diff --git a/packages/edit-site/src/components/dataviews/list-view.js b/packages/edit-site/src/components/dataviews/list-view.js
index 55a871d3df8c9..df417d75f3291 100644
--- a/packages/edit-site/src/components/dataviews/list-view.js
+++ b/packages/edit-site/src/components/dataviews/list-view.js
@@ -8,12 +8,29 @@ import { flexRender } from '@tanstack/react-table';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { chevronDown, chevronUp } from '@wordpress/icons';
-import { Button } from '@wordpress/components';
+import { chevronDown, chevronUp, unseen } from '@wordpress/icons';
+import {
+ Button,
+ Icon,
+ privateApis as componentsPrivateApis,
+} from '@wordpress/components';
import { forwardRef } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { FieldSortingItems } from './view-actions';
+
+const {
+ DropdownMenuV2,
+ DropdownMenuGroupV2,
+ DropdownMenuItemV2,
+ DropdownMenuSeparatorV2,
+} = unlock( componentsPrivateApis );
+
const sortIcons = { asc: chevronUp, desc: chevronDown };
-function Header( { header } ) {
+function HeaderMenu( { dataView, header } ) {
if ( header.isPlaceholder ) {
return null;
}
@@ -21,21 +38,46 @@ function Header( { header } ) {
header.column.columnDef.header,
header.getContext()
);
- if ( ! header.column.getCanSort() ) {
+ const isSortable = !! header.column.getCanSort();
+ const isHidable = !! header.column.getCanHide();
+ if ( ! isSortable && ! isHidable ) {
return text;
}
- const sortDirection = header.column.getIsSorted();
return (
-
+
+ }
+ >
+ { isSortable && (
+
+
+
+ ) }
+ { isSortable && isHidable && }
+ { isHidable && (
+ }
+ onSelect={ ( event ) => {
+ event.preventDefault();
+ header.column.getToggleVisibilityHandler()( event );
+ } }
+ >
+ { __( 'Hide' ) }
+
+ ) }
+
);
}
-
function ListView( { dataView, className, isLoading = false }, ref ) {
const { rows } = dataView.getRowModel();
const hasRows = !! rows?.length;
@@ -66,7 +108,10 @@ function ListView( { dataView, className, isLoading = false }, ref ) {
.maxWidth || undefined,
} }
>
-
+
) ) }
diff --git a/packages/edit-site/src/components/dataviews/view-actions.js b/packages/edit-site/src/components/dataviews/view-actions.js
index ab9f3be88c200..1f90ce1402a14 100644
--- a/packages/edit-site/src/components/dataviews/view-actions.js
+++ b/packages/edit-site/src/components/dataviews/view-actions.js
@@ -144,6 +144,31 @@ const sortingItemsInfo = {
asc: { icon: arrowUp, label: __( 'Sort ascending' ) },
desc: { icon: arrowDown, label: __( 'Sort descending' ) },
};
+export function FieldSortingItems( { field, dataView } ) {
+ const sortedDirection = field.getIsSorted();
+ return Object.entries( sortingItemsInfo ).map( ( [ direction, info ] ) => (
+ }
+ suffix={ sortedDirection === direction && }
+ onSelect={ ( event ) => {
+ event.preventDefault();
+ if ( sortedDirection === direction ) {
+ dataView.resetSorting();
+ } else {
+ dataView.setSorting( [
+ {
+ id: field.id,
+ desc: direction === 'desc',
+ },
+ ] );
+ }
+ } }
+ >
+ { info.label }
+
+ ) );
+}
function SortMenu( { dataView } ) {
const sortableFields = dataView
.getAllColumns()
@@ -170,7 +195,6 @@ function SortMenu( { dataView } ) {
}
>
{ sortableFields?.map( ( field ) => {
- const sortedDirection = field.getIsSorted();
return (
- { Object.entries( sortingItemsInfo ).map(
- ( [ direction, info ] ) => {
- return (
- }
- suffix={
- sortedDirection === direction && (
-
- )
- }
- onSelect={ ( event ) => {
- event.preventDefault();
- if (
- sortedDirection === direction
- ) {
- dataView.resetSorting();
- } else {
- dataView.setSorting( [
- {
- id: field.id,
- desc:
- direction ===
- 'desc',
- },
- ] );
- }
- } }
- >
- { info.label }
-
- );
- }
- ) }
+
);
} ) }