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

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

@@ -27,7 +27,7 @@
 		align-items: center;
 	}
 
-	&:not([aria-disabled="true"]):hover {
+	&:not(.is-disabled):hover {
 		color: var(--wp-admin-theme-color);
 
 		.dataforms-layouts-panel__field-trigger-icon {
@@ -39,7 +39,7 @@
 		}
 	}
 
-	&[aria-disabled="true"] {
+	&.is-disabled {
 		cursor: default;
 
 		.dataforms-layouts-panel__field-control {
@@ -49,29 +49,29 @@
 	}
 }
 
+.dataforms-layouts-panel__field-trigger--edit-always
+.dataforms-layouts-panel__field-trigger-icon {
+	opacity: 1;
+	fill: currentColor;
+
+	&:hover,
+	&:focus-visible {
+		fill: var(--wp-admin-theme-color);
+	}
+}
+
 .dataforms-layouts-panel__field-trigger-icon {
-	appearance: none;
-	background: none;
-	border: none;
 	padding: 0;
-	margin: 0;
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	fill: var(--wp-admin-theme-color);
+	color: var(--wp-admin-theme-color);
 	flex: 0 0 auto;
 	opacity: 0;
 	border-radius: var(--wpds-border-radius-xs);
 
-	&::after {
-		content: "";
-		position: absolute;
-		inset: 0;
-	}
-
 	&:focus-visible {
 		opacity: 1;
-		outline: var(--wpds-border-width-focus) solid var(--wp-admin-theme-color);
+		outline:
+			var(--wpds-border-width-focus) solid
+			var(--wp-admin-theme-color);
 	}
 }
 
@@ -92,6 +92,7 @@
 	line-height: $grid-unit-05 * 5;
 	hyphens: auto;
 	color: $gray-700;
+	text-transform: capitalize;
 
 	.components-base-control__label {
 		display: inline;
@@ -133,15 +134,18 @@
 	}
 }
 
-.dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-label {
+.dataforms-layouts-panel__field-trigger--label-top
+.dataforms-layouts-panel__field-label {
 	width: 100%;
 }
 
-.dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-control {
+.dataforms-layouts-panel__field-trigger--label-top
+.dataforms-layouts-panel__field-control {
 	grid-column: 1 / -1;
 }
 
-.dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-trigger-icon {
+.dataforms-layouts-panel__field-trigger--label-top
+.dataforms-layouts-panel__field-trigger-icon {
 	grid-row: 1;
 	grid-column: 2;
 }

package/src/components/dataform-layouts/panel/summary-button.tsx

@@ -6,10 +6,11 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { Icon, Tooltip } from '@wordpress/components';
+import { Button, Icon, Tooltip } from '@wordpress/components';
 import { sprintf, _x } from '@wordpress/i18n';
 import { error as errorIcon, pencil } from '@wordpress/icons';
 import { useInstanceId } from '@wordpress/compose';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -45,15 +46,20 @@ export default function SummaryButton< Item >( {
 	onClick: () => void;
 	'aria-expanded'?: boolean;
 } ) {
-	const labelPosition = ( field.layout as NormalizedPanelLayout )
-		.labelPosition;
+	const { labelPosition, editVisibility } =
+		field.layout as NormalizedPanelLayout;
 	const errorMessage = getFirstValidationError( validity );
 	const showError = touched && !! errorMessage;
 	const labelClassName = getLabelClassName( labelPosition, showError );
 	const labelContent = getLabelContent( showError, errorMessage, fieldLabel );
 	const className = clsx(
 		'dataforms-layouts-panel__field-trigger',
-		`dataforms-layouts-panel__field-trigger--label-${ labelPosition }`
+		`dataforms-layouts-panel__field-trigger--label-${ labelPosition }`,
+		{
+			'is-disabled': disabled,
+			'dataforms-layouts-panel__field-trigger--edit-always':
+				editVisibility === 'always',
+		}
 	);
 
 	const controlId = useInstanceId(
@@ -73,8 +79,34 @@ export default function SummaryButton< Item >( {
 				fieldLabel || ''
 		  );
 
+	const rowRef = useRef< HTMLDivElement >( null );
+
+	const handleRowClick = () => {
+		const selection =
+			rowRef.current?.ownerDocument.defaultView?.getSelection();
+		if ( selection && selection.toString().length > 0 ) {
+			return;
+		}
+		onClick();
+	};
+
+	const handleKeyDown = ( event: React.KeyboardEvent ) => {
+		if (
+			event.target === event.currentTarget &&
+			( event.key === 'Enter' || event.key === ' ' )
+		) {
+			event.preventDefault();
+			onClick();
+		}
+	};
+
 	return (
-		<div className={ className } aria-disabled={ disabled || undefined }>
+		<div
+			ref={ rowRef }
+			className={ className }
+			onClick={ ! disabled ? handleRowClick : undefined }
+			onKeyDown={ ! disabled ? handleKeyDown : undefined }
+		>
 			{ labelPosition !== 'none' && (
 				<span className={ labelClassName }>{ labelContent }</span>
 			) }
@@ -122,17 +154,16 @@ export default function SummaryButton< Item >( {
 				) }
 			</span>
 			{ ! disabled && (
-				<button
-					type="button"
+				<Button
 					className="dataforms-layouts-panel__field-trigger-icon"
-					aria-label={ ariaLabel }
+					label={ ariaLabel }
+					showTooltip={ false }
+					icon={ pencil }
+					size="small"
 					aria-expanded={ ariaExpanded }
 					aria-haspopup="dialog"
 					aria-describedby={ `${ controlId }` }
-					onClick={ onClick }
-				>
-					<Icon icon={ pencil } size={ 24 } />
-				</button>
+				/>
 			) }
 		</div>
 	);

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/dataform-layouts/test/normalize-form.ts

@@ -139,6 +139,7 @@ describe( 'normalizeFormFields', () => {
 					type: 'panel',
 					openAs: 'dropdown',
 					summary: [],
+					editVisibility: 'on-hover',
 				},
 				fields: [
 					{
@@ -148,6 +149,7 @@ describe( 'normalizeFormFields', () => {
 							labelPosition: 'side',
 							openAs: 'dropdown',
 							summary: [],
+							editVisibility: 'on-hover',
 						},
 					},
 				],
@@ -166,6 +168,7 @@ describe( 'normalizeFormFields', () => {
 					type: 'panel',
 					openAs: 'dropdown',
 					summary: [],
+					editVisibility: 'on-hover',
 				},
 				fields: [
 					{
@@ -175,6 +178,7 @@ describe( 'normalizeFormFields', () => {
 							labelPosition: 'top',
 							openAs: 'dropdown',
 							summary: [],
+							editVisibility: 'on-hover',
 						},
 					},
 				],
@@ -358,6 +362,7 @@ describe( 'normalizeFormFields', () => {
 							labelPosition: 'side',
 							openAs: 'dropdown',
 							summary: [],
+							editVisibility: 'on-hover',
 						},
 					},
 				],

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

@@ -320,7 +320,7 @@ function FooterContent< Item >( {
 	const [ actionInProgress, setActionInProgress ] = useState< string | null >(
 		null
 	);
-	const footerContentRef = useRef< JSX.Element | null >( null );
+	const footerContentRef = useRef< React.JSX.Element >( undefined );
 	const isMobile = useViewportMatch( 'medium', '<' );
 
 	const bulkActions = useMemo(
@@ -359,7 +359,7 @@ function FooterContent< Item >( {
 	);
 	if ( ! actionInProgress ) {
 		if ( footerContentRef.current ) {
-			footerContentRef.current = null;
+			footerContentRef.current = undefined;
 		}
 		return renderFooterContent(
 			data,

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/filter.tsx

@@ -51,7 +51,7 @@ interface OperatorSelectorProps {
 }
 
 interface FilterProps extends OperatorSelectorProps {
-	addFilterRef: RefObject< HTMLButtonElement >;
+	addFilterRef: RefObject< HTMLButtonElement | null >;
 	openedFilter: string | null;
 	fields: NormalizedField< any >[];
 }

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