@wordpress/dataviews 4.10.0 → 4.11.1

package/src/dataviews-layouts/grid/preview-size-picker.tsx

@@ -3,7 +3,6 @@
  */
 import { RangeControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useViewportMatch } from '@wordpress/compose';
 import { useMemo, useContext } from '@wordpress/element';
 
 /**
@@ -12,7 +11,9 @@ import { useMemo, useContext } from '@wordpress/element';
 import DataViewsContext from '../../components/dataviews-context';
 import type { ViewGrid } from '../../types';
 
-const viewportBreaks = {
+const viewportBreaks: {
+	[ key: string ]: { min: number; max: number; default: number };
+} = {
 	xhuge: { min: 3, max: 6, default: 5 },
 	huge: { min: 2, max: 4, default: 4 },
 	xlarge: { min: 2, max: 3, default: 3 },
@@ -20,38 +21,35 @@ const viewportBreaks = {
 	mobile: { min: 1, max: 2, default: 2 },
 };
 
-function useViewPortBreakpoint() {
-	const isXHuge = useViewportMatch( 'xhuge', '>=' );
-	const isHuge = useViewportMatch( 'huge', '>=' );
-	const isXlarge = useViewportMatch( 'xlarge', '>=' );
-	const isLarge = useViewportMatch( 'large', '>=' );
-	const isMobile = useViewportMatch( 'mobile', '>=' );
+/**
+ * Breakpoints were adjusted from media queries breakpoints to account for
+ * the sidebar width. This was done to match the existing styles we had.
+ */
+const BREAKPOINTS = {
+	xhuge: 1520,
+	huge: 1140,
+	xlarge: 780,
+	large: 480,
+	mobile: 0,
+};
 
