@wordpress/dataviews 1.1.0 → 2.0.0

package/src/{view-grid.js → view-grid.tsx}

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -21,10 +21,24 @@ import { __ } from '@wordpress/i18n';
  */
 import ItemActions from './item-actions';
 import SingleSelectionCheckbox from './single-selection-checkbox';
-
 import { useHasAPossibleBulkAction } from './bulk-actions';
+import type { Action, AnyItem, NormalizedField, ViewGridProps } from './types';
+
+interface GridItemProps< Item extends AnyItem > {
+	selection: string[];
+	data: Item[];
+	onSelectionChange: ( items: Item[] ) => void;
+	getItemId: ( item: Item ) => string;
+	item: Item;
+	actions: Action< Item >[];
+	mediaField?: NormalizedField< Item >;
+	primaryField?: NormalizedField< Item >;
+	visibleFields: NormalizedField< Item >[];
+	badgeFields: NormalizedField< Item >[];
+	columnFields?: string[];
+}
 
-function GridItem( {
+function GridItem< Item extends AnyItem >( {
 	selection,
 	data,
 	onSelectionChange,
@@ -36,7 +50,7 @@ function GridItem( {
 	visibleFields,
 	badgeFields,
 	columnFields,
-} ) {
+}: GridItemProps< Item > ) {
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
 	const isSelected = selection.includes( id );
@@ -44,7 +58,7 @@ function GridItem( {
 		<VStack
 			spacing={ 0 }
 			key={ id }
-			className={ classnames( 'dataviews-view-grid__card', {
+			className={ clsx( 'dataviews-view-grid__card', {
 				'is-selected': hasBulkAction && isSelected,
 			} ) }
 			onClickCapture={ ( event ) => {
@@ -86,7 +100,6 @@ function GridItem( {
 				className="dataviews-view-grid__title-actions"
 			>
 				<SingleSelectionCheckbox
-					id={ id }
 					item={ item }
 					selection={ selection }
 					onSelectionChange={ onSelectionChange }
@@ -105,7 +118,7 @@ function GridItem( {
 					className="dataviews-view-grid__badge-fields"
 					spacing={ 2 }
 					wrap
-					align="top"
+					alignment="top"
 					justify="flex-start"
 				>
 					{ badgeFields.map( ( field ) => {
@@ -118,7 +131,7 @@ function GridItem( {
 						return (
 							<FlexItem
 								key={ field.id }
-								className={ 'dataviews-view-grid__field-value' }
+								className="dataviews-view-grid__field-value"
 							>
 								{ renderedValue }
 							</FlexItem>
@@ -137,7 +150,7 @@ function GridItem( {
 						}
 						return (
 							<Flex
-								className={ classnames(
+								className={ clsx(
 									'dataviews-view-grid__field',
 									columnFields?.includes( field.id )
 										? 'is-column'
@@ -174,16 +187,16 @@ function GridItem( {
 	);
 }
 
-export default function ViewGrid( {
+export default function ViewGrid< Item extends AnyItem >( {
+	actions,
 	data,
 	fields,
-	view,
-	actions,
-	isLoading,
 	getItemId,
-	selection,
+	isLoading,
 	onSelectionChange,
-} ) {
+	selection,
+	view,
+}: ViewGridProps< Item > ) {
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout.mediaField
 	);
@@ -191,7 +204,7 @@ export default function ViewGrid( {
 		( field ) => field.id === view.layout.primaryField
 	);
 	const { visibleFields, badgeFields } = fields.reduce(
-		( accumulator, field ) => {
+		( accumulator: Record< string, NormalizedField< Item >[] >, field ) => {
 			if (
 				view.hiddenFields.includes( field.id ) ||
 				[ view.layout.mediaField, view.layout.primaryField ].includes(
@@ -215,7 +228,7 @@ export default function ViewGrid( {
 		<>
 			{ hasData && (
 				<Grid
-					gap={ 6 }
+					gap={ 8 }
 					columns={ 2 }
 					alignment="top"
 					className="dataviews-view-grid"
@@ -243,7 +256,7 @@ export default function ViewGrid( {
 			) }
 			{ ! hasData && (
 				<div
-					className={ classnames( {
+					className={ clsx( {
 						'dataviews-loading': isLoading,
 						'dataviews-no-results': ! isLoading,
 					} ) }

package/src/view-list.tsx

@@ -0,0 +1,410 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+// Import CompositeStore type, which is not exported from @wordpress/components.
+// eslint-disable-next-line no-restricted-imports
+import type { CompositeStore } from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+	privateApis as componentsPrivateApis,
+	Spinner,
+	VisuallyHidden,
+} from '@wordpress/components';
+import {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+import type { Action, AnyItem, NormalizedField, ViewListProps } from './types';
+
+import { ActionsDropdownMenuGroup, ActionModal } from './item-actions';
+
+interface ListViewItemProps< Item extends AnyItem > {
+	actions: Action< Item >[];
+	id?: string;
+	isSelected: boolean;
+	item: Item;
+	mediaField?: NormalizedField< Item >;
+	onSelect: ( item: Item ) => void;
+	primaryField?: NormalizedField< Item >;
+	store: CompositeStore;
+	visibleFields: NormalizedField< Item >[];
+}
+
+const {
+	useCompositeStoreV2: useCompositeStore,
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	CompositeRowV2: CompositeRow,
+	DropdownMenuV2: DropdownMenu,
+} = unlock( componentsPrivateApis );
+
+function ListItem< Item extends AnyItem >( {
+	actions,
+	id,
+	isSelected,
+	item,
+	mediaField,
+	onSelect,
+	primaryField,
+	store,
+	visibleFields,
+}: ListViewItemProps< Item > ) {
+	const itemRef = useRef< HTMLElement >( null );
+	const labelId = `${ id }-label`;
+	const descriptionId = `${ id }-description`;
+
+	const [ isHovered, setIsHovered ] = useState( false );
+	const handleMouseEnter = () => {
+		setIsHovered( true );
+	};
+	const handleMouseLeave = () => {
+		setIsHovered( false );
+	};
+
+	useEffect( () => {
+		if ( isSelected ) {
+			itemRef.current?.scrollIntoView( {
+				behavior: 'auto',
+				block: 'nearest',
+				inline: 'nearest',
+			} );
+		}
+	}, [ isSelected ] );
+
+	const { primaryAction, eligibleActions } = useMemo( () => {
+		// If an action is eligible for all items, doesn't need
+		// to provide the `isEligible` function.
+		const _eligibleActions = actions.filter(
+			( action ) => ! action.isEligible || action.isEligible( item )
+		);
+		const _primaryActions = _eligibleActions.filter(
+			( action ) => action.isPrimary && !! action.icon
+		);
+		return {
+			primaryAction: _primaryActions?.[ 0 ],
+			eligibleActions: _eligibleActions,
+		};
+	}, [ actions, item ] );
+
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const primaryActionLabel =
+		primaryAction &&
+		( typeof primaryAction.label === 'string'
+			? primaryAction.label
+			: primaryAction.label( [ item ] ) );
+
+	return (
+		<CompositeRow
+			ref={ itemRef }
+			render={ <li /> }
+			role="row"
+			className={ clsx( {
+				'is-selected': isSelected,
+				'is-hovered': isHovered,
+			} ) }
+			onMouseEnter={ handleMouseEnter }
+			onMouseLeave={ handleMouseLeave }
+		>
+			<HStack
+				className="dataviews-view-list__item-wrapper"
+				alignment="center"
+				spacing={ 0 }
+			>
+				<div role="gridcell">
+					<CompositeItem
+						store={ store }
+						render={ <div /> }
+						role="button"
+						id={ id }
+						aria-pressed={ isSelected }
+						aria-labelledby={ labelId }
+						aria-describedby={ descriptionId }
+						className="dataviews-view-list__item"
+						onClick={ () => onSelect( item ) }
+					>
+						<HStack
+							spacing={ 3 }
+							justify="start"
+							alignment="flex-start"
+						>
+							<div className="dataviews-view-list__media-wrapper">
+								{ mediaField?.render( { item } ) || (
+									<div className="dataviews-view-list__media-placeholder"></div>
+								) }
+							</div>
+							<VStack spacing={ 0 }>
+								<span
+									className="dataviews-view-list__primary-field"
+									id={ labelId }
+								>
+									{ primaryField?.render( { item } ) }
+								</span>
+								<div
+									className="dataviews-view-list__fields"
+									id={ descriptionId }
+								>
+									{ visibleFields.map( ( field ) => (
+										<div
+											key={ field.id }
+											className="dataviews-view-list__field"
+										>
+											<VisuallyHidden
+												as="span"
+												className="dataviews-view-list__field-label"
+											>
+												{ field.header }
+											</VisuallyHidden>
+											<span className="dataviews-view-list__field-value">
+												{ field.render( { item } ) }
+											</span>
+										</div>
+									) ) }
+								</div>
+							</VStack>
+						</HStack>
+					</CompositeItem>
+				</div>
+				{ actions?.length > 0 && (
+					<HStack
+						spacing={ 1 }
+						justify="flex-end"
+						className="dataviews-view-list__item-actions"
+						style={ {
+							flexShrink: '0',
+							width: 'auto',
+						} }
+					>
+						{ primaryAction && 'RenderModal' in primaryAction && (
+							<div role="gridcell">
+								<CompositeItem
+									store={ store }
+									render={
+										<Button
+											label={ primaryActionLabel }
+											icon={ primaryAction.icon }
+											isDestructive={
+												primaryAction.isDestructive
+											}
+											size="compact"
+											onClick={ () =>
+												setIsModalOpen( true )
+											}
+										/>
+									}
+								>
+									{ isModalOpen && (
+										<ActionModal< Item >
+											action={ primaryAction }
+											items={ [ item ] }
+											closeModal={ () =>
+												setIsModalOpen( false )
+											}
+										/>
+									) }
+								</CompositeItem>
+							</div>
+						) }
+						{ primaryAction &&
+							! ( 'RenderModal' in primaryAction ) && (
+								<div role="gridcell" key={ primaryAction.id }>
+									<CompositeItem
+										store={ store }
+										render={
+											<Button
+												label={ primaryActionLabel }
+												icon={ primaryAction.icon }
+												isDestructive={
+													primaryAction.isDestructive
+												}
+												size="compact"
+												onClick={ () =>
+													primaryAction.callback( [
+														item,
+													] )
+												}
+											/>
+										}
+									/>
+								</div>
+							) }
+						<div role="gridcell">
+							<DropdownMenu
+								trigger={
+									<CompositeItem
+										store={ store }
+										render={
+											<Button
+												size="compact"
+												icon={ moreVertical }
+												label={ __( 'Actions' ) }
+												disabled={ ! actions.length }
+												onKeyDown={ ( event: {
+													key: string;
+													preventDefault: () => void;
+												} ) => {
+													if (
+														event.key ===
+														'ArrowDown'
+													) {
+														// Prevent the default behaviour (open dropdown menu) and go down.
+														event.preventDefault();
+														store.move(
+															store.down()
+														);
+													}
+													if (
+														event.key === 'ArrowUp'
+													) {
+														// Prevent the default behavior (open dropdown menu) and go up.
+														event.preventDefault();
+														store.move(
+															store.up()
+														);
+													}
+												} }
+											/>
+										}
+									/>
+								}
+								placement="bottom-end"
+							>
+								<ActionsDropdownMenuGroup
+									actions={ eligibleActions }
+									item={ item }
+								/>
+							</DropdownMenu>
+						</div>
+					</HStack>
+				) }
+			</HStack>
+		</CompositeRow>
+	);
+}
+
+export default function ViewList< Item extends AnyItem >(
+	props: ViewListProps< Item >
+) {
+	const {
+		actions,
+		data,
+		fields,
+		getItemId,
+		isLoading,
+		onSelectionChange,
+		selection,
+		view,
+	} = props;
+	const baseId = useInstanceId( ViewList, 'view-list' );
+	const selectedItem = data?.findLast( ( item ) =>
+		selection.includes( item.id )
+	);
+
+	const mediaField = fields.find(
+		( field ) => field.id === view.layout.mediaField
+	);
+	const primaryField = fields.find(
+		( field ) => field.id === view.layout.primaryField
+	);
+	const visibleFields = fields.filter(
+		( field ) =>
+			! view.hiddenFields.includes( field.id ) &&
+			! [ view.layout.primaryField, view.layout.mediaField ].includes(
+				field.id
+			)
+	);
+
+	const onSelect = useCallback(
+		( item: Item ) => onSelectionChange( [ item ] ),
+		[ onSelectionChange ]
+	);
+
+	const getItemDomId = useCallback(
+		( item?: Item ) =>
+			item ? `${ baseId }-${ getItemId( item ) }` : undefined,
+		[ baseId, getItemId ]
+	);
+
+	const store = useCompositeStore( {
+		defaultActiveId: getItemDomId( selectedItem ),
+	} );
+
+	// Manage focused item, when the active one is removed from the list.
+	const isActiveIdInList = store.useState(
+		( state: { items: any[]; activeId: any } ) =>
+			state.items.some(
+				( item: { id: any } ) => item.id === state.activeId
+			)
+	);
+	useEffect( () => {
+		if ( ! isActiveIdInList ) {
+			// Prefer going down, except if there is no item below (last item), then go up (last item in list).
+			if ( store.down() ) {
+				store.move( store.down() );
+			} else if ( store.up() ) {
+				store.move( store.up() );
+			}
+		}
+	}, [ isActiveIdInList ] );
+
+	const hasData = data?.length;
+	if ( ! hasData ) {
+		return (
+			<div
+				className={ clsx( {
+					'dataviews-loading': isLoading,
+					'dataviews-no-results': ! hasData && ! isLoading,
+				} ) }
+			>
+				{ ! hasData && (
+					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
+				) }
+			</div>
+		);
+	}
+
+	return (
+		<Composite
+			id={ baseId }
+			render={ <ul /> }
+			className="dataviews-view-list"
+			role="grid"
+			store={ store }
+		>
+			{ data.map( ( item ) => {
+				const id = getItemDomId( item );
+				return (
+					<ListItem
+						key={ id }
+						id={ id }
+						actions={ actions }
+						item={ item }
+						isSelected={ item === selectedItem }
+						onSelect={ onSelect }
+						mediaField={ mediaField }
+						primaryField={ primaryField }
+						store={ store }
+						visibleFields={ visibleFields }
+					/>
+				);
+			} ) }
+		</Composite>
+	);
+}