@wordpress/dataviews 12.1.1-next.v.202602241322.0 → 13.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "12.1.1-next.v.202602241322.0+bce7cff88",
+	"version": "13.0.0",
 	"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",
@@ -53,23 +53,20 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@ariakit/react": "^0.4.21",
-		"@wordpress/base-styles": "^6.16.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/components": "^32.3.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/compose": "^7.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/data": "^10.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/date": "^5.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/deprecated": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/dom": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/element": "^6.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/i18n": "^6.13.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/icons": "^11.7.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/keycodes": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/primitives": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/private-apis": "^1.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/theme": "^0.8.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/ui": "^0.7.2-next.v.202602241322.0+bce7cff88",
-		"@wordpress/url": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/warning": "^3.40.1-next.v.202602241322.0+bce7cff88",
+		"@wordpress/base-styles": "^6.17.0",
+		"@wordpress/components": "^32.3.0",
+		"@wordpress/compose": "^7.41.0",
+		"@wordpress/data": "^10.41.0",
+		"@wordpress/date": "^5.41.0",
+		"@wordpress/deprecated": "^4.41.0",
+		"@wordpress/element": "^6.41.0",
+		"@wordpress/i18n": "^6.14.0",
+		"@wordpress/icons": "^11.8.0",
+		"@wordpress/keycodes": "^4.41.0",
+		"@wordpress/primitives": "^4.41.0",
+		"@wordpress/private-apis": "^1.41.0",
+		"@wordpress/ui": "^0.8.0",
+		"@wordpress/warning": "^3.41.0",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -95,5 +92,5 @@
 	"scripts": {
 		"build:wp": "node build.cjs"
 	},
-	"gitHead": "943dde7f0b600ce238726c36284bc9f70ce0ffa4"
+	"gitHead": "8bfc179b9aed74c0a6dd6e8edf7a49e40e4f87cc"
 }

package/src/components/dataform-layouts/card/index.tsx

