@wordpress/dataviews 0.2.0 → 0.3.0

package/src/filter-summary.js

@@ -6,23 +6,24 @@ import {
 	privateApis as componentsPrivateApis,
 	Icon,
 } from '@wordpress/components';
-import { chevronDown, chevronRightSmall, check } from '@wordpress/icons';
+import { chevronDown } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { Children, Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { OPERATOR_IN, OPERATOR_NOT_IN } from './constants';
+import { OPERATOR_IN, OPERATOR_NOT_IN, OPERATORS } from './constants';
 import { unlock } from './lock-unlock';
+import { DropdownMenuRadioItemCustom } from './dropdown-menu-helper';
 
 const {
 	DropdownMenuV2: DropdownMenu,
 	DropdownMenuGroupV2: DropdownMenuGroup,
 	DropdownMenuItemV2: DropdownMenuItem,
 	DropdownMenuSeparatorV2: DropdownMenuSeparator,
-	DropdownSubMenuV2: DropdownSubMenu,
-	DropdownSubMenuTriggerV2: DropdownSubMenuTrigger,
+	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+	DropdownMenuItemHelpTextV2: DropdownMenuItemHelpText,
 } = unlock( componentsPrivateApis );
 
 const FilterText = ( { activeElement, filterInView, filter } ) => {
@@ -74,9 +75,13 @@ function WithSeparators( { children } ) {
 
 export default function FilterSummary( { filter, view, onChangeView } ) {
 	const filterInView = view.filters.find( ( f ) => f.field === filter.field );
+	const otherFilters = view.filters.filter(
+		( f ) => f.field !== filter.field
+	);
 	const activeElement = filter.elements.find(
 		( element ) => element.value === filterInView?.value
 	);
+	const activeOperator = filterInView?.operator || filter.operators[ 0 ];
 
 	return (
 		<DropdownMenu
@@ -95,125 +100,87 @@ export default function FilterSummary( { filter, view, onChangeView } ) {
 			<WithSeparators>
 				<DropdownMenuGroup>
 					{ filter.elements.map( ( element ) => {
+						const isActive = activeElement?.value === element.value;
 						return (
-							<DropdownMenuItem
+							<DropdownMenuRadioItemCustom
 								key={ element.value }
-								role="menuitemradio"
-								aria-checked={
-									activeElement?.value === element.value
-								}
-								prefix={
-									activeElement?.value === element.value && (
-										<Icon icon={ check } />
-									)
-								}
-								onSelect={ () =>
-									onChangeView( ( currentView ) => ( {
-										...currentView,
+								name={ `filter-summary-${ filter.field }` }
+								value={ element.value }
+								checked={ isActive }
+								onClick={ () =>
+									onChangeView( {
+										...view,
 										page: 1,
 										filters: [
-											...view.filters.filter(
-												( f ) =>
-													f.field !== filter.field
-											),
+											...otherFilters,
 											{
 												field: filter.field,
-												operator:
-													filterInView?.operator ||
-													filter.operators[ 0 ],
-												value:
-													activeElement?.value ===
-													element.value
-														? undefined
-														: element.value,
+												operator: activeOperator,
+												value: isActive
+													? undefined
+													: element.value,
 											},
 										],
-									} ) )
+									} )
 								}
 							>
-								{ element.label }
-							</DropdownMenuItem>
+								<DropdownMenuItemLabel>
+									{ element.label }
+								</DropdownMenuItemLabel>
+								{ !! element.description && (
+									<DropdownMenuItemHelpText>
+										{ element.description }
+									</DropdownMenuItemHelpText>
+								) }
+							</DropdownMenuRadioItemCustom>
 						);
 					} ) }
 				</DropdownMenuGroup>
 				{ filter.operators.length > 1 && (
-					<DropdownSubMenu
+					<DropdownMenu
 						trigger={
-							<DropdownSubMenuTrigger
+							<DropdownMenuItem
 								suffix={
-									<>
-										{ filterInView.operator === OPERATOR_IN
-											? __( 'Is' )
-											: __( 'Is not' ) }
-										<Icon icon={ chevronRightSmall } />{ ' ' }
-									</>
+									<span aria-hidden="true">
+										{ OPERATORS[ activeOperator ]?.label }
+									</span>
 								}
 							>
-								{ __( 'Conditions' ) }
-							</DropdownSubMenuTrigger>
+								<DropdownMenuItemLabel>
+									{ __( 'Conditions' ) }
+								</DropdownMenuItemLabel>
+							</DropdownMenuItem>
 						}
 					>
-						<DropdownMenuItem
-							key="in-filter"
-							role="menuitemradio"
-							aria-checked={
-								filterInView?.operator === OPERATOR_IN
-							}
-							prefix={
-								filterInView?.operator === OPERATOR_IN && (
-									<Icon icon={ check } />
-								)
-							}
-							onSelect={ () =>
-								onChangeView( ( currentView ) => ( {
-									...currentView,
-									page: 1,
-									filters: [
-										...view.filters.filter(
-											( f ) => f.field !== filter.field
-										),
-										{
-											field: filter.field,
-											operator: OPERATOR_IN,
-											value: filterInView?.value,
-										},
-									],
-								} ) )
-							}
-						>
-							{ __( 'Is' ) }
-						</DropdownMenuItem>
-						<DropdownMenuItem
-							key="not-in-filter"
-							role="menuitemradio"
-							aria-checked={
-								filterInView?.operator === OPERATOR_NOT_IN
-							}
-							prefix={
-								filterInView?.operator === OPERATOR_NOT_IN && (
-									<Icon icon={ check } />
-								)
-							}
-							onSelect={ () =>
-								onChangeView( ( currentView ) => ( {
-									...currentView,
-									page: 1,
-									filters: [
-										...view.filters.filter(
-											( f ) => f.field !== filter.field
-										),
-										{
-											field: filter.field,
-											operator: OPERATOR_NOT_IN,
-											value: filterInView?.value,
-										},
-									],
-								} ) )
-							}
-						>
-							{ __( 'Is not' ) }
-						</DropdownMenuItem>
-					</DropdownSubMenu>
+						{ Object.entries( OPERATORS ).map(
+							( [ operator, { label, key } ] ) => (
+								<DropdownMenuRadioItemCustom
+									key={ key }
+									name={ `filter-summary-${ filter.field }-conditions` }
+									value={ operator }
+									checked={ activeOperator === operator }
+									onChange={ ( e ) => {
+										onChangeView( {
+											...view,
+											page: 1,
+											filters: [
+												...otherFilters,
+												{
+													field: filter.field,
+													operator: e.target.value,
+													value: filterInView?.value,
+												},
+											],
+										} );
+									} }
+								>
+									<DropdownMenuItemLabel>
+										{ label }
+									</DropdownMenuItemLabel>
+								</DropdownMenuRadioItemCustom>
+							)
+						) }
+					</DropdownMenu>
 				) }
 			</WithSeparators>
 		</DropdownMenu>

package/src/filters.js

@@ -1,12 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { memo } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import FilterSummary from './filter-summary';
 import AddFilter from './add-filter';
 import ResetFilters from './reset-filters';
-import { ENUMERATION_TYPE, OPERATOR_IN, OPERATOR_NOT_IN } from './constants';
+import {
+	ENUMERATION_TYPE,
+	OPERATOR_IN,
+	OPERATOR_NOT_IN,
+	LAYOUT_LIST,
+} from './constants';
 
-const operatorsFromField = ( field ) => {
+const sanitizeOperators = ( field ) => {
 	let operators = field.filterBy?.operators;
 	if ( ! operators || ! Array.isArray( operators ) ) {
 		operators = [ OPERATOR_IN, OPERATOR_NOT_IN ];
@@ -16,24 +26,27 @@ const operatorsFromField = ( field ) => {
 	);
 };
 
-export default function Filters( { fields, view, onChangeView } ) {
+const Filters = memo( function Filters( { fields, view, onChangeView } ) {
 	const filters = [];
 	fields.forEach( ( field ) => {
 		if ( ! field.type ) {
 			return;
 		}
 
-		const operators = operatorsFromField( field );
+		const operators = sanitizeOperators( field );
 		if ( operators.length === 0 ) {
 			return;
 		}
 
 		switch ( field.type ) {
 			case ENUMERATION_TYPE:
+				if ( ! field.elements?.length ) {
+					return;
+				}
 				filters.push( {
 					field: field.id,
 					name: field.header,
-					elements: field.elements || [],
+					elements: field.elements,
 					operators,
 					isVisible: view.filters.some(
 						( f ) =>
@@ -46,31 +59,33 @@ export default function Filters( { fields, view, onChangeView } ) {
 		}
 	} );
 
-	const filterComponents = filters.map( ( filter ) => {
-		if ( ! filter.isVisible ) {
-			return null;
-		}
-
-		return (
-			<FilterSummary
-				key={ filter.field + '.' + filter.operator }
-				filter={ filter }
-				view={ view }
-				onChangeView={ onChangeView }
-			/>
-		);
-	} );
-
-	filterComponents.push(
+	const addFilter = (
 		<AddFilter
 			key="add-filter"
-			fields={ fields }
+			filters={ filters }
 			view={ view }
 			onChangeView={ onChangeView }
 		/>
 	);
+	const filterComponents = [
+		addFilter,
+		...filters.map( ( filter ) => {
+			if ( ! filter.isVisible || view.type === LAYOUT_LIST ) {
+				return null;
+			}
+
+			return (
+				<FilterSummary
+					key={ filter.field }
+					filter={ filter }
+					view={ view }
+					onChangeView={ onChangeView }
+				/>
+			);
+		} ),
+	];
 
-	if ( filterComponents.length > 1 ) {
+	if ( filterComponents.length > 1 && view.type !== LAYOUT_LIST ) {
 		filterComponents.push(
 			<ResetFilters
 				key="reset-filters"
@@ -81,4 +96,6 @@ export default function Filters( { fields, view, onChangeView } ) {
 	}
 
 	return filterComponents;
-}
+} );
+
+export default Filters;

package/src/index.js

@@ -1,2 +1,3 @@
 export { default as DataViews } from './dataviews';
+export { sortByTextFields, getPaginationResults } from './utils';
 export { VIEW_LAYOUTS } from './constants';

package/src/item-actions.js

@@ -17,10 +17,11 @@ import { moreVertical } from '@wordpress/icons';
 import { unlock } from './lock-unlock';
 
 const {
-	DropdownMenuV2Ariakit: DropdownMenu,
-	DropdownMenuGroupV2Ariakit: DropdownMenuGroup,
-	DropdownMenuItemV2Ariakit: DropdownMenuItem,
-	DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel,
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuGroupV2: DropdownMenuGroup,
+	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+	kebabCase,
 } = unlock( componentsPrivateApis );
 
 function ButtonTrigger( { action, onClick } ) {
@@ -58,12 +59,17 @@ function ActionWithModal( { action, item, ActionTrigger } ) {
 			<ActionTrigger { ...actionTriggerProps } />
 			{ isModalOpen && (
 				<Modal
-					title={ ! hideModalHeader && action.label }
+					title={
+						( ! hideModalHeader && action.modalHeader ) ||
+						action.label
+					}
 					__experimentalHideHeader={ !! hideModalHeader }
 					onRequestClose={ () => {
 						setIsModalOpen( false );
 					} }
-					overlayClassName="dataviews-action-modal"
+					overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
+						action.id
+					) }` }
 				>
 					<RenderModal
 						item={ item }
@@ -120,9 +126,6 @@ export default function ItemActions( { item, actions, isCompact } ) {
 			{ primaryActions: [], secondaryActions: [] }
 		);
 	}, [ actions, item ] );
-	if ( ! primaryActions.length && ! secondaryActions.length ) {
-		return null;
-	}
 	if ( isCompact ) {
 		return (
 			<CompactItemActions
@@ -161,23 +164,22 @@ export default function ItemActions( { item, actions, isCompact } ) {
 						/>
 					);
 				} ) }
-			{ !! secondaryActions.length && (
-				<DropdownMenu
-					trigger={
-						<Button
-							size="compact"
-							icon={ moreVertical }
-							label={ __( 'Actions' ) }
-						/>
-					}
-					placement="bottom-end"
-				>
-					<ActionsDropdownMenuGroup
-						actions={ secondaryActions }
-						item={ item }
+			<DropdownMenu
+				trigger={
+					<Button
+						size="compact"
+						icon={ moreVertical }
+						label={ __( 'Actions' ) }
+						disabled={ ! secondaryActions.length }
 					/>
-				</DropdownMenu>
-			) }
+				}
+				placement="bottom-end"
+			>
+				<ActionsDropdownMenuGroup
+					actions={ secondaryActions }
+					item={ item }
+				/>
+			</DropdownMenu>
 		</HStack>
 	);
 }
@@ -190,6 +192,9 @@ function CompactItemActions( { item, primaryActions, secondaryActions } ) {
 					size="compact"
 					icon={ moreVertical }
 					label={ __( 'Actions' ) }
+					disabled={
+						! primaryActions.length && ! secondaryActions.length
+					}
 				/>
 			}
 			placement="bottom-end"

package/src/pagination.js

@@ -4,14 +4,13 @@
 import {
 	Button,
 	__experimentalHStack as HStack,
-	__experimentalText as Text,
-	__experimentalNumberControl as NumberControl,
+	SelectControl,
 } from '@wordpress/components';
-import { createInterpolateElement } from '@wordpress/element';
-import { sprintf, __, _x, _n } from '@wordpress/i18n';
-import { chevronRight, chevronLeft, previous, next } from '@wordpress/icons';
+import { createInterpolateElement, memo } from '@wordpress/element';
+import { sprintf, __, _x } from '@wordpress/i18n';
+import { chevronRight, chevronLeft } from '@wordpress/icons';
 
-function Pagination( {
+const Pagination = memo( function Pagination( {
 	view,
 	onChangeView,
 	paginationInfo: { totalItems = 0, totalPages },
@@ -20,125 +19,78 @@ function Pagination( {
 		return null;
 	}
 	return (
-		<HStack
-			expanded={ false }
-			spacing={ 3 }
-			justify="space-between"
-			className="dataviews-pagination"
-		>
-			<Text variant="muted">
-				{
-					// translators: %s: Total number of entries.
-					sprintf(
-						// translators: %s: Total number of entries.
-						_n( '%s item', '%s items', totalItems ),
-						totalItems
-					)
-				}
-			</Text>
-			{ !! totalItems && totalPages !== 1 && (
-				<HStack expanded={ false } spacing={ 3 }>
-					<HStack
-						justify="flex-start"
-						expanded={ false }
-						spacing={ 1 }
-					>
-						<Button
-							onClick={ () =>
-								onChangeView( { ...view, page: 1 } )
-							}
-							disabled={ view.page === 1 }
-							__experimentalIsFocusable
-							label={ __( 'First page' ) }
-							icon={ previous }
-							showTooltip
-							size="compact"
-						/>
-						<Button
-							onClick={ () =>
-								onChangeView( { ...view, page: view.page - 1 } )
-							}
-							disabled={ view.page === 1 }
-							__experimentalIsFocusable
-							label={ __( 'Previous page' ) }
-							icon={ chevronLeft }
-							showTooltip
-							size="compact"
-						/>
-					</HStack>
-					<HStack
-						justify="flex-start"
-						expanded={ false }
-						spacing={ 2 }
-					>
-						{ createInterpolateElement(
-							sprintf(
-								// translators: %1$s: Current page number, %2$s: Total number of pages.
-								_x( '<CurrenPageControl /> of %2$s', 'paging' ),
-								view.page,
-								totalPages
+		!! totalItems &&
+		totalPages !== 1 && (
+			<HStack
+				expanded={ false }
+				spacing={ 6 }
+				justify="end"
+				className="dataviews-pagination"
+			>
+				<HStack justify="flex-start" expanded={ false } spacing={ 2 }>
+					{ createInterpolateElement(
+						sprintf(
+							// translators: %1$s: Current page number, %2$s: Total number of pages.
+							_x(
+								'Page <CurrenPageControl /> of %2$s',
+								'paging'
 							),
-							{
-								CurrenPageControl: (
-									<NumberControl
-										aria-label={ __( 'Current page' ) }
-										min={ 1 }
-										max={ totalPages }
-										onChange={ ( value ) => {
-											const _value = +value;
-											if (
-												! _value ||
-												_value < 1 ||
-												_value > totalPages
-											) {
-												return;
-											}
-											onChangeView( {
-												...view,
-												page: _value,
-											} );
-										} }
-										step="1"
-										value={ view.page }
-										isDragEnabled={ false }
-										spinControls="none"
-									/>
-								),
-							}
-						) }
-					</HStack>
-					<HStack
-						justify="flex-start"
-						expanded={ false }
-						spacing={ 1 }
-					>
-						<Button
-							onClick={ () =>
-								onChangeView( { ...view, page: view.page + 1 } )
-							}
-							disabled={ view.page >= totalPages }
-							__experimentalIsFocusable
-							label={ __( 'Next page' ) }
-							icon={ chevronRight }
-							showTooltip
-							size="compact"
-						/>
-						<Button
-							onClick={ () =>
-								onChangeView( { ...view, page: totalPages } )
-							}
-							disabled={ view.page >= totalPages }
-							__experimentalIsFocusable
-							label={ __( 'Last page' ) }
-							icon={ next }
-							showTooltip
-							size="compact"
-						/>
-					</HStack>
+							view.page,
+							totalPages
+						),
+						{
+							CurrenPageControl: (
+								<SelectControl
+									aria-label={ __( 'Current page' ) }
+									value={ view.page }
+									options={ Array.from(
+										Array( totalPages )
+									).map( ( _, i ) => {
+										const page = i + 1;
+										return { value: page, label: page };
+									} ) }
+									onChange={ ( newValue ) => {
+										onChangeView( {
+											...view,
+											page: +newValue,
+										} );
+									} }
+									size={ 'compact' }
+									__nextHasNoMarginBottom
+								/>
+							),
+						}
+					) }
+				</HStack>
+				<HStack expanded={ false } spacing={ 1 }>
+					<Button
+						onClick={ () =>
+							onChangeView( { ...view, page: view.page - 1 } )
+						}
+						disabled={ view.page === 1 }
+						__experimentalIsFocusable
+						label={ __( 'Previous page' ) }
+						icon={ chevronLeft }
+						showTooltip
+						size="compact"
+						tooltipPosition="top"
+					/>
+					<Button
+						onClick={ () =>
+							onChangeView( { ...view, page: view.page + 1 } )
+						}
+						disabled={ view.page >= totalPages }
+						__experimentalIsFocusable
+						label={ __( 'Next page' ) }
+						icon={ chevronRight }
+						showTooltip
+						size="compact"
+						tooltipPosition="top"
+					/>
 				</HStack>
-			) }
-		</HStack>
+			</HStack>
+		)
 	);
-}
+} );
 
 export default Pagination;

package/src/reset-filters.js

@@ -4,7 +4,7 @@
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-export default ( { view, onChangeView } ) => {
+export default function ResetFilter( { view, onChangeView } ) {
 	return (
 		<Button
 			disabled={ view.search === '' && view.filters?.length === 0 }
@@ -12,15 +12,15 @@ export default ( { view, onChangeView } ) => {
 			size="compact"
 			variant="tertiary"
 			onClick={ () => {
-				onChangeView( ( currentView ) => ( {
-					...currentView,
+				onChangeView( {
+					...view,
 					page: 1,
 					search: '',
 					filters: [],
-				} ) );
+				} );
 			} }
 		>
 			{ __( 'Reset filters' ) }
 		</Button>
 	);
-};
+}