@wordpress/dataviews 3.0.0 → 4.0.0

package/src/layouts/list/style.scss

@@ -0,0 +1,189 @@
+.dataviews-view-list {
+	margin: 0 0 auto;
+
+	li {
+		margin: 0;
+		cursor: pointer;
+		border-top: 1px solid $gray-100;
+
+		.dataviews-view-list__item-wrapper {
+			position: relative;
+			border-radius: $grid-unit-05;
+
+			> * {
+				width: 100%;
+			}
+		}
+
+		.dataviews-view-list__item-actions {
+			position: absolute;
+			top: $grid-unit-20;
+			right: 0;
+
+
+			> div {
+				height: $button-size-small;
+			}
+
+			.components-button {
+				opacity: 0;
+			}
+		}
+
+		&:has(.dataviews-view-list__fields:empty) {
+			.dataviews-view-list__item-actions {
+				top: 50%;
+				transform: translateY(-50%);
+			}
+		}
+
+		&.is-selected,
+		&.is-hovered,
+		&:focus-within {
+			.dataviews-view-list__item-actions {
+				background: #f8f8f8;
+				padding-left: $grid-unit-10;
+				margin-right: $grid-unit-30;
+				box-shadow: -12px 0 8px 0 #f8f8f8;
+
+				.components-button {
+					opacity: 1;
+					position: static;
+				}
+			}
+		}
+
+		&.is-selected {
+			.dataviews-view-list__item-actions {
+				background-color: rgb(247 248 255);
+				box-shadow: -12px 0 8px 0 rgb(247 248 255);
+			}
+		}
+
+		&.is-selected.is-selected {
+			border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
+
+			& + li {
+				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
+			}
+		}
+
+		&:not(.is-selected) {
+			.dataviews-view-list__primary-field {
+				color: $gray-900;
+			}
+			&:hover,
+			&:focus-within {
+				color: var(--wp-admin-theme-color);
+				background-color: #f8f8f8;
+
+				.dataviews-view-list__primary-field,
+				.dataviews-view-list__fields {
+					color: var(--wp-admin-theme-color);
+				}
+			}
+		}
+
+	}
+
+	li.is-selected,
+	li.is-selected:focus-within {
+		.dataviews-view-list__item-wrapper {
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			color: $gray-900;
+
+			.dataviews-view-list__primary-field,
+			.dataviews-view-list__fields {
+				color: var(--wp-admin-theme-color);
+			}
+		}
+	}
+
+	.dataviews-view-list__item {
+		padding: $grid-unit-20 $grid-unit-30;
+		width: 100%;
+		scroll-margin: $grid-unit-10 0;
+
+		&:focus-visible {
+			&::before {
+				position: absolute;
+				content: "";
+				top: calc(var(--wp-admin-border-width-focus) + 1px);
+				right: var(--wp-admin-border-width-focus);
+				bottom: var(--wp-admin-border-width-focus);
+				left: var(--wp-admin-border-width-focus);
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				border-radius: $radius-block-ui;
+			}
+		}
+		.dataviews-view-list__primary-field {
+			min-height: $grid-unit-30;
+			line-height: $grid-unit-30;
+			overflow: hidden;
+		}
+	}
+
+	.dataviews-view-list__media-wrapper {
+		width: $grid-unit-05 * 13;
+		height: $grid-unit-05 * 13;
+		overflow: hidden;
+		position: relative;
+		flex-shrink: 0;
+		background-color: $gray-100;
+		border-radius: $grid-unit-05;
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
+			border-radius: $grid-unit-05;
+		}
+	}
+
+	.dataviews-view-list__media-placeholder {
+		min-width: $grid-unit-40;
+		height: $grid-unit-40;
+		background-color: $gray-200;
+	}
+
+	.dataviews-view-list__field-wrapper {
+		min-height: $grid-unit-05 * 13; // Ensures title is centrally aligned when all fields are hidden
+	}
+
+	.dataviews-view-list__fields {
+		color: $gray-700;
+		display: flex;
+		gap: $grid-unit-15;
+		row-gap: $grid-unit-05;
+		flex-wrap: wrap;
+		font-size: 12px;
+
+		&:empty {
+			display: none;
+		}
+
+		.dataviews-view-list__field {
+			&:has(.dataviews-view-list__field-value:empty) {
+				display: none;
+			}
+		}
+
+		.dataviews-view-list__field-value {
+			line-height: $grid-unit-05 * 6;
+		}
+	}
+
+	& + .dataviews-pagination {
+		justify-content: space-between;
+	}
+}

package/src/layouts/table/column-header-menu.tsx