@@ -16,7 +16,6 @@ import {
 	useRef,
 	useState,
 } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
 import { chevronDown, chevronUp } from '@wordpress/icons';
 
 /**
@@ -99,10 +98,9 @@ export default function FormCardField< Item >( {
 	const { fields } = useContext( DataFormContext );
 	const layout = field.layout as NormalizedCardLayout;
 	const cardBodyRef = useRef< HTMLDivElement >( null );
-	const bodyId = useInstanceId(
-		FormCardField,
-		'dataforms-layouts-card-card-body'
-	);
+	const instanceId = useInstanceId( FormCardField );
+	const bodyId = `dataforms-layouts-card-card-body-${ instanceId }`;
+	const titleId = `dataforms-layouts-card-card-title-${ instanceId }`;
 
 	const form: NormalizedForm = useMemo(
 		() => ( {
@@ -240,7 +238,10 @@ export default function FormCardField< Item >( {
 							alignItems: 'center',
 						} }
 					>
-						<span className="dataforms-layouts-card__field-header-label">
+						<span
+							id={ titleId }
+							className="dataforms-layouts-card__field-header-label"
+						>
 							{ label }
 						</span>
 						{ validationBadge }
@@ -266,9 +267,7 @@ export default function FormCardField< Item >( {
 							icon={ isOpen ? chevronUp : chevronDown }
 							aria-expanded={ isOpen }
 							aria-controls={ bodyId }
-							aria-label={
-								isOpen ? __( 'Collapse' ) : __( 'Expand' )
-							}
+							aria-labelledby={ titleId }
 						/>
 					) }
 				</OriginalCardHeader>

package/src/components/dataform-layouts/card/style.scss

@@ -21,4 +21,5 @@
 	display: flex;
 	flex-direction: row;
 	gap: $grid-unit-20;
+	align-items: center;
 }

package/src/components/dataform-layouts/panel/style.scss

@@ -92,6 +92,7 @@
 	line-height: $grid-unit-05 * 5;
 	hyphens: auto;
 	color: $gray-700;
+	text-transform: capitalize;
 
 	.components-base-control__label {
 		display: inline;
@@ -126,6 +127,7 @@
 	display: flex;
 	align-items: center;
 	overflow: hidden;
+	word-break: break-word;
 	font-weight: var(--wpds-font-weight-medium);
 
 	> * {

package/src/components/dataform-layouts/panel/utils/get-label-content.tsx

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { BaseControl, Icon, Tooltip } from '@wordpress/components';
+import { Icon, Tooltip } from '@wordpress/components';
 import { error as errorIcon } from '@wordpress/icons';
 
 function getLabelContent(
@@ -13,13 +13,11 @@ function getLabelContent(
 		<Tooltip text={ errorMessage } placement="top">
 			<span className="dataforms-layouts-panel__field-label-error-content">
 				<Icon icon={ errorIcon } size={ 16 } />
-				<BaseControl.VisualLabel>
-					{ fieldLabel }
-				</BaseControl.VisualLabel>
+				{ fieldLabel }
 			</span>
 		</Tooltip>
 	) : (
-		<BaseControl.VisualLabel>{ fieldLabel }</BaseControl.VisualLabel>
+		fieldLabel
 	);
 }
 

package/src/components/dataform-layouts/regular/style.scss

@@ -8,8 +8,9 @@
 	align-items: flex-start !important;
 
 	.components-base-control__label,
-	.components-input-control__label {
-		color: $gray-700;
+	.components-input-control__label,
+	.components-form-token-field__label {
+		color: $gray-900;
 	}
 }
 

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

@@ -56,6 +56,7 @@ type DataViewsContextType< Item > = {
 	setIsShowingFilter: ( value: boolean ) => void;
 	config: { perPageSizes: number[] };
 	empty?: ReactNode;
+	hasInitiallyLoaded?: boolean;
 	hasInfiniteScrollHandler: boolean;
 	itemListLabel?: string;
 	onReset?: ( () => void ) | false;
@@ -84,6 +85,7 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	filters: [],
 	isShowingFilter: false,
 	setIsShowingFilter: () => {},
+	hasInitiallyLoaded: false,
 	hasInfiniteScrollHandler: false,
 	config: {
 		perPageSizes: [],

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

@@ -31,13 +31,13 @@ function FiltersToggle() {
 		},
 		[ onChangeView, setIsShowingFilter ]
 	);
-	const visibleFilters = filters.filter( ( filter ) => filter.isVisible );
 
-	const hasVisibleFilters = !! visibleFilters.length;
 	if ( filters.length === 0 ) {
 		return null;
 	}
 
+	const hasVisibleFilters = filters.some( ( filter ) => filter.isVisible );
+
 	const addFilterButtonProps = {
 		label: __( 'Add filter' ),
 		'aria-expanded': false,
@@ -54,12 +54,19 @@ function FiltersToggle() {
 			setIsShowingFilter( ! isShowingFilter );
 		},
 	};
+	// When there are primary or locked filters, the filter bar is always
+	// visible and cannot be hidden, so the toggle button should be disabled.
+	const hasPrimaryOrLockedFilters = filters.some(
+		( filter ) => filter.isPrimary || filter.isLocked
+	);
 	const buttonComponent = (
 		<Button
 			ref={ buttonRef }
 			className="dataviews-filters__visibility-toggle"
 			size="compact"
 			icon={ funnel }
+			disabled={ hasPrimaryOrLockedFilters }
+			accessibleWhenDisabled
 			{ ...( hasVisibleFilters
 				? toggleFiltersButtonProps
 				: addFilterButtonProps ) }

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -14,6 +19,7 @@ import {
 	useSomeItemHasAPossibleBulkAction,
 } from '../dataviews-bulk-actions';
 import { LAYOUT_GRID, LAYOUT_TABLE } from '../../constants';
+import { useDelayedLoading } from '../../hooks/use-delayed-loading';
 
 const EMPTY_ARRAY: [] = [];
 
@@ -23,30 +29,51 @@ export default function DataViewsFooter() {
 		paginationInfo: { totalItems = 0, totalPages },
 		data,
 		actions = EMPTY_ARRAY,
+		isLoading,
+		hasInitiallyLoaded,
+		hasInfiniteScrollHandler,
 	} = useContext( DataViewsContext );
+
+	const isRefreshing =
+		!! isLoading &&
+		hasInitiallyLoaded &&
+		! hasInfiniteScrollHandler &&
+		!! data?.length;
+
+	const isDelayedRefreshing = useDelayedLoading( !! isRefreshing );
+
 	const hasBulkActions =
 		useSomeItemHasAPossibleBulkAction( actions, data ) &&
 		[ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type );
 
 	if (
-		! totalItems ||
-		! totalPages ||
-		( totalPages <= 1 && ! hasBulkActions )
+		! isRefreshing &&
+		( ! totalItems ||
+			! totalPages ||
+			( totalPages <= 1 && ! hasBulkActions ) )
 	) {
 		return null;
 	}
 	return (
-		!! totalItems && (
-			<Stack
-				direction="row"
-				justify="end"
-				align="center"
+		( !! totalItems || isRefreshing ) && (
+			<div
 				className="dataviews-footer"
-				gap="sm"
+				// @ts-ignore
+				inert={ isRefreshing ? 'true' : undefined }
 			>
-				{ hasBulkActions && <BulkActionsFooter /> }
-				<DataViewsPagination />
-			</Stack>
+				<Stack
+					direction="row"
+					justify="end"
+					align="center"
+					className={ clsx( 'dataviews-footer__content', {
+						'is-refreshing': isDelayedRefreshing,
+					} ) }
+					gap="sm"
+				>
+					{ hasBulkActions && <BulkActionsFooter /> }
+					<DataViewsPagination />
+				</Stack>
+			</div>
 		)
 	);
 }

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

@@ -1,6 +1,7 @@
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/z-index" as *;
+@use "../../dataviews/style" as *;
 
 .dataviews-footer {
 	position: sticky;
@@ -16,10 +17,14 @@
 	}
 
 	z-index: z-index(".dataviews-footer");
+
+	.is-refreshing {
+		@include dataviews-refreshing();
+	}
 }
 
 @container (max-width: 560px) {
-	.dataviews-footer {
+	.dataviews-footer__content {
 		flex-direction: column !important;
 
 		.dataviews-bulk-actions-footer__container {

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

@@ -171,9 +171,6 @@ export function ActionsMenuGroup< Item >( {
 	return (
 		<Menu.Group>
 			{ renderActionGroup( primaryActions ) }
-			{ primaryActions.length > 0 && regularActions.length > 0 && (
-				<Menu.Separator />
-			) }
 			{ renderActionGroup( regularActions ) }
 		</Menu.Group>
 	);

package/src/components/dataviews-item-actions/style.scss

@@ -5,3 +5,10 @@
 .dataviews-action-modal {
 	z-index: z-index(".dataviews-action-modal");
 }
+
+// TODO: the way forward here would be to use the new unstyle button coming
+// from wordpress/ui package, but we're not ready to use it yet.
+// See https://github.com/WordPress/gutenberg/pull/75721/
+.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
+	padding: 0 $grid-unit-05;
+}

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

@@ -27,6 +27,7 @@ export default function DataViewsLayout( { className }: DataViewsLayoutProps ) {
 		fields,
 		getItemId,
 		getItemLevel,
+		hasInitiallyLoaded,
 		isLoading,
 		view,
 		onChangeView,
@@ -40,6 +41,10 @@ export default function DataViewsLayout( { className }: DataViewsLayoutProps ) {
 		empty = <p>{ __( 'No results' ) }</p>,
 	} = useContext( DataViewsContext );
 
+	if ( ! hasInitiallyLoaded ) {
+		return null;
+	}
+
 	const ViewComponent = VIEW_LAYOUTS.find(
 		( v ) => v.type === view.type && defaultLayouts[ v.type ]
 	)?.component as ComponentType< ViewBaseProps< any > >;

package/src/components/dataviews-layouts/activity/index.tsx

@@ -16,41 +16,40 @@ import type { ViewActivityProps } from '../../../types';
 import getDataByGroup from '../utils/get-data-by-group';
 import ActivityGroup from './activity-group';
 import ActivityItems from './activity-items';
+import { useDelayedLoading } from '../../../hooks/use-delayed-loading';
 
 export default function ViewActivity< Item >(
 	props: ViewActivityProps< Item >
 ) {
 	const { empty, data, fields, isLoading, view, className } = props;
 
-	// Handle empty/loading states
-	const hasData = data?.length;
+	const isDelayedLoading = useDelayedLoading( !! isLoading );
+	const hasData = !! data?.length;
+
+	// Check if data should be grouped
+	const groupField = view.groupBy?.field
+		? fields.find( ( field ) => field.id === view.groupBy?.field )
+		: null;
+	const dataByGroup =
+		hasData && groupField ? getDataByGroup( data, groupField ) : null;
+
+	const isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;
 	if ( ! hasData ) {
 		return (
 			<div
-				className={ clsx( {
-					'dataviews-loading': isLoading,
-					'dataviews-no-results': ! hasData && ! isLoading,
+				className={ clsx( 'dataviews-no-results', {
+					'is-refreshing': isDelayedLoading,
 				} ) }
 			>
-				{ ! hasData &&
-					( isLoading ? (
-						<p>
-							<Spinner />
-						</p>
-					) : (
-						empty
-					) ) }
+				{ empty }
 			</div>
 		);
 	}
 
-	const wrapperClassName = clsx( 'dataviews-view-activity', className );
-
-	// Check if data should be grouped
-	const groupField = view.groupBy?.field
-		? fields.find( ( field ) => field.id === view.groupBy?.field )
-		: null;
-	const dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;
+	const isInert = ! isInfiniteScroll && !! isLoading;
+	const wrapperClassName = clsx( 'dataviews-view-activity', className, {
+		'is-refreshing': ! isInfiniteScroll && isDelayedLoading,
+	} );
 
 	// Convert dataByGroup entries into array.
 	const groupedEntries = dataByGroup
@@ -60,7 +59,13 @@ export default function ViewActivity< Item >(
 	// Render grouped activity
 	if ( hasData && groupField && dataByGroup ) {
 		return (
-			<Stack direction="column" gap="sm" className={ wrapperClassName }>
+			<Stack
+				direction="column"
+				gap="sm"
+				className={ wrapperClassName }
+				// @ts-ignore
+				inert={ isInert ? 'true' : undefined }
+			>
 				{ groupedEntries.map(
 					( [ groupName, groupData ]: [ string, Item[] ] ) => (
 						<ActivityGroup< Item >
@@ -87,10 +92,12 @@ export default function ViewActivity< Item >(
 			<div
 				className={ wrapperClassName }
 				role={ view.infiniteScrollEnabled ? 'feed' : undefined }
+				// @ts-ignore
+				inert={ isInert ? 'true' : undefined }
 			>
 				<ActivityItems< Item > { ...props } />
 			</div>
-			{ hasData && isLoading && (
+			{ isInfiniteScroll && isLoading && (
 				<p className="dataviews-loading-more">
 					<Spinner />
 				</p>

package/src/components/dataviews-layouts/activity/style.scss

@@ -1,5 +1,6 @@
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
+@use "../../../dataviews/style" as *;
 
 .dataviews-view-activity {
 	margin: 0 0 auto;
@@ -211,6 +212,10 @@
 		}
 	}
 
+	&.is-refreshing {
+		@include dataviews-refreshing();
+	}
+
 	& + .dataviews-pagination {
 		justify-content: space-between;
 	}

package/src/components/dataviews-layouts/grid/composite-grid.tsx

@@ -293,6 +293,7 @@ interface CompositeGridProps< Item > {
 	data: Item[];
 	isInfiniteScroll: boolean;
 	className?: string;
+	inert?: string;
 	isLoading?: boolean;
 	view: ViewGridType;
 	fields: NormalizedField< Item >[];
@@ -313,6 +314,7 @@ export default function CompositeGrid< Item >( {
 	data,
 	isInfiniteScroll,
 	className,
+	inert,
 	isLoading,
 	view,
 	fields,
@@ -375,6 +377,8 @@ export default function CompositeGrid< Item >( {
 			aria-busy={ isLoading }
 			aria-rowcount={ isInfiniteScroll ? undefined : totalRows }
 			ref={ resizeObserverRef }
+			// @ts-ignore
+			inert={ inert }
 		>
 			{ chunk( data, gridColumns ).map( ( row, i ) => (
 				<Composite.Row

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

@@ -16,6 +16,7 @@ import { Stack } from '@wordpress/ui';
 import type { ViewGridProps } from '../../../types';
 import getDataByGroup from '../utils/get-data-by-group';
 import CompositeGrid from './composite-grid';
+import { useDelayedLoading } from '../../../hooks/use-delayed-loading';
 
 function ViewGrid< Item >( {
 	actions,
@@ -32,14 +33,29 @@ function ViewGrid< Item >( {
 	className,
 	empty,
 }: ViewGridProps< Item > ) {
+	const isDelayedLoading = useDelayedLoading( !! isLoading );
 	const hasData = !! data?.length;
 	const groupField = view.groupBy?.field
 		? fields.find( ( f ) => f.id === view.groupBy?.field )
 		: null;
 	const dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;
 	const isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;
+	if ( ! hasData ) {
+		return (
+			<div
+				className={ clsx( 'dataviews-no-results', {
+					'is-refreshing': isDelayedLoading,
+				} ) }
+			>
+				{ empty }
+			</div>
+		);
+	}
 	const gridProps = {
-		className,
+		className: clsx( className, {
+			'is-refreshing': ! isInfiniteScroll && isDelayedLoading,
+		} ),
+		inert: ! isInfiniteScroll && !! isLoading ? 'true' : undefined,
 		isLoading,
 		view,
 		fields,
@@ -87,7 +103,7 @@ function ViewGrid< Item >( {
 			}
 			{
 				// Render a single grid with all data.
-				hasData && ! dataByGroup && (
+				! dataByGroup && (
 					<CompositeGrid
 						{ ...gridProps }
 						data={ data }
@@ -95,26 +111,7 @@ function ViewGrid< Item >( {
 					/>
 				)
 			}
-			{
-				// Render empty state.
-				! hasData && (
-					<div
-						className={ clsx( {
-							'dataviews-loading': isLoading,
-							'dataviews-no-results': ! isLoading,
-						} ) }
-					>
-						{ isLoading ? (
-							<p>
-								<Spinner />
-							</p>
-						) : (
-							empty
-						) }
-					</div>
-				)
-			}
-			{ hasData && isLoading && (
+			{ isInfiniteScroll && isLoading && (
 				<p className="dataviews-loading-more">
 					<Spinner />
 				</p>

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

@@ -3,6 +3,7 @@
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/z-index" as *;
 @use "../utils/grid-items.scss" as *;
+@use "../../../dataviews/style" as *;
 
 .dataviews-view-grid {
 	padding: 0 $grid-unit-30 $grid-unit-30;
@@ -164,6 +165,10 @@
 			padding-bottom: $grid-unit-15;
 		}
 	}
+
+	&.is-refreshing {
+		@include dataviews-refreshing();
+	}
 }
 
 .dataviews-view-grid__field-value:empty,