@wordpress/dataviews 16.0.1 → 17.0.1-next.v.202606191442.0

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

@@ -22,7 +22,10 @@ export function useIsMultiselectPicker< Item >(
 	actions: Action< Item >[] | undefined
 ) {
 	return useMemo( () => {
-		return actions?.every( ( action ) => action.supportsBulk );
+		return (
+			!! actions?.length &&
+			actions?.every( ( action ) => action.supportsBulk )
+		);
 	}, [ actions ] );
 }
 
@@ -145,7 +148,7 @@ function ActionButtons< Item >( {
 	);
 }
 
-export function DataViewsPickerFooter() {
+function PickerBulkSelectionInfo() {
 	const {
 		data,
 		selection,
@@ -158,6 +161,17 @@ export function DataViewsPickerFooter() {
 
 	const isMultiselect = useIsMultiselectPicker( actions );
 
+	const selectedItems = useMemo(
+		() =>
+			data.filter( ( item ) => selection.includes( getItemId( item ) ) ),
+		[ selection, getItemId, data ]
+	);
+
+	// The count and the selection checkbox belong with the actions, mirroring `DataViews`.
+	if ( ! actions.length ) {
+		return null;
+	}
+
 	const message = getFooterMessage(
 		selection.length,
 		data.length,
@@ -165,12 +179,88 @@ export function DataViewsPickerFooter() {
 		!! view.infiniteScrollEnabled
 	);
 
+	return (
+		<Stack
+			direction="row"
+			className="dataviews-picker-footer__bulk-selection"
+			gap="md"
+			align="center"
+		>
+			{ isMultiselect && (
+				<BulkSelectionCheckbox
+					selection={ selection }
+					selectedItems={ selectedItems }
+					onChangeSelection={ onChangeSelection }
+					data={ data }
+					getItemId={ getItemId }
+					disableSelectAll={ !! view.infiniteScrollEnabled }
+				/>
+			) }
+			<span className="dataviews-bulk-actions-footer__item-count">
+				{ message }
+			</span>
+		</Stack>
+	);
+}
+
+function PickerActions() {
+	const {
+		data,
+		selection,
+		getItemId,
+		actions = EMPTY_ARRAY,
+	} = useContext( DataViewsContext );
+
 	const selectedItems = useMemo(
 		() =>
 			data.filter( ( item ) => selection.includes( getItemId( item ) ) ),
 		[ selection, getItemId, data ]
 	);
 
+	if ( ! actions.length ) {
+		return null;
+	}
+
+	return (
+		<div className="dataviews-picker-footer__actions">
+			<ActionButtons
+				actions={ actions }
+				items={ selectedItems }
+				selection={ selection }
+			/>
+		</div>
+	);
+}
+
+// The bulk-selection info and action buttons without pagination — the picker
+// counterpart to `DataViews.BulkActionToolbar`, for free composition.
+export function DataViewsPickerBulkActionToolbar() {
+	return (
+		<Stack direction="row" gap="md" align="center">
+			<PickerBulkSelectionInfo />
+			<PickerActions />
+		</Stack>
+	);
+}
+
+// The full picker footer: bulk-selection info, pagination, and actions — the
+// picker counterpart to `DataViews.Footer`.
+export function DataViewsPickerFooter() {
+	const {
+		actions = EMPTY_ARRAY,
+		paginationInfo,
+		view,
+	} = useContext( DataViewsContext );
+
+	const hasPagination =
+		! view.infiniteScrollEnabled &&
+		!! paginationInfo.totalItems &&
+		paginationInfo.totalPages > 1;
+
+	if ( ! actions.length && ! hasPagination ) {
+		return null;
+	}
+
 	return (
 		<Stack
 			direction="row"
@@ -179,36 +269,9 @@ export function DataViewsPickerFooter() {
 			className="dataviews-footer"
 			gap="sm"
 		>
-			<Stack
-				direction="row"
-				className="dataviews-picker-footer__bulk-selection"
-				gap="md"
-				align="center"
-			>
-				{ isMultiselect && (
-					<BulkSelectionCheckbox
-						selection={ selection }
-						selectedItems={ selectedItems }
-						onChangeSelection={ onChangeSelection }
-						data={ data }
-						getItemId={ getItemId }
-						disableSelectAll={ !! view.infiniteScrollEnabled }
-					/>
-				) }
-				<span className="dataviews-bulk-actions-footer__item-count">
-					{ message }
-				</span>
-			</Stack>
+			<PickerBulkSelectionInfo />
 			<DataViewsPagination />
-			{ Boolean( actions?.length ) && (
-				<div className="dataviews-picker-footer__actions">
-					<ActionButtons
-						actions={ actions }
-						items={ selectedItems }
-						selection={ selection }
-					/>
-				</div>
-			) }
+			<PickerActions />
 		</Stack>
 	);
 }

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

@@ -3,7 +3,7 @@
 // - align footer actions to the right.
 .dataviews-picker-footer__bulk-selection {
 	align-self: flex-start;
-	height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+	height: var(--wpds-dimension-size-md);
 }
 .dataviews-picker-footer__actions {
 	align-self: flex-end;

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

@@ -75,7 +75,7 @@
 	right: var(--wpds-dimension-gap-xs);
 	width: var(--wpds-dimension-gap-xs);
 	height: var(--wpds-dimension-gap-xs);
-	background: var(--wpds-color-bg-interactive-brand-strong);
+	background: var(--wpds-color-background-interactive-brand-strong);
 	border-radius: 50%;
 	pointer-events: none;
 }

package/src/dataviews/style.scss

@@ -23,7 +23,7 @@
 	flex-direction: column;
 	font-size: var(--wpds-typography-font-size-md);
 	line-height: var(--wpds-typography-line-height-sm);
-	background-color: var(--wp-dataviews-color-background, var(--wpds-color-bg-surface-neutral-strong));
+	background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong));
 }
 
 .dataviews__view-actions,
@@ -82,7 +82,7 @@
 .dataviews-title-field {
 	font-size: var(--wpds-typography-font-size-md);
 	font-weight: var(--wpds-typography-font-weight-medium);
-	color: var(--wpds-color-fg-content-neutral);
+	color: var(--wpds-color-foreground-content-neutral);
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	width: 100%;
@@ -94,10 +94,10 @@
 		overflow: hidden;
 		display: block;
 		flex-grow: 0;
-		color: var(--wpds-color-fg-interactive-neutral);
+		color: var(--wpds-color-foreground-interactive-neutral);
 
 		&:hover {
-			color: var(--wpds-color-fg-interactive-brand);
+			color: var(--wpds-color-foreground-interactive-brand);
 		}
 		@include link-reset();
 	}
@@ -110,18 +110,18 @@
 		overflow: hidden;
 		display: block;
 		width: 100%;
-		color: var(--wpds-color-fg-interactive-neutral-active);
+		color: var(--wpds-color-foreground-interactive-neutral-active);
 		&:hover {
-			color: var(--wpds-color-fg-interactive-brand);
+			color: var(--wpds-color-foreground-interactive-brand);
 		}
 	}
 }
 
 .dataviews-title-field--clickable {
 	cursor: var(--wpds-cursor-control);
-	color: var(--wpds-color-fg-interactive-neutral);
+	color: var(--wpds-color-foreground-interactive-neutral);
 	&:hover {
-		color: var(--wpds-color-fg-interactive-brand);
+		color: var(--wpds-color-foreground-interactive-brand);
 	}
 	@include link-reset();
 }

