@wordpress/dataviews 4.2.0 → 4.3.0

package/src/components/dataviews-view-config/index.tsx

@@ -21,10 +21,11 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalText as Text,
 	privateApis as componentsPrivateApis,
+	BaseControl,
 } from '@wordpress/components';
-import { __, _x } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { memo, useContext, useState, useMemo } from '@wordpress/element';
-import { cog, seen, unseen } from '@wordpress/icons';
+import { chevronDown, chevronUp, cog, seen, unseen } from '@wordpress/icons';
 import warning from '@wordpress/warning';
 
 /**
@@ -33,20 +34,22 @@ import warning from '@wordpress/warning';
 import {
 	SORTING_DIRECTIONS,
 	LAYOUT_GRID,
+	LAYOUT_TABLE,
 	sortIcons,
 	sortLabels,
 } from '../../constants';
-import { VIEW_LAYOUTS, getMandatoryFields } from '../../dataviews-layouts';
-import type { SupportedLayouts } from '../../types';
+import {
+	VIEW_LAYOUTS,
+	getNotHidableFieldIds,
+	getVisibleFieldIds,
+	getHiddenFieldIds,
+} from '../../dataviews-layouts';
+import type { SupportedLayouts, View, Field } from '../../types';
 import DataViewsContext from '../dataviews-context';
 import { unlock } from '../../lock-unlock';
 import DensityPicker from '../../dataviews-layouts/grid/density-picker';
 
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-} = unlock( componentsPrivateApis );
+const { DropdownMenuV2 } = unlock( componentsPrivateApis );
 
 interface ViewTypeMenuProps {
 	defaultLayouts?: SupportedLayouts;
@@ -62,7 +65,7 @@ function ViewTypeMenu( {
 	}
 	const activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );
 	return (
-		<DropdownMenu
+		<DropdownMenuV2
 			trigger={
 				<Button
 					size="compact"
@@ -77,7 +80,7 @@ function ViewTypeMenu( {
 					return null;
 				}
 				return (
-					<DropdownMenuRadioItem
+					<DropdownMenuV2.RadioItem
 						key={ layout }
 						value={ layout }
 						name="view-actions-available-view"
@@ -97,13 +100,13 @@ function ViewTypeMenu( {
 							warning( 'Invalid dataview' );
 						} }
 					>
-						<DropdownMenuItemLabel>
+						<DropdownMenuV2.ItemLabel>
 							{ config.label }
-						</DropdownMenuItemLabel>
-					</DropdownMenuRadioItem>
+						</DropdownMenuV2.ItemLabel>
+					</DropdownMenuV2.RadioItem>
 				);
 			} ) }
-		</DropdownMenu>
+		</DropdownMenuV2>
 	);
 }
 
@@ -143,6 +146,14 @@ function SortFieldControl() {
 
 function SortDirectionControl() {
 	const { view, fields, onChangeView } = useContext( DataViewsContext );
+
+	const sortableFields = fields.filter(
+		( field ) => field.enableSorting !== false
+	);
+	if ( sortableFields.length === 0 ) {
+		return null;
+	}
+
 	let value = view.sort?.direction;
 	if ( ! value && view.sort?.field ) {
 		value = 'desc';
@@ -226,50 +237,238 @@ function ItemsPerPageControl() {
 	);
 }
 
-function FieldControl() {
-	const { view, fields, onChangeView } = useContext( DataViewsContext );
-	const mandatoryFields = getMandatoryFields( view );
-	const hidableFields = fields.filter(
-		( field ) =>
-			field.enableHiding !== false &&
-			! mandatoryFields.includes( field.id )
-	);
-	const viewFields = view.fields || fields.map( ( field ) => field.id );
-	if ( ! hidableFields?.length ) {
-		return null;
-	}
+interface FieldItemProps {
+	id: any;
+	label: string;
+	index: number;
+	isVisible: boolean;
+	isHidable: boolean;
+}
+
+function FieldItem( {
+	field: { id, label, index, isVisible, isHidable },
+	fields,
+	view,
+	onChangeView,
+}: {
+	field: FieldItemProps;
+	fields: Field< any >[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+} ) {
+	const visibleFieldIds = getVisibleFieldIds( view, fields );
+
 	return (
-		<ItemGroup isBordered isSeparated>
-			{ hidableFields?.map( ( field ) => {
-				const isVisible = viewFields.includes( field.id );
-				return (
-					<Item key={ field.id }>
-						<HStack expanded>
-							<span>{ field.label }</span>
+		<Item key={ id }>
+			<HStack
+				expanded
+				className={ `dataviews-field-control__field dataviews-field-control__field-${ id }` }
+			>
+				<span>{ label }</span>
+				<HStack
+					justify="flex-end"
+					expanded={ false }
+					className="dataviews-field-control__actions"
+				>
+					{ view.type === LAYOUT_TABLE && isVisible && (
+						<>
 							<Button
+								disabled={ index < 1 }
+								accessibleWhenDisabled
 								size="compact"
-								onClick={ () =>
+								onClick={ () => {
 									onChangeView( {
 										...view,
-										fields: isVisible
-											? viewFields.filter(
-													( id ) => id !== field.id
-											  )
-											: [ ...viewFields, field.id ],
-									} )
-								}
-								icon={ isVisible ? seen : unseen }
-								label={
-									isVisible
-										? __( 'Hide field' )
-										: __( 'Show field' )
-								}
+										fields: [
+											...( visibleFieldIds.slice(
+												0,
+												index - 1
+											) ?? [] ),
+											id,
+											visibleFieldIds[ index - 1 ],
+											...visibleFieldIds.slice(
+												index + 1
+											),
+										],
+									} );
+								} }
+								icon={ chevronUp }
+								label={ sprintf(
+									/* translators: %s: field label */
+									__( 'Move %s up' ),
+									label
+								) }
 							/>
