@wordpress/dataviews 12.0.1-next.v.202602091733.0 → 12.0.1

package/src/components/dataviews-filters/search-widget.tsx

@@ -206,7 +206,12 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 							selected={ currentValue.includes( element.value ) }
 						/>
 					) }
-					<span>{ element.label }</span>
+					<span
+						className="dataviews-filters__search-widget-listitem-value"
+						title={ element.label }
+					>
+						{ element.label }
+					</span>
 				</Composite.Hover>
 			) ) }
 		</Composite>
@@ -307,7 +312,10 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 									) }
 								/>
 							) }
-							<span>
+							<span
+								className="dataviews-filters__search-widget-listitem-value"
+								title={ element.label }
+							>
 								<Ariakit.ComboboxItemValue
 									className="dataviews-filters__search-widget-filter-combobox-item-value"
 									value={ element.label }

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

@@ -231,6 +231,13 @@
 		}
 	}
 
+	.dataviews-filters__search-widget-listitem-value {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+	}
+
 	.dataviews-filters__search-widget-listitem-description {
 		display: block;
 		overflow: hidden;
@@ -275,6 +282,7 @@
 
 	.dataviews-filters__search-widget-listitem-multi-selection {
 		--checkbox-size: 24px; // Width & height for small viewports.
+		flex-shrink: 0;
 
 		@include checkbox-control;
 		position: relative;

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 ) }
@@ -92,7 +99,7 @@ function FilterVisibilityToggle( {
 	filtersCount,
 	children,
 }: {
-	buttonRef: React.RefObject< HTMLButtonElement >;
+	buttonRef: React.RefObject< HTMLButtonElement | null >;
 	filtersCount?: number;
 	children: React.ReactNode;
 } ) {

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

@@ -7,6 +7,7 @@ import type { ComponentType } from 'react';
  * WordPress dependencies
  */
 import { useContext } from '@wordpress/element';
+import { Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -14,6 +15,7 @@ import { __ } from '@wordpress/i18n';
  */
 import DataViewsContext from '../dataviews-context';
 import { VIEW_LAYOUTS } from '../dataviews-layouts';
+import { useDelayedLoading } from '../../hooks/use-delayed-loading';
 import type { ViewBaseProps } from '../../types';
 
 type DataViewsLayoutProps = {
@@ -27,6 +29,7 @@ export default function DataViewsLayout( { className }: DataViewsLayoutProps ) {
 		fields,
 		getItemId,
 		getItemLevel,
+		hasInitiallyLoaded,
 		isLoading,
 		view,
 		onChangeView,
@@ -40,6 +43,27 @@ export default function DataViewsLayout( { className }: DataViewsLayoutProps ) {
 		empty = <p>{ __( 'No results' ) }</p>,
 	} = useContext( DataViewsContext );
 
+	const isDelayedInitialLoading = useDelayedLoading( ! hasInitiallyLoaded, {
+		delay: 200,
+	} );
+	// Until the initial data load completes, show a spinner (or nothing if fast).
+	// After that, render the layout component which preserves previous data
+	// while loading subsequent requests.
+	if ( ! hasInitiallyLoaded ) {
+		// If the initial data load is fast, don't show the loading state at all.
+		if ( ! isDelayedInitialLoading ) {
+			return null;
+		}
+		// If the initial data load takes more than 200ms, show the loading state.
+		return (
+			<div className="dataviews-loading">
+				<p>
+					<Spinner />
+				</p>
+			</div>
+		);
+	}
+
 	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

@@ -287,12 +287,13 @@ const GridItem = forwardRef( function GridItem< Item >(
 	props: GridItemProps< Item > & {
 		ref?: React.ForwardedRef< HTMLDivElement >;
 	}
-) => JSX.Element;
+) => React.ReactNode;
 
 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,

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

@@ -33,6 +33,7 @@ import { Stack } from '@wordpress/ui';
 import { unlock } from '../../../lock-unlock';
 import { ActionsMenuGroup, ActionModal } from '../../dataviews-item-actions';
 import DataViewsContext from '../../dataviews-context';
+import { useDelayedLoading } from '../../../hooks/use-delayed-loading';
 import type {
 	Action,
 	NormalizedField,
@@ -389,6 +390,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 		empty,
 	} = props;
 	const baseId = useInstanceId( ViewList, 'view-list' );
+	const isDelayedLoading = useDelayedLoading( !! isLoading );
 
 	const selectedItem = data?.findLast( ( item ) =>
 		selection.includes( getItemId( item ) )
@@ -511,32 +513,25 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 		[ selectCompositeItem, activeItemIndex ]
 	);
 
-	const hasData = data?.length;
+	const hasData = !! data?.length;
+	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 groupField = view.groupBy?.field
-		? fields.find( ( field ) => field.id === view.groupBy?.field )
-		: null;
-	const dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;
-
 	// Render data grouped by field
 	if ( hasData && groupField && dataByGroup ) {
 		return (
@@ -614,10 +609,15 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 						[ 'compact', 'comfortable' ].includes(
 							view.layout.density
 						),
+					'is-refreshing': ! isInfiniteScroll && isDelayedLoading,
 				} ) }
 				role={ view.infiniteScrollEnabled ? 'feed' : 'grid' }
 				activeId={ activeCompositeId }
 				setActiveId={ setActiveCompositeId }
+				// @ts-ignore
+				inert={
+					! isInfiniteScroll && !! isLoading ? 'true' : undefined
+				}
 			>
 				{ data.map( ( item, index ) => {
 					const id = generateCompositeItemIdPrefix( item );
@@ -646,7 +646,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 					);
 				} ) }
 			</Composite>
-			{ hasData && isLoading && (
+			{ isInfiniteScroll && isLoading && (
 				<p className="dataviews-loading-more">
 					<Spinner />
 				</p>

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

@@ -1,5 +1,6 @@
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
+@use "../../../dataviews/style" as *;
 
 div.dataviews-view-list {
 	list-style-type: none;
@@ -271,6 +272,10 @@ div.dataviews-view-list {
 			}
 		}
 	}
+
+	&.is-refreshing {
+		@include dataviews-refreshing();
+	}
 }
 
 .dataviews-view-list__group-header {

package/src/components/dataviews-layouts/picker-table/index.tsx

@@ -224,7 +224,7 @@ function ViewPickerTable< Item >( {
 	const headerMenuRefs = useRef<
 		Map< string, { node: HTMLButtonElement; fallback: string } >
 	>( new Map() );
-	const headerMenuToFocusRef = useRef< HTMLButtonElement >();
+	const headerMenuToFocusRef = useRef< HTMLButtonElement >( undefined );
 	const [ nextHeaderMenuToFocus, setNextHeaderMenuToFocus ] =
 		useState< HTMLButtonElement >();
 	const isMultiselect = useIsMultiselectPicker( actions ) ?? false;