From 7c0638b5a5ad278da458ff5d3fa4cd8a753e301d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Tue, 3 Sep 2024 16:18:38 +0200
Subject: [PATCH] DataViews: fix field reordering and visibility logic (#64999)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
---
 .../dataviews-view-config/index.tsx           | 251 ++++++++----------
 .../dataviews/src/dataviews-layouts/index.ts  |  65 ++++-
 .../table/column-header-menu.tsx              | 105 ++++----
 .../src/dataviews-layouts/table/index.tsx     |   5 +-
 packages/dataviews/src/normalize-fields.ts    |   2 +
 packages/dataviews/src/types.ts               |   2 +
 6 files changed, 238 insertions(+), 192 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 331d0d62dca00..c01c72d2ebc69 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -38,8 +38,13 @@ import {
 	sortIcons,
 	sortLabels,
 } from '../../constants';
-import { VIEW_LAYOUTS, getMandatoryFields } from '../../dataviews-layouts';
-import type { NormalizedField, SupportedLayouts, View } 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';
@@ -232,50 +237,34 @@ function ItemsPerPageControl() {
 	);
 }
 
+interface FieldItemProps {
+	id: any;
+	label: string;
+	index: number;
+	isVisible: boolean;
+	isHidable: boolean;
+}
+
 function FieldItem( {
+	field: { id, label, index, isVisible, isHidable },
 	fields,
-	fieldId,
-	mandatoryFields,
-	viewFields,
 	view,
 	onChangeView,
 }: {
-	fields: NormalizedField< any >[];
-	fieldId: string;
-	mandatoryFields: string | any[];
-	viewFields: string[];
+	field: FieldItemProps;
+	fields: Field< any >[];
 	view: View;
 	onChangeView: ( view: View ) => void;
 } ) {
-	let fieldLabel;
-	let fieldIsHidable;
-	const fieldObject = fields.find(
-		( f ) => f.id === fieldId
-	) as NormalizedField< any >;
-	if ( fieldObject ) {
-		fieldLabel = fieldObject.label;
-		fieldIsHidable =
-			fieldObject.enableHiding !== false &&
-			! mandatoryFields.includes( fieldId );
-	} else if ( view.type === LAYOUT_TABLE ) {
-		const combinedFieldObject = view.layout?.combinedFields?.find(
-			( f ) => f.id === fieldId
-		);
-		if ( combinedFieldObject ) {
-			fieldLabel = combinedFieldObject.label;
-			fieldIsHidable = ! mandatoryFields.includes( fieldId );
-		}
-	}
+	const visibleFieldIds = getVisibleFieldIds( view, fields );
 
-	const index = view.fields?.indexOf( fieldId ) as number;
-	const isVisible = viewFields.includes( fieldId );
 	return (
-		<Item key={ fieldId }>
+		<Item key={ id }>
 			<HStack
 				expanded
-				className={ `dataviews-field-control__field dataviews-field-control__field-${ fieldId }` }
+				className={ `dataviews-field-control__field dataviews-field-control__field-${ id }` }
 			>
-				<span>{ fieldLabel }</span>
+				<span>{ label }</span>
 				<HStack
 					justify="flex-end"
 					expanded={ false }
@@ -284,23 +273,22 @@ function FieldItem( {
 					{ view.type === LAYOUT_TABLE && isVisible && (
 						<>
 							<Button
-								disabled={ ! isVisible || index < 1 }
+								disabled={ index < 1 }
 								accessibleWhenDisabled
 								size="compact"
 								onClick={ () => {
-									if ( ! view.fields || index < 1 ) {
-										return;
-									}
 									onChangeView( {
 										...view,
 										fields: [
-											...( view.fields.slice(
+											...( visibleFieldIds.slice(
 												0,
 												index - 1
 											) ?? [] ),
-											fieldId,
-											view.fields[ index - 1 ],
-											...view.fields.slice( index + 1 ),
+											id,
+											visibleFieldIds[ index - 1 ],
+											...visibleFieldIds.slice(
+												index + 1
+											),
 										],
 									} );
 								} }
@@ -308,34 +296,26 @@ function FieldItem( {
 								label={ sprintf(
 									/* translators: %s: field label */
 									__( 'Move %s up' ),
-									fieldLabel
+									label
 								) }
 							/>
 							<Button
-								disabled={
-									! isVisible ||
-									! view.fields ||
-									index >= view.fields.length - 1
-								}
+								disabled={ index >= visibleFieldIds.length - 1 }
 								accessibleWhenDisabled
 								size="compact"
 								onClick={ () => {
-									if (
-										! view.fields ||
-										index >= view.fields.length - 1
-									) {
-										return;
-									}
 									onChangeView( {
 										...view,
 										fields: [
-											...( view.fields.slice(
+											...( visibleFieldIds.slice(
 												0,
 												index
 											) ?? [] ),
-											view.fields[ index + 1 ],
-											fieldId,
-											...view.fields.slice( index + 2 ),
+											visibleFieldIds[ index + 1 ],
+											id,
+											...visibleFieldIds.slice(
+												index + 2
+											),
 										],
 									} );
 								} }
@@ -343,31 +323,31 @@ function FieldItem( {
 								label={ sprintf(
 									/* translators: %s: field label */
 									__( 'Move %s down' ),
-									fieldLabel
+									label
 								) }
 							/>{ ' ' }
 						</>
 					) }
 					<Button
 						className="dataviews-field-control__field-visibility-button"
-						disabled={ ! fieldIsHidable }
+						disabled={ ! isHidable }
 						accessibleWhenDisabled
 						size="compact"
 						onClick={ () => {
 							onChangeView( {
 								...view,
 								fields: isVisible
-									? viewFields.filter(
-											( id ) => id !== fieldId
+									? visibleFieldIds.filter(
+											( fieldId ) => fieldId !== id
 									  )
-									: [ ...viewFields, fieldId ],
+									: [ ...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-${ fieldId } .dataviews-field-control__field-visibility-button`
+									`.dataviews-field-control__field-${ id } .dataviews-field-control__field-visibility-button`
 								);
 								if ( element instanceof HTMLElement ) {
 									element.focus();
@@ -380,12 +360,12 @@ function FieldItem( {
 								? sprintf(
 										/* translators: %s: field label */
 										__( 'Hide %s' ),
-										fieldLabel
+										label
 								  )
 								: sprintf(
 										/* translators: %s: field label */
 										__( 'Show %s' ),
-										fieldLabel
+										label
 								  )
 						}
 					/>
@@ -395,83 +375,77 @@ function FieldItem( {
 	);
 }
 
-function FieldList( {
-	fields,
-	fieldIds,
-	mandatoryFields,
-	viewFields,
-	view,
-	onChangeView,
-}: Omit< Parameters< typeof FieldItem >[ 0 ], 'fieldId' > & {
-	fieldIds: string[];
-} ) {
-	return fieldIds.map( ( fieldId ) => (
-		<FieldItem
-			key={ fieldId }
-			fields={ fields }
-			fieldId={ fieldId }
-			mandatoryFields={ mandatoryFields }
-			viewFields={ viewFields }
-			view={ view }
-			onChangeView={ onChangeView }
-		/>
-	) );
-}
-
 function FieldControl() {
 	const { view, fields, onChangeView } = useContext( DataViewsContext );
-	const mandatoryFields = useMemo(
-		() => getMandatoryFields( view ),
+
+	const visibleFieldIds = useMemo(
+		() => getVisibleFieldIds( view, fields ),
+		[ view, fields ]
+	);
+	const hiddenFieldIds = useMemo(
+		() => getHiddenFieldIds( view, fields ),
+		[ view, fields ]
+	);
+	const notHidableFieldIds = useMemo(
+		() => getNotHidableFieldIds( view ),
 		[ view ]
 	);
-	const viewFields = view.fields || fields.map( ( field ) => field.id );
-	const visibleFields = view.fields;
-	const hiddenFields = useMemo( () => {
-		const nonViewFieldsList = fields
-			.filter(
-				( field ) =>
-					! viewFields.includes( field.id ) &&
-					! mandatoryFields?.includes( field.id )
-			)
-			.map( ( field ) => field.id );
 
-		if ( view.type !== LAYOUT_TABLE ) {
-			return nonViewFieldsList;
-		}
-		const nonViewFieldsAndNonCombinedList = nonViewFieldsList.filter(
-			( fieldId ) => {
-				return ! view.layout?.combinedFields?.some( ( combinedField ) =>
-					combinedField.children.includes( fieldId )
-				);
-			}
-		);
-		const nonViewFieldsCombinedFieldsList =
-			view.layout?.combinedFields
-				?.filter(
-					( combinedField ) =>
-						! viewFields.includes( combinedField.id )
-				)
-				.map( ( combinedField ) => combinedField.id ) || [];
-		return [
-			...nonViewFieldsAndNonCombinedList,
-			...nonViewFieldsCombinedFieldsList,
-		];
-	}, [ view, mandatoryFields, fields, viewFields ] );
+	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>
-					<FieldList
-						fields={ fields }
-						fieldIds={ visibleFields }
-						mandatoryFields={ mandatoryFields }
-						viewFields={ viewFields }
-						view={ view }
-						onChangeView={ onChangeView }
-					/>
+					{ visibleFields.map( ( field ) => (
+						<FieldItem
+							key={ field.id }
+							field={ field }
+							fields={ fields }
+							view={ view }
+							onChangeView={ onChangeView }
+						/>
+					) ) }
 				</ItemGroup>
 			) }
 			{ !! hiddenFields?.length && (
@@ -481,14 +455,15 @@ function FieldControl() {
 							{ __( 'Hidden' ) }
 						</BaseControl.VisualLabel>
 						<ItemGroup isBordered isSeparated>
-							<FieldList
-								fields={ fields }
-								fieldIds={ hiddenFields }
-								mandatoryFields={ mandatoryFields }
-								viewFields={ viewFields }
-								view={ view }
-								onChangeView={ onChangeView }
-							/>
+							{ hiddenFields.map( ( field ) => (
+								<FieldItem
+									key={ field.id }
+									field={ field }
+									fields={ fields }
+									view={ view }
+									onChangeView={ onChangeView }
+								/>
+							) ) }
 						</ItemGroup>
 					</VStack>
 				</>
diff --git a/packages/dataviews/src/dataviews-layouts/index.ts b/packages/dataviews/src/dataviews-layouts/index.ts
index 9c96475777c00..eece17d0f4f10 100644
--- a/packages/dataviews/src/dataviews-layouts/index.ts
+++ b/packages/dataviews/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 );
+}
diff --git a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
index b019cbae36ab3..aff211fb613dc 100644
--- a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
@@ -25,7 +25,9 @@ import type {
 	NormalizedField,
 	SortDirection,
 	ViewTable as ViewTableType,
+	Operator,
 } from '../../types';
+import { getVisibleFieldIds } from '../index';
 
 const { DropdownMenuV2 } = unlock( componentsPrivateApis );
 
@@ -60,30 +62,43 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 	}: HeaderMenuProps< Item >,
 	ref: Ref< HTMLButtonElement >
 ) {
+	const visibleFieldIds = getVisibleFieldIds( view, fields );
+	const index = visibleFieldIds?.indexOf( fieldId ) as number;
+	const isSorted = view.sort?.field === fieldId;
+	let isHidable = false;
+	let isSortable = false;
+	let canAddFilter = false;
+	let header;
+	let operators: Operator[] = [];
+
 	const combinedField = view.layout?.combinedFields?.find(
 		( f ) => f.id === fieldId
 	);
-	const index = view.fields?.indexOf( fieldId ) as number;
-	if ( !! combinedField ) {
-		return combinedField.header || combinedField.label;
-	}
 	const field = fields.find( ( f ) => f.id === fieldId );
-	if ( ! field ) {
-		return null;
+
+	if ( ! combinedField ) {
+		if ( ! field ) {
+			// No combined or regular field found.
+			return null;
+		}
+
+		isHidable = field.enableHiding !== false;
+		isSortable = field.enableSorting !== false;
+		header = field.header;
+
+		operators = sanitizeOperators( field );
+		// Filter can be added:
+		// 1. If the field is not already part of a view's filters.
+		// 2. If the field meets the type and operator requirements.
+		// 3. If it's not primary. If it is, it should be already visible.
+		canAddFilter =
+			! view.filters?.some( ( _filter ) => fieldId === _filter.field ) &&
+			!! field.elements?.length &&
+			!! operators.length &&
+			! field.filterBy?.isPrimary;
+	} else {
+		header = combinedField.header || combinedField.label;
 	}
-	const isHidable = field.enableHiding !== false;
-	const isSortable = field.enableSorting !== false;
-	const isSorted = view.sort?.field === field.id;
-	const operators = sanitizeOperators( field );
-	// Filter can be added:
-	// 1. If the field is not already part of a view's filters.
-	// 2. If the field meets the type and operator requirements.
-	// 3. If it's not primary. If it is, it should be already visible.
-	const canAddFilter =
-		! view.filters?.some( ( _filter ) => field.id === _filter.field ) &&
-		!! field.elements?.length &&
-		!! operators.length &&
-		! field.filterBy?.isPrimary;
 
 	return (
 		<DropdownMenuV2
@@ -95,7 +110,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 					ref={ ref }
 					variant="tertiary"
 				>
-					{ field.header }
+					{ header }
 					{ view.sort && isSorted && (
 						<span aria-hidden="true">
 							{ sortArrows[ view.sort.direction ] }
@@ -115,7 +130,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 									isSorted &&
 									view.sort.direction === direction;
 
-								const value = `${ field.id }-${ direction }`;
+								const value = `${ fieldId }-${ direction }`;
 
 								return (
 									<DropdownMenuV2.RadioItem
@@ -132,7 +147,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 											onChangeView( {
 												...view,
 												sort: {
-													field: field.id,
+													field: fieldId,
 													direction,
 												},
 											} );
@@ -152,14 +167,14 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 						<DropdownMenuV2.Item
 							prefix={ <Icon icon={ funnel } /> }
 							onClick={ () => {
-								setOpenedFilter( field.id );
+								setOpenedFilter( fieldId );
 								onChangeView( {
 									...view,
 									page: 1,
 									filters: [
 										...( view.filters || [] ),
 										{
-											field: field.id,
+											field: fieldId,
 											value: undefined,
 											operator: operators[ 0 ],
 										},
@@ -178,17 +193,16 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 						prefix={ <Icon icon={ arrowLeft } /> }
 						disabled={ index < 1 }
 						onClick={ () => {
-							if ( ! view.fields || index < 1 ) {
-								return;
-							}
 							onChangeView( {
 								...view,
 								fields: [
-									...( view.fields.slice( 0, index - 1 ) ??
-										[] ),
-									field.id,
-									view.fields[ index - 1 ],
-									...view.fields.slice( index + 1 ),
+									...( visibleFieldIds.slice(
+										0,
+										index - 1
+									) ?? [] ),
+									fieldId,
+									visibleFieldIds[ index - 1 ],
+									...visibleFieldIds.slice( index + 1 ),
 								],
 							} );
 						} }
@@ -199,23 +213,16 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 					</DropdownMenuV2.Item>
 					<DropdownMenuV2.Item
 						prefix={ <Icon icon={ arrowRight } /> }
-						disabled={
-							! view.fields || index >= view.fields.length - 1
-						}
+						disabled={ index >= visibleFieldIds.length - 1 }
 						onClick={ () => {
-							if (
-								! view.fields ||
-								index >= view.fields.length - 1
-							) {
-								return;
-							}
 							onChangeView( {
 								...view,
 								fields: [
-									...( view.fields.slice( 0, index ) ?? [] ),
-									view.fields[ index + 1 ],
-									field.id,
-									...view.fields.slice( index + 2 ),
+									...( visibleFieldIds.slice( 0, index ) ??
+										[] ),
+									visibleFieldIds[ index + 1 ],
+									fieldId,
+									...visibleFieldIds.slice( index + 2 ),
 								],
 							} );
 						} }
@@ -224,17 +231,15 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 							{ __( 'Move right' ) }
 						</DropdownMenuV2.ItemLabel>
 					</DropdownMenuV2.Item>
-					{ isHidable && (
+					{ isHidable && field && (
 						<DropdownMenuV2.Item
 							prefix={ <Icon icon={ unseen } /> }
 							onClick={ () => {
-								const viewFields =
-									view.fields || fields.map( ( f ) => f.id );
 								onHide( field );
 								onChangeView( {
 									...view,
-									fields: viewFields.filter(
-										( id ) => id !== field.id
+									fields: visibleFieldIds.filter(
+										( id ) => id !== fieldId
 									),
 								} );
 							} }
diff --git a/packages/dataviews/src/dataviews-layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx
index b12082a55623b..4e1607b01489c 100644
--- a/packages/dataviews/src/dataviews-layouts/table/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/index.tsx
@@ -34,6 +34,7 @@ import type {
 } from '../../types';
 import type { SetSelection } from '../../private-types';
 import ColumnHeaderMenu from './column-header-menu';
+import { getVisibleFieldIds } from '../index';
 
 interface TableColumnFieldProps< Item > {
 	primaryField?: NormalizedField< Item >;
@@ -155,7 +156,7 @@ function TableRow< Item >( {
 	// `onClick` and can be used to exclude touchscreen devices from certain
 	// behaviours.
 	const isTouchDeviceRef = useRef( false );
-	const columns = view.fields || fields.map( ( f ) => f.id );
+	const columns = getVisibleFieldIds( view, fields );
 
 	return (
 		<tr
@@ -288,7 +289,7 @@ function ViewTable< Item >( {
 		setNextHeaderMenuToFocus( fallback?.node );
 	};
 
-	const columns = view.fields || fields.map( ( f ) => f.id );
+	const columns = getVisibleFieldIds( view, fields );
 	const hasData = !! data?.length;
 
 	const primaryField = fields.find(
diff --git a/packages/dataviews/src/normalize-fields.ts b/packages/dataviews/src/normalize-fields.ts
index 5f0baec12c4df..2d1cc0402bc20 100644
--- a/packages/dataviews/src/normalize-fields.ts
+++ b/packages/dataviews/src/normalize-fields.ts
@@ -61,6 +61,8 @@ export function normalizeFields< Item >(
 			sort,
 			isValid,
 			Edit,
+			enableHiding: field.enableHiding ?? true,
+			enableSorting: field.enableSorting ?? true,
 		};
 	} );
 }
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index ca55442f6529a..e95a43994cd63 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -163,6 +163,8 @@ export type NormalizedField< Item > = Field< Item > & {
 	Edit: ComponentType< DataFormControlProps< Item > >;
 	sort: ( a: Item, b: Item, direction: SortDirection ) => number;
 	isValid: ( item: Item, context?: ValidationContext ) => boolean;
+	enableHiding: boolean;
+	enableSorting: boolean;
 };
 
 /**