-	if ( isXHuge ) {
-		return 'xhuge';
-	}
-	if ( isHuge ) {
-		return 'huge';
-	}
-	if ( isXlarge ) {
-		return 'xlarge';
-	}
-	if ( isLarge ) {
-		return 'large';
-	}
-	if ( isMobile ) {
-		return 'mobile';
+function useViewPortBreakpoint() {
+	const containerWidth = useContext( DataViewsContext ).containerWidth;
+	for ( const [ key, value ] of Object.entries( BREAKPOINTS ) ) {
+		if ( containerWidth >= value ) {
+			return key;
+		}
 	}
-	return null;
+	return 'mobile';
 }
 
 export function useUpdatedPreviewSizeOnViewportChange() {
-	const viewport = useViewPortBreakpoint();
 	const view = useContext( DataViewsContext ).view as ViewGrid;
+	const viewport = useViewPortBreakpoint();
 	return useMemo( () => {
 		const previewSize = view.layout?.previewSize;
 		let newPreviewSize;
-		if ( ! viewport || ! previewSize ) {
+		if ( ! previewSize ) {
 			return;
 		}
 		const breakValues = viewportBreaks[ viewport ];
@@ -69,9 +67,8 @@ export default function PreviewSizePicker() {
 	const viewport = useViewPortBreakpoint();
 	const context = useContext( DataViewsContext );
 	const view = context.view as ViewGrid;
-	const breakValues = viewportBreaks[ viewport || 'mobile' ];
+	const breakValues = viewportBreaks[ viewport ];
 	const previewSizeToUse = view.layout?.previewSize || breakValues.default;
-
 	const marks = useMemo(
 		() =>
 			Array.from(
@@ -84,11 +81,9 @@ export default function PreviewSizePicker() {
 			),
 		[ breakValues ]
 	);
-
-	if ( ! viewport ) {
+	if ( viewport === 'mobile' ) {
 		return null;
 	}
-
 	return (
 		<RangeControl
 			__nextHasNoMarginBottom

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

@@ -3,6 +3,7 @@
 	grid-template-rows: max-content;
 	padding: 0 $grid-unit-60 $grid-unit-30;
 	transition: padding ease-out 0.1s;
+	container-type: inline-size;
 	@include reduce-motion("transition");
 
 
@@ -30,11 +31,16 @@
 			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
 				color: $gray-900;
 			}
-
-			.dataviews-view-grid__media::after {
-				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
-				box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
-			}
+		}
+		&.is-selected .dataviews-view-grid__media::after,
+		.dataviews-view-grid__media:focus::after {
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+		}
+		&.is-selected .dataviews-view-grid__media::after {
+			box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+		}
+		.dataviews-view-grid__media:focus::after {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
 
@@ -106,36 +112,29 @@
 		&:not(:empty) {
 			padding-bottom: $grid-unit-15;
 		}
-
-		.dataviews-view-grid__field-value {
-			width: fit-content;
-			background: $gray-100;
-			padding: 0 $grid-unit-10;
-			min-height: $grid-unit-30;
-			border-radius: $radius-small;
-			display: flex;
-			align-items: center;
-			font-size: 12px;
-		}
 	}
 }
 
 .dataviews-view-grid.dataviews-view-grid {
-	grid-template-columns: repeat(1, minmax(0, 1fr));
-
-	@include break-mobile() {
+	/**
+	 * Breakpoints were adjusted from media queries breakpoints to account for
+	 * the sidebar width. This was done to match the existing styles we had.
+	 */
+	@container (max-width: 480px) {
+		grid-template-columns: repeat(1, minmax(0, 1fr));
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+	@container (min-width: 480px) {
 		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
-
-	@include break-xlarge() {
+	@container (min-width: 780px) {
 		grid-template-columns: repeat(3, minmax(0, 1fr));
 	}
-
-	@include break-huge() {
+	@container (min-width: 1140px) {
 		grid-template-columns: repeat(4, minmax(0, 1fr));
 	}
-
-	@include break-xhuge() {
+	@container (min-width: 1520px) {
 		grid-template-columns: repeat(5, minmax(0, 1fr));
 	}
 }
@@ -158,14 +157,6 @@
 	top: $grid-unit-10;
 }
 
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
-@container (max-width: 430px) {
-	.dataviews-view-grid {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
-	}
-}
-
 .dataviews-view-grid__media--clickable {
 	cursor: pointer;
 }

package/src/dataviews-layouts/list/index.tsx

@@ -101,6 +101,8 @@ function PrimaryActionGridCell< Item >( {
 				render={
 					<Button
 						label={ label }
+						disabled={ !! primaryAction.disabled }
+						accessibleWhenDisabled
 						icon={ primaryAction.icon }
 						isDestructive={ primaryAction.isDestructive }
 						size="small"
@@ -124,6 +126,8 @@ function PrimaryActionGridCell< Item >( {
 				render={
 					<Button
 						label={ label }
+						disabled={ !! primaryAction.disabled }
+						accessibleWhenDisabled
 						icon={ primaryAction.icon }
 						isDestructive={ primaryAction.isDestructive }
 						size="small"
@@ -215,32 +219,36 @@ function ListItem< Item >( {
 			) }
 			{ ! hasOnlyOnePrimaryAction && (
 				<div role="gridcell">
-					<Menu
-						trigger={
-							<Composite.Item
-								id={ generateDropdownTriggerCompositeId(
-									idPrefix
-								) }
-								render={
-									<Button
-										size="small"
-										icon={ moreVertical }
-										label={ __( 'Actions' ) }
-										accessibleWhenDisabled
-										disabled={ ! actions.length }
-										onKeyDown={ onDropdownTriggerKeyDown }
-									/>
-								}
-							/>
-						}
-						placement="bottom-end"
-					>
-						<ActionsMenuGroup
-							actions={ eligibleActions }
-							item={ item }
-							registry={ registry }
-							setActiveModalAction={ setActiveModalAction }
+					<Menu placement="bottom-end">
+						<Menu.TriggerButton
+							render={
+								<Composite.Item
+									id={ generateDropdownTriggerCompositeId(
+										idPrefix
+									) }
+									render={
+										<Button
+											size="small"
+											icon={ moreVertical }
+											label={ __( 'Actions' ) }
+											accessibleWhenDisabled
+											disabled={ ! actions.length }
+											onKeyDown={
+												onDropdownTriggerKeyDown
+											}
+										/>
+									}
+								/>
+							}
 						/>
+						<Menu.Popover>
+							<ActionsMenuGroup
+								actions={ eligibleActions }
+								item={ item }
+								registry={ registry }
+								setActiveModalAction={ setActiveModalAction }
+							/>
+						</Menu.Popover>
 					</Menu>
 					{ !! activeModalAction && (
 						<ActionModal
@@ -257,7 +265,7 @@ function ListItem< Item >( {
 	return (
 		<Composite.Row
 			ref={ itemRef }
-			render={ <li /> }
+			render={ <div /> }
 			role="row"
 			className={ clsx( {
 				'is-selected': isSelected,
@@ -482,7 +490,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	return (
 		<Composite
 			id={ baseId }
-			render={ <ul /> }
+			render={ <div /> }
 			className="dataviews-view-list"
 			role="grid"
 			activeId={ activeCompositeId }

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

@@ -1,11 +1,11 @@
-ul.dataviews-view-list {
+div.dataviews-view-list {
 	list-style-type: none;
 }
 
 .dataviews-view-list {
 	margin: 0 0 auto;
 
-	li {
+	div[role="row"] {
 		margin: 0;
 		border-top: 1px solid $gray-100;
 
@@ -45,7 +45,7 @@ ul.dataviews-view-list {
 		&.is-selected.is-selected {
 			border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
 
-			& + li {
+			& + div[role="row"] {
 				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
 			}
 		}
@@ -69,8 +69,8 @@ ul.dataviews-view-list {
 
 	}
 
-	li.is-selected,
-	li.is-selected:focus-within {
+	div[role="row"].is-selected,
+	div[role="row"].is-selected:focus-within {
 		.dataviews-view-list__item-wrapper {
 			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 			color: $gray-900;

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

@@ -93,168 +93,172 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 		! field.filterBy?.isPrimary;
 
 	return (
-		<Menu
-			align="start"
-			trigger={
-				<Button
-					size="compact"
-					className="dataviews-view-table-header-button"
-					ref={ ref }
-					variant="tertiary"
-				>
-					{ header }
-					{ view.sort && isSorted && (
-						<span aria-hidden="true">
-							{ sortArrows[ view.sort.direction ] }
-						</span>
-					) }
-				</Button>
-			}
-			style={ { minWidth: '240px' } }
-		>
-			<WithMenuSeparators>
-				{ isSortable && (
-					<Menu.Group>
-						{ SORTING_DIRECTIONS.map(
-							( direction: SortDirection ) => {
-								const isChecked =
-									view.sort &&
-									isSorted &&
-									view.sort.direction === direction;
+		<Menu>
+			<Menu.TriggerButton
+				render={
+					<Button
+						size="compact"
+						className="dataviews-view-table-header-button"
+						ref={ ref }
+						variant="tertiary"
+					/>
+				}
+			>
+				{ header }
+				{ view.sort && isSorted && (
+					<span aria-hidden="true">
+						{ sortArrows[ view.sort.direction ] }
+					</span>
+				) }
+			</Menu.TriggerButton>
+			<Menu.Popover style={ { minWidth: '240px' } }>
+				<WithMenuSeparators>
+					{ isSortable && (
+						<Menu.Group>
+							{ SORTING_DIRECTIONS.map(
+								( direction: SortDirection ) => {
+									const isChecked =
+										view.sort &&
+										isSorted &&
+										view.sort.direction === direction;
 
-								const value = `${ fieldId }-${ direction }`;
+									const value = `${ fieldId }-${ direction }`;
 
-								return (
-									<Menu.RadioItem
-										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: fieldId,
-													direction,
-												},
-											} );
-										} }
-									>
-										<Menu.ItemLabel>
-											{ sortLabels[ direction ] }
-										</Menu.ItemLabel>
-									</Menu.RadioItem>
-								);
-							}
-						) }
-					</Menu.Group>
-				) }
-				{ canAddFilter && (
-					<Menu.Group>
-						<Menu.Item
-							prefix={ <Icon icon={ funnel } /> }
-							onClick={ () => {
-								setOpenedFilter( fieldId );
-								onChangeView( {
-									...view,
-									page: 1,
-									filters: [
-										...( view.filters || [] ),
-										{
-											field: fieldId,
-											value: undefined,
-											operator: operators[ 0 ],
-										},
-									],
-								} );
-							} }
-						>
-							<Menu.ItemLabel>
-								{ __( 'Add filter' ) }
-							</Menu.ItemLabel>
-						</Menu.Item>
-					</Menu.Group>
-				) }
-				{ ( canMove || isHidable ) && field && (
-					<Menu.Group>
-						{ canMove && (
+									return (
+										<Menu.RadioItem
+											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: fieldId,
+														direction,
+													},
+													showLevels: false,
+												} );
+											} }
+										>
+											<Menu.ItemLabel>
+												{ sortLabels[ direction ] }
+											</Menu.ItemLabel>
+										</Menu.RadioItem>
+									);
+								}
+							) }
+						</Menu.Group>
+					) }
+					{ canAddFilter && (
+						<Menu.Group>
 							<Menu.Item
-								prefix={ <Icon icon={ arrowLeft } /> }
-								disabled={ index < 1 }
+								prefix={ <Icon icon={ funnel } /> }
 								onClick={ () => {
+									setOpenedFilter( fieldId );
 									onChangeView( {
 										...view,
-										fields: [
-											...( visibleFieldIds.slice(
-												0,
-												index - 1
-											) ?? [] ),
-											fieldId,
-											visibleFieldIds[ index - 1 ],
-											...visibleFieldIds.slice(
-												index + 1
-											),
+										page: 1,
+										filters: [
+											...( view.filters || [] ),
+											{
+												field: fieldId,
+												value: undefined,
+												operator: operators[ 0 ],
+											},
 										],
 									} );
 								} }
 							>
 								<Menu.ItemLabel>
-									{ __( 'Move left' ) }
+									{ __( 'Add filter' ) }
 								</Menu.ItemLabel>
 							</Menu.Item>
-						) }
-						{ canMove && (
-							<Menu.Item
-								prefix={ <Icon icon={ arrowRight } /> }
-								disabled={ index >= visibleFieldIds.length - 1 }
-								onClick={ () => {
-									onChangeView( {
-										...view,
-										fields: [
-											...( visibleFieldIds.slice(
-												0,
-												index
-											) ?? [] ),
-											visibleFieldIds[ index + 1 ],
-											fieldId,
-											...visibleFieldIds.slice(
-												index + 2
+						</Menu.Group>
+					) }
+					{ ( canMove || isHidable ) && field && (
+						<Menu.Group>
+							{ canMove && (
+								<Menu.Item
+									prefix={ <Icon icon={ arrowLeft } /> }
+									disabled={ index < 1 }
+									onClick={ () => {
+										onChangeView( {
+											...view,
+											fields: [
+												...( visibleFieldIds.slice(
+													0,
+													index - 1
+												) ?? [] ),
+												fieldId,
+												visibleFieldIds[ index - 1 ],
+												...visibleFieldIds.slice(
+													index + 1
+												),
+											],
+										} );
+									} }
+								>
+									<Menu.ItemLabel>
+										{ __( 'Move left' ) }
+									</Menu.ItemLabel>
+								</Menu.Item>
+							) }
+							{ canMove && (
+								<Menu.Item
+									prefix={ <Icon icon={ arrowRight } /> }
+									disabled={
+										index >= visibleFieldIds.length - 1
+									}
+									onClick={ () => {
+										onChangeView( {
+											...view,
+											fields: [
+												...( visibleFieldIds.slice(
+													0,
+													index
+												) ?? [] ),
+												visibleFieldIds[ index + 1 ],
+												fieldId,
+												...visibleFieldIds.slice(
+													index + 2
+												),
+											],
+										} );
+									} }
+								>
+									<Menu.ItemLabel>
+										{ __( 'Move right' ) }
+									</Menu.ItemLabel>
+								</Menu.Item>
+							) }
+							{ isHidable && field && (
+								<Menu.Item
+									prefix={ <Icon icon={ unseen } /> }
+									onClick={ () => {
+										onHide( field );
+										onChangeView( {
+											...view,
+											fields: visibleFieldIds.filter(
+												( id ) => id !== fieldId
 											),
-										],
-									} );
-								} }
-							>
-								<Menu.ItemLabel>
-									{ __( 'Move right' ) }
-								</Menu.ItemLabel>
-							</Menu.Item>
-						) }
-						{ isHidable && field && (
-							<Menu.Item
-								prefix={ <Icon icon={ unseen } /> }
-								onClick={ () => {
-									onHide( field );
-									onChangeView( {
-										...view,
-										fields: visibleFieldIds.filter(
-											( id ) => id !== fieldId
-										),
-									} );
-								} }
-							>
-								<Menu.ItemLabel>
-									{ __( 'Hide column' ) }
-								</Menu.ItemLabel>
-							</Menu.Item>
-						) }
-					</Menu.Group>
-				) }
-			</WithMenuSeparators>
+										} );
+									} }
+								>
+									<Menu.ItemLabel>
+										{ __( 'Hide column' ) }
+									</Menu.ItemLabel>
+								</Menu.Item>
+							) }
+						</Menu.Group>
+					) }
+				</WithMenuSeparators>
+			</Menu.Popover>
 		</Menu>
 	);
 } );

package/src/dataviews-layouts/table/column-primary.tsx

@@ -14,6 +14,7 @@ import getClickableItemProps from '../utils/get-clickable-item-props';
 
 function ColumnPrimary< Item >( {
 	item,
+	level,
 	titleField,
 	mediaField,
 	descriptionField,
@@ -21,6 +22,7 @@ function ColumnPrimary< Item >( {
 	isItemClickable,
 }: {
 	item: Item;
+	level?: number;
 	titleField?: NormalizedField< Item >;
 	mediaField?: NormalizedField< Item >;
 	descriptionField?: NormalizedField< Item >;
@@ -44,6 +46,11 @@ function ColumnPrimary< Item >( {
 			<VStack spacing={ 0 }>
 				{ titleField && (
 					<div { ...clickableProps }>
+						{ level !== undefined && (
+							<span className="dataviews-view-table__level">
+								{ '—'.repeat( level ) }&nbsp;
+							</span>
+						) }
 						<titleField.render item={ item } />
 					</div>
 				) }