@wordpress/dataviews 4.1.0 → 4.3.0

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

@@ -8,6 +8,7 @@ import removeAccents from 'remove-accents';
 /**
  * WordPress dependencies
  */
+import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { useState, useMemo, useDeferredValue } from '@wordpress/element';
 import {
@@ -27,7 +28,8 @@ import type { Filter, NormalizedFilter, View } from '../../types';
 const {
 	CompositeV2: Composite,
 	CompositeItemV2: CompositeItem,
-	useCompositeStoreV2: useCompositeStore,
+	CompositeHoverV2: CompositeHover,
+	CompositeTypeaheadV2: CompositeTypeahead,
 } = unlock( componentsPrivateApis );
 
 interface SearchWidgetProps {
@@ -84,22 +86,37 @@ const getNewValue = (
 	return [ value ];
 };
 
+function generateFilterElementCompositeItemId(
+	prefix: string,
+	filterElementValue: string
+) {
+	return `${ prefix }-${ filterElementValue }`;
+}
+
 function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
-	const compositeStore = useCompositeStore( {
-		virtualFocus: true,
-		focusLoop: true,
-		// When we have no or just one operator, we can set the first item as active.
-		// We do that by passing `undefined` to `defaultActiveId`. Otherwise, we set it to `null`,
-		// so the first item is not selected, since the focus is on the operators control.
-		defaultActiveId: filter.operators?.length === 1 ? undefined : null,
-	} );
+	const baseId = useInstanceId( ListBox, 'dataviews-filter-list-box' );
+
+	const [ activeCompositeId, setActiveCompositeId ] = useState<
+		string | null | undefined
+	>(
+		// When there are one or less operators, the first item is set as active
+		// (by setting the initial `activeId` to `undefined`).
+		// With 2 or more operators, the focus is moved on the operators control
+		// (by setting the initial `activeId` to `null`), meaning that there won't
+		// be an active item initially. Focus is then managed via the
+		// `onFocusVisible` callback.
+		filter.operators?.length === 1 ? undefined : null
+	);
 	const currentFilter = view.filters?.find(
 		( f ) => f.field === filter.field
 	);
 	const currentValue = getCurrentValue( filter, currentFilter );
 	return (
 		<Composite
-			store={ compositeStore }
+			virtualFocus
+			focusLoop
+			activeId={ activeCompositeId }
+			setActiveId={ setActiveCompositeId }
 			role="listbox"
 			className="dataviews-filters__search-widget-listbox"
 			aria-label={ sprintf(
@@ -108,18 +125,29 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 				filter.name
 			) }
 			onFocusVisible={ () => {
-				if ( ! compositeStore.getState().activeId ) {
-					compositeStore.move( compositeStore.first() );
+				// `onFocusVisible` needs the `Composite` component to be focusable,
+				// which is implicitly achieved via the `virtualFocus: true` option
+				// in the `useCompositeStore` hook.
+				if ( ! activeCompositeId && filter.elements.length ) {
+					setActiveCompositeId(
+						generateFilterElementCompositeItemId(
+							baseId,
+							filter.elements[ 0 ].value
+						)
+					);
 				}
 			} }
-			render={ <Ariakit.CompositeTypeahead store={ compositeStore } /> }
+			render={ <CompositeTypeahead /> }
 		>
 			{ filter.elements.map( ( element ) => (
-				<Ariakit.CompositeHover
-					store={ compositeStore }
+				<CompositeHover
 					key={ element.value }
 					render={
 						<CompositeItem
+							id={ generateFilterElementCompositeItemId(
+								baseId,
+								element.value
+							) }
 							render={
 								<div
 									aria-label={ element.label }
@@ -184,15 +212,8 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 								<Icon icon={ check } />
 							) }
 					</span>
-					<span>
-						{ element.label }
-						{ !! element.description && (
-							<span className="dataviews-filters__search-widget-listitem-description">
-								{ element.description }
-							</span>
-						) }
-					</span>
-				</Ariakit.CompositeHover>
+					<span>{ element.label }</span>
+				</CompositeHover>
 			) ) }
 		</Composite>
 	);
@@ -213,7 +234,6 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 	}, [ filter.elements, deferredSearchValue ] );
 	return (
 		<Ariakit.ComboboxProvider
-			resetValueOnSelect={ false }
 			selectedValue={ currentValue }
 			setSelectedValue={ ( value ) => {
 				const newFilters = currentFilter
@@ -273,6 +293,7 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 				{ matches.map( ( element ) => {
 					return (
 						<Ariakit.ComboboxItem
+							resetValueOnSelect={ false }
 							key={ element.value }
 							value={ element.value }
 							className="dataviews-filters__search-widget-listitem"

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

@@ -18,11 +18,19 @@
 }
 
 .dataviews-filters__summary-popover {
+	font-size: $default-font-size;
+	line-height: $default-line-height;
+
 	.components-popover__content {
 		width: 230px;
-		padding: 0;
 		border-radius: $grid-unit-05;
 	}
+
+	&.components-dropdown__content {
+		.components-popover__content {
+			padding: 0;
+		}
+	}
 }
 
 .dataviews-filters__summary-operators-container {
@@ -48,7 +56,7 @@
 
 	.dataviews-filters__summary-chip {
 		border-radius: $grid-unit-20;
-		border: 1px solid transparent;
+		border: $border-width solid transparent;
 		cursor: pointer;
 		padding: $grid-unit-05 $grid-unit-15;
 		min-height: $grid-unit-40;
@@ -57,6 +65,7 @@
 		position: relative;
 		display: flex;
 		align-items: center;
+		box-sizing: border-box;
 
 		&.has-reset {
 			padding-inline-end: $button-size-small + $grid-unit-05;
@@ -160,7 +169,7 @@
 	display: flex;
 	align-items: center;
 	gap: $grid-unit-10;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	box-sizing: border-box;
 	padding: $grid-unit-10 $grid-unit-15;
 	cursor: default;
@@ -275,6 +284,7 @@
 	font-size: 11px;
 	outline: var(--wp-admin-border-width-focus) solid $white;
 	color: $white;
+	box-sizing: border-box;
 }
 
 .dataviews-search {

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

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../dataviews-context';
+import DataViewsPagination from '../dataviews-pagination';
+import {
+	BulkActionsFooter,
+	useSomeItemHasAPossibleBulkAction,
+} from '../dataviews-bulk-actions';
+import { LAYOUT_GRID, LAYOUT_TABLE } from '../../constants';
+
+const EMPTY_ARRAY: [] = [];
+
+export default function DataViewsFooter() {
+	const {
+		view,
+		paginationInfo: { totalItems = 0, totalPages },
+		data,
+		actions = EMPTY_ARRAY,
+	} = useContext( DataViewsContext );
+	const hasBulkActions =
+		useSomeItemHasAPossibleBulkAction( actions, data ) &&
+		[ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type );
+
+	if (
+		! totalItems ||
+		! totalPages ||
+		( totalPages <= 1 && ! hasBulkActions )
+	) {
+		return null;
+	}
+	return (
+		!! totalItems && (
+			<HStack
+				expanded={ false }
+				justify="end"
+				className="dataviews-footer"
+			>
+				{ hasBulkActions && <BulkActionsFooter /> }
+				<DataViewsPagination />
+			</HStack>
+		)
+	);
+}

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

@@ -0,0 +1,40 @@
+.dataviews-footer {
+	position: sticky;
+	bottom: 0;
+	left: 0;
+	background-color: $white;
+	padding: $grid-unit-15 $grid-unit-60;
+	border-top: $border-width solid $gray-100;
+	flex-shrink: 0;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+	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;
+
+		.dataviews-bulk-actions-footer__container {
+			width: 100%;
+		}
+
+		.dataviews-bulk-actions-footer__item-count {
+			flex-grow: 1;
+		}
+
+		.dataviews-pagination {
+			width: 100%;
+			justify-content: space-between;
+		}
+	}
+}

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

@@ -23,13 +23,7 @@ import { useRegistry } from '@wordpress/data';
 import { unlock } from '../../lock-unlock';
 import type { Action, ActionModal as ActionModalType } from '../../types';
 
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuGroupV2: DropdownMenuGroup,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-	kebabCase,
-} = unlock( componentsPrivateApis );
+const { DropdownMenuV2, kebabCase } = unlock( componentsPrivateApis );
 
 export interface ActionTriggerProps< Item > {
 	action: Action< Item >;
@@ -91,12 +85,12 @@ function DropdownMenuItemTrigger< Item >( {
 	const label =
 		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
-		<DropdownMenuItem
+		<DropdownMenuV2.Item
 			onClick={ onClick }
 			hideOnClick={ ! ( 'RenderModal' in action ) }
 		>
-			<DropdownMenuItemLabel>{ label }</DropdownMenuItemLabel>
-		</DropdownMenuItem>
+			<DropdownMenuV2.ItemLabel>{ label }</DropdownMenuV2.ItemLabel>
+		</DropdownMenuV2.Item>
 	);
 }
 
@@ -158,7 +152,7 @@ export function ActionsDropdownMenuGroup< Item >( {
 }: ActionsDropdownMenuGroupProps< Item > ) {
 	const registry = useRegistry();
 	return (
-		<DropdownMenuGroup>
+		<DropdownMenuV2.Group>
 			{ actions.map( ( action ) => {
 				if ( 'RenderModal' in action ) {
 					return (
@@ -181,7 +175,7 @@ export function ActionsDropdownMenuGroup< Item >( {
 					/>
 				);
 			} ) }
-		</DropdownMenuGroup>
+		</DropdownMenuV2.Group>
 	);
 }
 
@@ -251,7 +245,7 @@ function CompactItemActions< Item >( {
 	actions,
 }: CompactItemActionsProps< Item > ) {
 	return (
-		<DropdownMenu
+		<DropdownMenuV2
 			trigger={
 				<Button
 					size="compact"
@@ -265,6 +259,6 @@ function CompactItemActions< Item >( {
 			placement="bottom-end"
 		>
 			<ActionsDropdownMenuGroup actions={ actions } item={ item } />
-		</DropdownMenu>
+		</DropdownMenuV2>
 	);
 }

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

@@ -7,7 +7,7 @@ import {
 	SelectControl,
 } from '@wordpress/components';
 import { createInterpolateElement, memo, useContext } from '@wordpress/element';
-import { sprintf, __, _x } from '@wordpress/i18n';
+import { sprintf, __, _x, isRTL } from '@wordpress/i18n';
 import { next, previous } from '@wordpress/icons';
 
 /**
@@ -21,53 +21,72 @@ function DataViewsPagination() {
 		onChangeView,
 		paginationInfo: { totalItems = 0, totalPages },
 	} = useContext( DataViewsContext );
+
 	if ( ! totalItems || ! totalPages ) {
 		return null;
 	}
+
 	const currentPage = view.page ?? 1;
+	const pageSelectOptions = Array.from( Array( totalPages ) ).map(
+		( _, i ) => {
+			const page = i + 1;
+			return {
+				value: page.toString(),
+				label: page.toString(),
+				'aria-label':
+					currentPage === page
+						? sprintf(
+								// translators: Current page number in total number of pages
+								__( 'Page %1$s of %2$s' ),
+								currentPage,
+								totalPages
+						  )
+						: page.toString(),
+			};
+		}
+	);
+
 	return (
 		!! totalItems &&
 		totalPages !== 1 && (
 			<HStack
 				expanded={ false }
-				spacing={ 6 }
-				justify="end"
 				className="dataviews-pagination"
+				justify="end"
+				spacing={ 6 }
 			>
 				<HStack
 					justify="flex-start"
 					expanded={ false }
-					spacing={ 2 }
-					className="dataviews-pagination__page-selection"
+					spacing={ 1 }
+					className="dataviews-pagination__page-select"
 				>
 					{ createInterpolateElement(
 						sprintf(
-							// translators: %s: Total number of pages.
-							_x( 'Page <CurrentPageControl /> of %s', 'paging' ),
+							// translators: 1: Current page number, 2: Total number of pages.
+							_x(
+								'<div>Page</div>%1$s<div>of %2$s</div>',
+								'paging'
+							),
+							'<CurrentPage />',
 							totalPages
 						),
 						{
-							CurrentPageControl: (
+							div: <div aria-hidden />,
+							CurrentPage: (
 								<SelectControl
 									aria-label={ __( 'Current page' ) }
-									value={ view.page?.toString() }
-									options={ Array.from(
-										Array( totalPages )
-									).map( ( _, i ) => {
-										const page = i + 1;
-										return {
-											value: page.toString(),
-											label: page.toString(),
-										};
-									} ) }
+									value={ currentPage.toString() }
+									options={ pageSelectOptions }
 									onChange={ ( newValue ) => {
 										onChangeView( {
 											...view,
 											page: +newValue,
 										} );
 									} }
-									size="compact"
+									size="small"
 									__nextHasNoMarginBottom
+									variant="minimal"
 								/>
 							),
 						}
@@ -84,7 +103,7 @@ function DataViewsPagination() {
 						disabled={ currentPage === 1 }
 						accessibleWhenDisabled
 						label={ __( 'Previous page' ) }
-						icon={ previous }
+						icon={ isRTL() ? next : previous }
 						showTooltip
 						size="compact"
 						tooltipPosition="top"
@@ -96,7 +115,7 @@ function DataViewsPagination() {
 						disabled={ currentPage >= totalPages }
 						accessibleWhenDisabled
 						label={ __( 'Next page' ) }
-						icon={ next }
+						icon={ isRTL() ? previous : next }
 						showTooltip
 						size="compact"
 						tooltipPosition="top"

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

@@ -1,26 +1,12 @@
-.dataviews-pagination {
-	position: sticky;
-	bottom: 0;
-	left: 0;
-	background-color: $white;
-	padding: $grid-unit-15 $grid-unit-60;
-	border-top: $border-width solid $gray-100;
-	color: $gray-700;
-	flex-shrink: 0;
-	transition: padding ease-out 0.1s;
-	@include reduce-motion("transition");
-}
-
-.dataviews-pagination__page-selection {
+.dataviews-pagination__page-select {
 	font-size: 11px;
-	text-transform: uppercase;
 	font-weight: 500;
-	color: $gray-900;
-}
+	text-transform: uppercase;
 
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
-@container (max-width: 430px) {
-	.dataviews-pagination {
-		padding: $grid-unit-15 $grid-unit-30;
+	@include break-small() {
+		.components-select-control__input {
+			font-size: 11px !important;
+			font-weight: 500;
+		}
 	}
 }