-						</HStack>
-					</Item>
-				);
-			} ) }
-		</ItemGroup>
+							<Button
+								disabled={ index >= visibleFieldIds.length - 1 }
+								accessibleWhenDisabled
+								size="compact"
+								onClick={ () => {
+									onChangeView( {
+										...view,
+										fields: [
+											...( visibleFieldIds.slice(
+												0,
+												index
+											) ?? [] ),
+											visibleFieldIds[ index + 1 ],
+											id,
+											...visibleFieldIds.slice(
+												index + 2
+											),
+										],
+									} );
+								} }
+								icon={ chevronDown }
+								label={ sprintf(
+									/* translators: %s: field label */
+									__( 'Move %s down' ),
+									label
+								) }
+							/>{ ' ' }
+						</>
+					) }
+					<Button
+						className="dataviews-field-control__field-visibility-button"
+						disabled={ ! isHidable }
+						accessibleWhenDisabled
+						size="compact"
+						onClick={ () => {
+							onChangeView( {
+								...view,
+								fields: isVisible
+									? visibleFieldIds.filter(
+											( fieldId ) => fieldId !== id
+									  )
+									: [ ...visibleFieldIds, id ],
+							} );
+							// Focus the visibility button to avoid focus loss.
+							// Our code is safe against the component being unmounted, so we don't need to worry about cleaning the timeout.
+							// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
+							setTimeout( () => {
+								const element = document.querySelector(
+									`.dataviews-field-control__field-${ id } .dataviews-field-control__field-visibility-button`
+								);
+								if ( element instanceof HTMLElement ) {
+									element.focus();
+								}
+							}, 50 );
+						} }
+						icon={ isVisible ? seen : unseen }
+						label={
+							isVisible
+								? sprintf(
+										/* translators: %s: field label */
+										__( 'Hide %s' ),
+										label
+								  )
+								: sprintf(
+										/* translators: %s: field label */
+										__( 'Show %s' ),
+										label
+								  )
+						}
+					/>
+				</HStack>
+			</HStack>
+		</Item>
+	);
+}
+
+function FieldControl() {
+	const { view, fields, onChangeView } = useContext( DataViewsContext );
+
+	const visibleFieldIds = useMemo(
+		() => getVisibleFieldIds( view, fields ),
+		[ view, fields ]
+	);
+	const hiddenFieldIds = useMemo(
+		() => getHiddenFieldIds( view, fields ),
+		[ view, fields ]
+	);
+	const notHidableFieldIds = useMemo(
+		() => getNotHidableFieldIds( view ),
+		[ view ]
+	);
+
+	const visibleFields = fields
+		.filter( ( { id } ) => visibleFieldIds.includes( id ) )
+		.map( ( { id, label, enableHiding } ) => {
+			return {
+				id,
+				label,
+				index: visibleFieldIds.indexOf( id ),
+				isVisible: true,
+				isHidable: notHidableFieldIds.includes( id )
+					? false
+					: enableHiding,
+			};
+		} );
+	if ( view.type === LAYOUT_TABLE && view.layout?.combinedFields ) {
+		view.layout.combinedFields.forEach( ( { id, label } ) => {
+			visibleFields.push( {
+				id,
+				label,
+				index: visibleFieldIds.indexOf( id ),
+				isVisible: true,
+				isHidable: notHidableFieldIds.includes( id ),
+			} );
+		} );
+	}
+	visibleFields.sort( ( a, b ) => a.index - b.index );
+
+	const hiddenFields = fields
+		.filter( ( { id } ) => hiddenFieldIds.includes( id ) )
+		.map( ( { id, label, enableHiding }, index ) => {
+			return {
+				id,
+				label,
+				index,
+				isVisible: false,
+				isHidable: enableHiding,
+			};
+		} );
+
+	if ( ! visibleFields?.length && ! hiddenFields?.length ) {
+		return null;
+	}
+
+	return (
+		<VStack spacing={ 6 } className="dataviews-field-control">
+			{ !! visibleFields?.length && (
+				<ItemGroup isBordered isSeparated>
+					{ visibleFields.map( ( field ) => (
+						<FieldItem
+							key={ field.id }
+							field={ field }
+							fields={ fields }
+							view={ view }
+							onChangeView={ onChangeView }
+						/>
+					) ) }
+				</ItemGroup>
+			) }
+			{ !! hiddenFields?.length && (
+				<>
+					<VStack spacing={ 4 }>
+						<BaseControl.VisualLabel style={ { margin: 0 } }>
+							{ __( 'Hidden' ) }
+						</BaseControl.VisualLabel>
+						<ItemGroup isBordered isSeparated>
+							{ hiddenFields.map( ( field ) => (
+								<FieldItem
+									key={ field.id }
+									field={ field }
+									fields={ fields }
+									view={ view }
+									onChangeView={ onChangeView }
+								/>
+							) ) }
+						</ItemGroup>
+					</VStack>
+				</>
+			) }
+		</VStack>
 	);
 }
 

