@wordpress/dataviews 4.10.0 → 4.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "4.10.0",
+	"version": "4.11.1",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,7 +27,8 @@
 	"exports": {
 		".": {
 			"types": "./build-types/index.d.ts",
-			"import": "./build-module/index.js"
+			"import": "./build-module/index.js",
+			"default": "./build/index.js"
 		},
 		"./wp": {
 			"types": "./build-types/index.d.ts",
@@ -45,15 +46,15 @@
 	"dependencies": {
 		"@ariakit/react": "^0.4.15",
 		"@babel/runtime": "7.25.7",
-		"@wordpress/components": "*",
-		"@wordpress/compose": "*",
-		"@wordpress/data": "*",
-		"@wordpress/element": "*",
-		"@wordpress/i18n": "*",
-		"@wordpress/icons": "*",
-		"@wordpress/primitives": "*",
-		"@wordpress/private-apis": "*",
-		"@wordpress/warning": "*",
+		"@wordpress/components": "^29.1.1",
+		"@wordpress/compose": "^7.15.1",
+		"@wordpress/data": "^10.15.1",
+		"@wordpress/element": "^6.15.1",
+		"@wordpress/i18n": "^5.15.1",
+		"@wordpress/icons": "^10.15.1",
+		"@wordpress/primitives": "^4.15.1",
+		"@wordpress/private-apis": "^1.15.0",
+		"@wordpress/warning": "^3.15.0",
 		"clsx": "^2.1.1",
 		"remove-accents": "^0.5.0"
 	},
@@ -66,5 +67,5 @@
 	"scripts": {
 		"build:wp": "node build"
 	},
-	"gitHead": "b432c18934c9db866b6dba7d37517a4e97d642e3"
+	"gitHead": "0d4503ecc364cf4ca16024673baf5a84dacf212f"
 }

package/src/components/dataviews/index.tsx

@@ -8,6 +8,7 @@ import type { ReactNode } from 'react';
  */
 import { __experimentalHStack as HStack } from '@wordpress/components';
 import { useMemo, useState } from '@wordpress/element';
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -47,6 +48,7 @@ type DataViewsProps< Item > = {
 	onClickItem?: ( item: Item ) => void;
 	isItemClickable?: ( item: Item ) => boolean;
 	header?: ReactNode;
+	getItemLevel?: ( item: Item ) => number;
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
 	: { getItemId: ( item: Item ) => string } );
@@ -64,6 +66,7 @@ export default function DataViews< Item >( {
 	actions = EMPTY_ARRAY,
 	data,
 	getItemId = defaultGetItemId,
+	getItemLevel,
 	isLoading = false,
 	paginationInfo,
 	defaultLayouts,
@@ -73,6 +76,15 @@ export default function DataViews< Item >( {
 	isItemClickable = defaultIsItemClickable,
 	header,
 }: DataViewsProps< Item > ) {
+	const [ containerWidth, setContainerWidth ] = useState( 0 );
+	const containerRef = useResizeObserver(
+		( resizeObserverEntries: any ) => {
+			setContainerWidth(
+				resizeObserverEntries[ 0 ].borderBoxSize[ 0 ].inlineSize
+			);
+		},
+		{ box: 'border-box' }
+	);
 	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
 	const isUncontrolled =
 		selectionProperty === undefined || onChangeSelection === undefined;
@@ -115,11 +127,13 @@ export default function DataViews< Item >( {
 				openedFilter,
 				setOpenedFilter,
 				getItemId,
+				getItemLevel,
 				isItemClickable,
 				onClickItem,
+				containerWidth,
 			} }
 		>
-			<div className="dataviews-wrapper">
+			<div className="dataviews-wrapper" ref={ containerRef }>
 				<HStack
 					alignment="top"
 					justify="space-between"

package/src/components/dataviews/style.scss

@@ -33,7 +33,6 @@
 	@include reduce-motion( "transition" );
 }
 
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 430px) {
 	.dataviews__view-actions,
 	.dataviews-filters__container {

package/src/components/dataviews-context/index.ts

@@ -26,8 +26,10 @@ type DataViewsContextType< Item > = {
 	openedFilter: string | null;
 	setOpenedFilter: ( openedFilter: string | null ) => void;
 	getItemId: ( item: Item ) => string;
+	getItemLevel?: ( item: Item ) => number;
 	onClickItem?: ( item: Item ) => void;
 	isItemClickable: ( item: Item ) => boolean;
+	containerWidth: number;
 };
 
 const DataViewsContext = createContext< DataViewsContextType< any > >( {
@@ -45,6 +47,7 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	openedFilter: null,
 	getItemId: ( item ) => item.id,
 	isItemClickable: () => true,
+	containerWidth: 0,
 } );
 
 export default DataViewsContext;

package/src/components/dataviews-filters/add-filter.tsx

@@ -33,37 +33,40 @@ export function AddFilterMenu( {
 	view,
 	onChangeView,
 	setOpenedFilter,
-	trigger,
+	triggerProps,
 }: AddFilterProps & {
-	trigger: React.ReactNode;
+	triggerProps: React.ComponentProps< typeof Menu.TriggerButton >;
 } ) {
 	const inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );
 	return (
-		<Menu trigger={ trigger }>
-			{ inactiveFilters.map( ( filter ) => {
-				return (
-					<Menu.Item
-						key={ filter.field }
-						onClick={ () => {
-							setOpenedFilter( filter.field );
-							onChangeView( {
-								...view,
-								page: 1,
-								filters: [
-									...( view.filters || [] ),
-									{
-										field: filter.field,
-										value: undefined,
-										operator: filter.operators[ 0 ],
-									},
-								],
-							} );
-						} }
-					>
-						<Menu.ItemLabel>{ filter.name }</Menu.ItemLabel>
-					</Menu.Item>
-				);
-			} ) }
+		<Menu>
+			<Menu.TriggerButton { ...triggerProps } />
+			<Menu.Popover>
+				{ inactiveFilters.map( ( filter ) => {
+					return (
+						<Menu.Item
+							key={ filter.field }
+							onClick={ () => {
+								setOpenedFilter( filter.field );
+								onChangeView( {
+									...view,
+									page: 1,
+									filters: [
+										...( view.filters || [] ),
+										{
+											field: filter.field,
+											value: undefined,
+											operator: filter.operators[ 0 ],
+										},
+									],
+								} );
+							} }
+						>
+							<Menu.ItemLabel>{ filter.name }</Menu.ItemLabel>
+						</Menu.Item>
+					);
+				} ) }
+			</Menu.Popover>
 		</Menu>
 	);
 }
@@ -78,18 +81,19 @@ function AddFilter(
 	const inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );
 	return (
 		<AddFilterMenu
-			trigger={
-				<Button
-					accessibleWhenDisabled
-					size="compact"
-					className="dataviews-filters-button"
-					variant="tertiary"
-					disabled={ ! inactiveFilters.length }
-					ref={ ref }
-				>
-					{ __( 'Add filter' ) }
-				</Button>
-			}
+			triggerProps={ {
+				render: (
+					<Button
+						accessibleWhenDisabled
+						size="compact"
+						className="dataviews-filters-button"
+						variant="tertiary"
+						disabled={ ! inactiveFilters.length }
+						ref={ ref }
+					/>
+				),
+				children: __( 'Add filter' ),
+			} }
 			{ ...{ filters, view, onChangeView, setOpenedFilter } }
 		/>
 	);

package/src/components/dataviews-filters/index.tsx

@@ -136,7 +136,7 @@ export function FiltersToggle( {
 					view={ view }
 					onChangeView={ onChangeViewWithFilterVisibility }
 					setOpenedFilter={ setOpenedFilter }
-					trigger={ buttonComponent }
+					triggerProps={ { render: buttonComponent } }
 				/>
 			) : (
 				<FilterVisibilityToggle

package/src/components/dataviews-footer/style.scss

@@ -11,15 +11,12 @@
 	z-index: z-index(".dataviews-footer");
 }
 
-
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 430px) {
 	.dataviews-footer {
 		padding: $grid-unit-15 $grid-unit-30;
 	}
 }
 
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 560px) {
 	.dataviews-footer {
 		flex-direction: column !important;

package/src/components/dataviews-item-actions/index.tsx

@@ -75,6 +75,8 @@ function ButtonTrigger< Item >( {
 		<Button
 			label={ label }
 			icon={ action.icon }
+			disabled={ !! action.disabled }
+			accessibleWhenDisabled
 			isDestructive={ action.isDestructive }
 			size="compact"
 			onClick={ onClick }
@@ -90,7 +92,7 @@ function MenuItemTrigger< Item >( {
 	const label =
 		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
-		<Menu.Item onClick={ onClick }>
+		<Menu.Item disabled={ action.disabled } onClick={ onClick }>
 			<Menu.ItemLabel>{ label }</Menu.ItemLabel>
 		</Menu.Item>
 	);
@@ -145,13 +147,6 @@ export function ActionsMenuGroup< Item >( {
 	);
 }
 
-function hasOnlyOneActionAndIsPrimary< Item >(
-	primaryActions: Action< Item >[],
-	actions: Action< Item >[]
-) {
-	return primaryActions.length === 1 && actions.length === 1;
-}
-
 export default function ItemActions< Item >( {
 	item,
 	actions,
@@ -184,7 +179,8 @@ export default function ItemActions< Item >( {
 		);
 	}
 
-	if ( hasOnlyOneActionAndIsPrimary( primaryActions, actions ) ) {
+	// If all actions are primary, there is no need to render the dropdown.
+	if ( primaryActions.length === eligibleActions.length ) {
 		return (
 			<PrimaryActions
 				item={ item }
@@ -229,25 +225,27 @@ function CompactItemActions< Item >( {
 	);
 	return (
 		<>
-			<Menu
-				trigger={
-					<Button
-						size={ isSmall ? 'small' : 'compact' }
-						icon={ moreVertical }
-						label={ __( 'Actions' ) }
-						accessibleWhenDisabled
-						disabled={ ! actions.length }
-						className="dataviews-all-actions-button"
-					/>
-				}
-				placement="bottom-end"
-			>
-				<ActionsMenuGroup
-					actions={ actions }
-					item={ item }
-					registry={ registry }
-					setActiveModalAction={ setActiveModalAction }
+			<Menu placement="bottom-end">
+				<Menu.TriggerButton
+					render={
+						<Button
+							size={ isSmall ? 'small' : 'compact' }
+							icon={ moreVertical }
+							label={ __( 'Actions' ) }
+							accessibleWhenDisabled
+							disabled={ ! actions.length }
+							className="dataviews-all-actions-button"
+						/>
+					}
 				/>
+				<Menu.Popover>
+					<ActionsMenuGroup
+						actions={ actions }
+						item={ item }
+						registry={ registry }
+						setActiveModalAction={ setActiveModalAction }
+					/>
+				</Menu.Popover>
 			</Menu>
 			{ !! activeModalAction && (
 				<ActionModal

package/src/components/dataviews-layout/index.tsx

@@ -21,6 +21,7 @@ export default function DataViewsLayout() {
 		data,
 		fields,
 		getItemId,
+		getItemLevel,
 		isLoading,
 		view,
 		onChangeView,
@@ -40,6 +41,7 @@ export default function DataViewsLayout() {
 			data={ data }
 			fields={ fields }
 			getItemId={ getItemId }
+			getItemLevel={ getItemLevel }
 			isLoading={ isLoading }
 			onChangeView={ onChangeView }
 			onChangeSelection={ onChangeSelection }

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

@@ -69,50 +69,57 @@ function ViewTypeMenu( {
 	}
 	const activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );
 	return (
-		<Menu
-			trigger={
-				<Button
-					size="compact"
-					icon={ activeView?.icon }
-					label={ __( 'Layout' ) }
-				/>
-			}
-		>
-			{ availableLayouts.map( ( layout ) => {
-				const config = VIEW_LAYOUTS.find( ( v ) => v.type === layout );
-				if ( ! config ) {
-					return null;
+		<Menu>
+			<Menu.TriggerButton
+				render={
+					<Button
+						size="compact"
+						icon={ activeView?.icon }
+						label={ __( 'Layout' ) }
+					/>
 				}
-				return (
-					<Menu.RadioItem
-						key={ layout }
-						value={ layout }
-						name="view-actions-available-view"
-						checked={ layout === view.type }
-						hideOnClick
-						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => {
-							switch ( e.target.value ) {
-								case 'list':
-								case 'grid':
-								case 'table':
-									const viewWithoutLayout = { ...view };
-									if ( 'layout' in viewWithoutLayout ) {
-										delete viewWithoutLayout.layout;
-									}
-									// @ts-expect-error
-									return onChangeView( {
-										...viewWithoutLayout,
-										type: e.target.value,
-										...defaultLayouts[ e.target.value ],
-									} );
-							}
-							warning( 'Invalid dataview' );
-						} }
-					>
-						<Menu.ItemLabel>{ config.label }</Menu.ItemLabel>
-					</Menu.RadioItem>
-				);
-			} ) }
+			/>
+			<Menu.Popover>
+				{ availableLayouts.map( ( layout ) => {
+					const config = VIEW_LAYOUTS.find(
+						( v ) => v.type === layout
+					);
+					if ( ! config ) {
+						return null;
+					}
+					return (
+						<Menu.RadioItem
+							key={ layout }
+							value={ layout }
+							name="view-actions-available-view"
+							checked={ layout === view.type }
+							hideOnClick
+							onChange={ (
+								e: ChangeEvent< HTMLInputElement >
+							) => {
+								switch ( e.target.value ) {
+									case 'list':
+									case 'grid':
+									case 'table':
+										const viewWithoutLayout = { ...view };
+										if ( 'layout' in viewWithoutLayout ) {
+											delete viewWithoutLayout.layout;
+										}
+										// @ts-expect-error
+										return onChangeView( {
+											...viewWithoutLayout,
+											type: e.target.value,
+											...defaultLayouts[ e.target.value ],
+										} );
+								}
+								warning( 'Invalid dataview' );
+							} }
+						>
+							<Menu.ItemLabel>{ config.label }</Menu.ItemLabel>
+						</Menu.RadioItem>
+					);
+				} ) }
+			</Menu.Popover>
 		</Menu>
 	);
 }
@@ -145,6 +152,7 @@ function SortFieldControl() {
 						direction: view?.sort?.direction || 'desc',
 						field: value,
 					},
+					showLevels: false,
 				} );
 			} }
 		/>
@@ -187,6 +195,7 @@ function SortDirectionControl() {
 								)?.id ||
 								'',
 						},
+						showLevels: false,
 					} );
 					return;
 				}

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

@@ -43,7 +43,6 @@
 	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 {
 		grid-template-columns: repeat(2, 1fr);

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

@@ -13,6 +13,7 @@ import {
 	Spinner,
 	Flex,
 	FlexItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
@@ -20,9 +21,13 @@ import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import ItemActions from '../../components/dataviews-item-actions';
 import DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';
-import { useHasAPossibleBulkAction } from '../../components/dataviews-bulk-actions';
+import {
+	useHasAPossibleBulkAction,
+	useSomeItemHasAPossibleBulkAction,
+} from '../../components/dataviews-bulk-actions';
 import type {
 	Action,
 	NormalizedField,
@@ -32,6 +37,7 @@ import type {
 import type { SetSelection } from '../../private-types';
 import getClickableItemProps from '../utils/get-clickable-item-props';
 import { useUpdatedPreviewSizeOnViewportChange } from './preview-size-picker';
+const { Badge } = unlock( componentsPrivateApis );
 
 interface GridItemProps< Item > {
 	view: ViewGridType;
@@ -47,6 +53,7 @@ interface GridItemProps< Item > {
 	descriptionField?: NormalizedField< Item >;
 	regularFields: NormalizedField< Item >[];
 	badgeFields: NormalizedField< Item >[];
+	hasBulkActions: boolean;
 }
 
 function GridItem< Item >( {
@@ -63,6 +70,7 @@ function GridItem< Item >( {
 	descriptionField,
 	regularFields,
 	badgeFields,
+	hasBulkActions,
 }: GridItemProps< Item > ) {
 	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
@@ -135,7 +143,7 @@ function GridItem< Item >( {
 					{ renderedMediaField }
 				</div>
 			) }
-			{ showMedia && renderedMediaField && (
+			{ hasBulkActions && showMedia && renderedMediaField && (
 				<DataViewsSelectionCheckbox
 					item={ item }
 					selection={ selection }
@@ -152,7 +160,9 @@ function GridItem< Item >( {
 				<div { ...clickableTitleItemProps } { ...titleA11yProps }>
 					{ renderedTitleField }
 				</div>
-				<ItemActions item={ item } actions={ actions } isCompact />
+				{ !! actions?.length && (
+					<ItemActions item={ item } actions={ actions } isCompact />
+				) }
 			</HStack>
 			<VStack spacing={ 1 }>
 				{ showDescription && descriptionField?.render && (
@@ -168,12 +178,12 @@ function GridItem< Item >( {
 					>
 						{ badgeFields.map( ( field ) => {
 							return (
-								<FlexItem
+								<Badge
 									key={ field.id }
 									className="dataviews-view-grid__field-value"
 								>
 									<field.render item={ item } />
-								</FlexItem>
+								</Badge>
 							);
 						} ) }
 					</HStack>
@@ -258,6 +268,7 @@ export default function ViewGrid< Item >( {
 	);
 	const hasData = !! data?.length;
 	const updatedPreviewSize = useUpdatedPreviewSizeOnViewportChange();
+	const hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );
 	const usedPreviewSize = updatedPreviewSize || view.layout?.previewSize;
 	const gridStyle = usedPreviewSize
 		? {
@@ -292,6 +303,7 @@ export default function ViewGrid< Item >( {
 								descriptionField={ descriptionField }
 								regularFields={ regularFields }
 								badgeFields={ badgeFields }
+								hasBulkActions={ hasBulkActions }
 							/>
 						);
 					} ) }