@@ -0,0 +1,268 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode, Ref, PropsWithoutRef, RefAttributes } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { arrowLeft, arrowRight, unseen, funnel } from '@wordpress/icons';
+import {
+	Button,
+	Icon,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { forwardRef, Children, Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { sanitizeOperators } from '../../utils';
+import { SORTING_DIRECTIONS, sortArrows, sortLabels } from '../../constants';
+import type {
+	NormalizedField,
+	SortDirection,
+	ViewTable as ViewTableType,
+} from '../../types';
+
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuGroupV2: DropdownMenuGroup,
+	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
+	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+	DropdownMenuSeparatorV2: DropdownMenuSeparator,
+} = unlock( componentsPrivateApis );
+
+interface HeaderMenuProps< Item > {
+	fieldId: string;
+	view: ViewTableType;
+	fields: NormalizedField< Item >[];
+	onChangeView: ( view: ViewTableType ) => void;
+	onHide: ( field: NormalizedField< Item > ) => void;
+	setOpenedFilter: ( fieldId: string ) => void;
+}
+
+function WithDropDownMenuSeparators( { children }: { children: ReactNode } ) {
+	return Children.toArray( children )
+		.filter( Boolean )
+		.map( ( child, i ) => (
+			<Fragment key={ i }>
+				{ i > 0 && <DropdownMenuSeparator /> }
+				{ child }
+			</Fragment>
+		) );
+}
+
+const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
+	{
+		fieldId,
+		view,
+		fields,
+		onChangeView,
+		onHide,
+		setOpenedFilter,
+	}: HeaderMenuProps< Item >,
+	ref: Ref< HTMLButtonElement >
+) {
+	const combinedField = view.layout?.combinedFields?.find(
+		( f ) => f.id === fieldId
+	);
+	const index = view.fields?.indexOf( fieldId ) as number;
+	if ( !! combinedField ) {
+		return combinedField.label;
+	}
+	const field = fields.find( ( f ) => f.id === fieldId );
+	if ( ! field ) {
+		return null;
+	}
+	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;
+	if ( ! isSortable && ! isHidable && ! canAddFilter ) {
+		return field.label;
+	}
+	return (
+		<DropdownMenu
+			align="start"
+			trigger={
+				<Button
+					size="compact"
+					className="dataviews-view-table-header-button"
+					ref={ ref }
+					variant="tertiary"
+				>
+					{ field.label }
+					{ view.sort && isSorted && (
+						<span aria-hidden="true">
+							{ sortArrows[ view.sort.direction ] }
+						</span>
+					) }
+				</Button>
+			}
+			style={ { minWidth: '240px' } }
+		>
+			<WithDropDownMenuSeparators>
+				{ isSortable && (
+					<DropdownMenuGroup>
+						{ SORTING_DIRECTIONS.map(
+							( direction: SortDirection ) => {
+								const isChecked =
+									view.sort &&
+									isSorted &&
+									view.sort.direction === direction;
+
+								const value = `${ field.id }-${ direction }`;
+
+								return (
+									<DropdownMenuRadioItem
+										key={ value }
+										// All sorting radio items share the same name, so that
+										// selecting a sorting option automatically deselects the
+										// previously selected one, even if it is displayed in
+										// another submenu. The field and direction are passed via
+										// the `value` prop.
+										name="view-table-sorting"
+										value={ value }
+										checked={ isChecked }
+										onChange={ () => {
+											onChangeView( {
+												...view,
+												sort: {
+													field: field.id,
+													direction,
+												},
+											} );
+										} }
+									>
+										<DropdownMenuItemLabel>
+											{ sortLabels[ direction ] }
+										</DropdownMenuItemLabel>
+									</DropdownMenuRadioItem>
+								);
+							}
+						) }
+					</DropdownMenuGroup>
+				) }
+				{ canAddFilter && (
+					<DropdownMenuGroup>
+						<DropdownMenuItem
+							prefix={ <Icon icon={ funnel } /> }
+							onClick={ () => {
+								setOpenedFilter( field.id );
+								onChangeView( {
+									...view,
+									page: 1,
+									filters: [
+										...( view.filters || [] ),
+										{
+											field: field.id,
+											value: undefined,
+											operator: operators[ 0 ],
+										},
+									],
+								} );
+							} }
+						>
+							<DropdownMenuItemLabel>
+								{ __( 'Add filter' ) }
+							</DropdownMenuItemLabel>
+						</DropdownMenuItem>
+					</DropdownMenuGroup>
+				) }
+				<DropdownMenuGroup>
+					<DropdownMenuItem
+						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 ),
+								],
+							} );
+						} }
+					>
+						<DropdownMenuItemLabel>
+							{ __( 'Move left' ) }
+						</DropdownMenuItemLabel>
+					</DropdownMenuItem>
+					<DropdownMenuItem
+						prefix={ <Icon icon={ arrowRight } /> }
+						disabled={
+							! view.fields || index >= view.fields.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 ),
+								],
+							} );
+						} }
+					>
+						<DropdownMenuItemLabel>
+							{ __( 'Move right' ) }
+						</DropdownMenuItemLabel>
+					</DropdownMenuItem>
+					{ isHidable && (
+						<DropdownMenuItem
+							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
+									),
+								} );
+							} }
+						>
+							<DropdownMenuItemLabel>
+								{ __( 'Hide' ) }
+							</DropdownMenuItemLabel>
+						</DropdownMenuItem>
+					) }
+				</DropdownMenuGroup>
+			</WithDropDownMenuSeparators>
+		</DropdownMenu>
+	);
+} );
+
+// @ts-expect-error Lift the `Item` type argument through the forwardRef.
+const ColumnHeaderMenu: < Item >(
+	props: PropsWithoutRef< HeaderMenuProps< Item > > &
+		RefAttributes< HTMLButtonElement >
+) => ReturnType< typeof _HeaderMenu > = _HeaderMenu;
+
+export default ColumnHeaderMenu;