package/src/dataviews-picker/index.tsx

@@ -29,7 +29,10 @@ import {
 	FiltersToggle,
 } from '../components/dataviews-filters';
 import DataViewsLayout from '../components/dataviews-layout';
-import { DataViewsPickerFooter } from '../components/dataviews-picker-footer';
+import {
+	DataViewsPickerFooter,
+	DataViewsPickerBulkActionToolbar,
+} from '../components/dataviews-picker-footer';
 import DataViewsSearch from '../components/dataviews-search';
 import { DataViewsPagination } from '../components/dataviews-pagination';
 import DataViewsViewConfig, {
@@ -269,7 +272,8 @@ function DataViewsPicker< Item >( {
 // Populate the DataViews sub components
 const DataViewsPickerSubComponents =
 	DataViewsPicker as typeof DataViewsPicker & {
-		BulkActionToolbar: typeof DataViewsPickerFooter;
+		BulkActionToolbar: typeof DataViewsPickerBulkActionToolbar;
+		Footer: typeof DataViewsPickerFooter;
 		Filters: typeof Filters;
 		FiltersToggled: typeof FiltersToggled;
 		FiltersToggle: typeof FiltersToggle;
@@ -280,7 +284,9 @@ const DataViewsPickerSubComponents =
 		ViewConfig: typeof DataviewsViewConfigDropdown;
 	};
 
-DataViewsPickerSubComponents.BulkActionToolbar = DataViewsPickerFooter;
+DataViewsPickerSubComponents.BulkActionToolbar =
+	DataViewsPickerBulkActionToolbar;
+DataViewsPickerSubComponents.Footer = DataViewsPickerFooter;
 DataViewsPickerSubComponents.Filters = Filters;
 DataViewsPickerSubComponents.FiltersToggled = FiltersToggled;
 DataViewsPickerSubComponents.FiltersToggle = FiltersToggle;