package/src/components/dataviews-view-config/style.scss

@@ -3,6 +3,8 @@
 	/* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
 	container-type: inline-size;
 	padding: $grid-unit-20;
+	font-size: $default-font-size;
+	line-height: $default-line-height;
 }
 .dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
 	text-transform: uppercase;
@@ -29,6 +31,10 @@
 	}
 }
 
+.dataviews-settings-section:has(.dataviews-settings-section__content:empty) {
+	display: none;
+}
+
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 500px) {
 	.dataviews-settings-section.dataviews-settings-section {
@@ -42,3 +48,22 @@
 		}
 	}
 }
+.dataviews-field-control__field {
+	height: $grid-unit-40;
+}
+
+.dataviews-field-control__actions {
+	position: absolute;
+	top: -9999em;
+}
+.dataviews-field-control__actions.dataviews-field-control__actions {
+	gap: $grid-unit-05;
+}
+
+.dataviews-field-control__field:hover,
+.dataviews-field-control__field:focus-within {
+	.dataviews-field-control__actions {
+		position: unset;
+		top: unset;
+	}
+}

package/src/dataforms-layouts/panel/index.tsx

@@ -44,6 +44,8 @@ function DropdownHeader( {
 				<Spacer />
 				{ onClose && (
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						className="dataforms-layouts-panel__dropdown-header-action"
 						label={ __( 'Close' ) }
 						icon={ closeSmall }

package/src/dataviews-layouts/grid/style.scss

@@ -118,7 +118,7 @@
 			background: $gray-100;
 			padding: 0 $grid-unit-10;
 			min-height: $grid-unit-30;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
 			display: flex;
 			align-items: center;
 			font-size: 12px;

package/src/dataviews-layouts/index.ts

@@ -16,7 +16,7 @@ import ViewTable from './table';
 import ViewGrid from './grid';
 import ViewList from './list';
 import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants';
-import type { View } from '../types';
+import type { View, Field } from '../types';
 
 export const VIEW_LAYOUTS = [
 	{
@@ -39,7 +39,7 @@ export const VIEW_LAYOUTS = [
 	},
 ];
 
-export function getMandatoryFields( view: View ): string[] {
+export function getNotHidableFieldIds( view: View ): string[] {
 	if ( view.type === 'table' ) {
 		return [ view.layout?.primaryField ]
 			.concat(
@@ -64,3 +64,64 @@ export function getMandatoryFields( view: View ): string[] {
 
 	return [];
 }
+
+function getCombinedFieldIds( view: View ): string[] {
+	const combinedFields: string[] = [];
+	if ( view.type === LAYOUT_TABLE && view.layout?.combinedFields ) {
+		view.layout.combinedFields.forEach( ( combination ) => {
+			combinedFields.push( ...combination.children );
+		} );
+	}
+	return combinedFields;
+}
+
+export function getVisibleFieldIds(
+	view: View,
+	fields: Field< any >[]
+): string[] {
+	const fieldsToExclude = getCombinedFieldIds( view );
+
+	if ( view.fields ) {
+		return view.fields.filter( ( id ) => ! fieldsToExclude.includes( id ) );
+	}
+
+	const visibleFields = [];
+	if ( view.type === LAYOUT_TABLE && view.layout?.combinedFields ) {
+		visibleFields.push(
+			...view.layout.combinedFields.map( ( { id } ) => id )
+		);
+	}
+	visibleFields.push(
+		...fields
+			.filter( ( { id } ) => ! fieldsToExclude.includes( id ) )
+			.map( ( { id } ) => id )
+	);
+
+	return visibleFields;
+}
+
+export function getHiddenFieldIds(
+	view: View,
+	fields: Field< any >[]
+): string[] {
+	const fieldsToExclude = [
+		...getCombinedFieldIds( view ),
+		...getVisibleFieldIds( view, fields ),
+	];
+
+	// The media field does not need to be in the view.fields to be displayed.
+	if ( view.type === LAYOUT_GRID && view.layout?.mediaField ) {
+		fieldsToExclude.push( view.layout?.mediaField );
+	}
+
+	if ( view.type === LAYOUT_LIST && view.layout?.mediaField ) {
+		fieldsToExclude.push( view.layout?.mediaField );
+	}
+
+	return fields
+		.filter(
+			( { id, enableHiding } ) =>
+				! fieldsToExclude.includes( id ) && enableHiding
+		)
+		.map( ( { id } ) => id );
+}