@wordpress/dataviews 0.2.0 → 0.3.0

package/src/view-actions.js

@@ -3,24 +3,24 @@
  */
 import {
 	Button,
-	Icon,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { chevronRightSmall, check, arrowUp, arrowDown } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+import { memo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
-import { VIEW_LAYOUTS, LAYOUT_TABLE } from './constants';
+import { VIEW_LAYOUTS, LAYOUT_TABLE, SORTING_DIRECTIONS } from './constants';
 
 const {
 	DropdownMenuV2: DropdownMenu,
 	DropdownMenuGroupV2: DropdownMenuGroup,
 	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownSubMenuV2: DropdownSubMenu,
-	DropdownSubMenuTriggerV2: DropdownSubMenuTrigger,
+	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
+	DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,
+	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
 } = unlock( componentsPrivateApis );
 
 function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
@@ -35,86 +35,81 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 	}
 	const activeView = _availableViews.find( ( v ) => view.type === v.type );
 	return (
-		<DropdownSubMenu
+		<DropdownMenu
 			trigger={
-				<DropdownSubMenuTrigger
+				<DropdownMenuItem
 					suffix={
-						<>
-							{ activeView.label }
-							<Icon icon={ chevronRightSmall } />
-						</>
+						<span aria-hidden="true">{ activeView.label }</span>
 					}
 				>
-					{ __( 'Layout' ) }
-				</DropdownSubMenuTrigger>
+					<DropdownMenuItemLabel>
+						{ __( 'Layout' ) }
+					</DropdownMenuItemLabel>
+				</DropdownMenuItem>
 			}
 		>
 			{ _availableViews.map( ( availableView ) => {
 				return (
-					<DropdownMenuItem
+					<DropdownMenuRadioItem
 						key={ availableView.type }
-						role="menuitemradio"
-						aria-checked={ availableView.id === view.type }
-						prefix={
-							availableView.type === view.type && (
-								<Icon icon={ check } />
-							)
-						}
-						onSelect={ ( event ) => {
-							// We need to handle this on DropDown component probably..
-							event.preventDefault();
+						value={ availableView.type }
+						name="view-actions-available-view"
+						checked={ availableView.type === view.type }
+						hideOnClick={ true }
+						onChange={ ( e ) => {
 							onChangeView( {
 								...view,
-								type: availableView.type,
+								type: e.target.value,
 							} );
 						} }
 					>
-						{ availableView.label }
-					</DropdownMenuItem>
+						<DropdownMenuItemLabel>
+							{ availableView.label }
+						</DropdownMenuItemLabel>
+					</DropdownMenuRadioItem>
 				);
 			} ) }
-		</DropdownSubMenu>
+		</DropdownMenu>
 	);
 }
 
 const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
 function PageSizeMenu( { view, onChangeView } ) {
 	return (
-		<DropdownSubMenu
+		<DropdownMenu
 			trigger={
-				<DropdownSubMenuTrigger
-					suffix={
-						<>
-							{ view.perPage }
-							<Icon icon={ chevronRightSmall } />
-						</>
-					}
+				<DropdownMenuItem
+					suffix={ <span aria-hidden="true">{ view.perPage }</span> }
 				>
-					{ /* TODO: probably label per view type. */ }
-					{ __( 'Rows per page' ) }
-				</DropdownSubMenuTrigger>
+					<DropdownMenuItemLabel>
+						{ /* TODO: probably label per view type. */ }
+						{ __( 'Rows per page' ) }
+					</DropdownMenuItemLabel>
+				</DropdownMenuItem>
 			}
 		>
 			{ PAGE_SIZE_VALUES.map( ( size ) => {
 				return (
-					<DropdownMenuItem
+					<DropdownMenuRadioItem
 						key={ size }
-						role="menuitemradio"
-						aria-checked={ view.perPage === size }
-						prefix={
-							view.perPage === size && <Icon icon={ check } />
-						}
-						onSelect={ ( event ) => {
-							// We need to handle this on DropDown component probably..
-							event.preventDefault();
-							onChangeView( { ...view, perPage: size, page: 1 } );
+						value={ size }
+						name="view-actions-page-size"
+						checked={ view.perPage === size }
+						onChange={ () => {
+							onChangeView( {
+								...view,
+								// `e.target.value` holds the same value as `size` but as a string,
+								// so we use `size` directly to avoid parsing to int.
+								perPage: size,
+								page: 1,
+							} );
 						} }
 					>
-						{ size }
-					</DropdownMenuItem>
+						<DropdownMenuItemLabel>{ size }</DropdownMenuItemLabel>
+					</DropdownMenuRadioItem>
 				);
 			} ) }
-		</DropdownSubMenu>
+		</DropdownMenu>
 	);
 }
 
@@ -127,27 +122,22 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) {
 		return null;
 	}
 	return (
-		<DropdownSubMenu
+		<DropdownMenu
 			trigger={
-				<DropdownSubMenuTrigger
-					suffix={ <Icon icon={ chevronRightSmall } /> }
-				>
-					{ __( 'Fields' ) }
-				</DropdownSubMenuTrigger>
+				<DropdownMenuItem>
+					<DropdownMenuItemLabel>
+						{ __( 'Fields' ) }
+					</DropdownMenuItemLabel>
+				</DropdownMenuItem>
 			}
 		>
 			{ hidableFields?.map( ( field ) => {
 				return (
-					<DropdownMenuItem
+					<DropdownMenuCheckboxItem
 						key={ field.id }
-						role="menuitemcheckbox"
-						prefix={
-							! view.hiddenFields?.includes( field.id ) && (
-								<Icon icon={ check } />
-							)
-						}
-						onSelect={ ( event ) => {
-							event.preventDefault();
+						value={ field.id }
+						checked={ ! view.hiddenFields?.includes( field.id ) }
+						onChange={ () => {
 							onChangeView( {
 								...view,
 								hiddenFields: view.hiddenFields?.includes(
@@ -163,19 +153,16 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) {
 							} );
 						} }
 					>
-						{ field.header }
-					</DropdownMenuItem>
+						<DropdownMenuItemLabel>
+							{ field.header }
+						</DropdownMenuItemLabel>
+					</DropdownMenuCheckboxItem>
 				);
 			} ) }
-		</DropdownSubMenu>
+		</DropdownMenu>
 	);
 }
 
-// This object is used to construct the sorting options per sortable field.
-const sortingItemsInfo = {
-	asc: { icon: arrowUp, label: __( 'Sort ascending' ) },
-	desc: { icon: arrowDown, label: __( 'Sort descending' ) },
-};
 function SortMenu( { fields, view, onChangeView } ) {
 	const sortableFields = fields.filter(
 		( field ) => field.enableSorting !== false
@@ -187,51 +174,58 @@ function SortMenu( { fields, view, onChangeView } ) {
 		( field ) => field.id === view.sort?.field
 	);
 	return (
-		<DropdownSubMenu
+		<DropdownMenu
 			trigger={
-				<DropdownSubMenuTrigger
+				<DropdownMenuItem
 					suffix={
-						<>
+						<span aria-hidden="true">
 							{ currentSortedField?.header }
-							<Icon icon={ chevronRightSmall } />
-						</>
+						</span>
 					}
 				>
-					{ __( 'Sort by' ) }
-				</DropdownSubMenuTrigger>
+					<DropdownMenuItemLabel>
+						{ __( 'Sort by' ) }
+					</DropdownMenuItemLabel>
+				</DropdownMenuItem>
 			}
 		>
 			{ sortableFields?.map( ( field ) => {
 				const sortedDirection = view.sort?.direction;
 				return (
-					<DropdownSubMenu
+					<DropdownMenu
 						key={ field.id }
 						trigger={
-							<DropdownSubMenuTrigger
-								suffix={ <Icon icon={ chevronRightSmall } /> }
-							>
-								{ field.header }
-							</DropdownSubMenuTrigger>
+							<DropdownMenuItem>
+								<DropdownMenuItemLabel>
+									{ field.header }
+								</DropdownMenuItemLabel>
+							</DropdownMenuItem>
 						}
-						side="left"
+						style={ {
+							minWidth: '220px',
+						} }
 					>
-						{ Object.entries( sortingItemsInfo ).map(
+						{ Object.entries( SORTING_DIRECTIONS ).map(
 							( [ direction, info ] ) => {
-								const isActive =
-									currentSortedField &&
+								const isChecked =
+									currentSortedField !== undefined &&
 									sortedDirection === direction &&
 									field.id === currentSortedField.id;
+
+								const value = `${ field.id }-${ direction }`;
+
 								return (
-									<DropdownMenuItem
-										key={ direction }
-										role="menuitemradio"
-										aria-checked={ isActive }
-										prefix={ <Icon icon={ info.icon } /> }
-										suffix={
-											isActive && <Icon icon={ check } />
-										}
-										onSelect={ ( event ) => {
-											event.preventDefault();
+									<DropdownMenuRadioItem
+										key={ value }
+										// All sorting radio items share the same name, so that
+										// selecting a sorting option automatically deselects the
+										// previously selected one, even if it is displayed in
+										// another submenu. The field and direction are passed via
+										// the `value` prop.
+										name="view-actions-sorting"
+										value={ value }
+										checked={ isChecked }
+										onChange={ () => {
 											onChangeView( {
 												...view,
 												sort: {
@@ -241,19 +235,21 @@ function SortMenu( { fields, view, onChangeView } ) {
 											} );
 										} }
 									>
-										{ info.label }
-									</DropdownMenuItem>
+										<DropdownMenuItemLabel>
+											{ info.label }
+										</DropdownMenuItemLabel>
+									</DropdownMenuRadioItem>
 								);
 							}
 						) }
-					</DropdownSubMenu>
+					</DropdownMenu>
 				);
 			} ) }
-		</DropdownSubMenu>
+		</DropdownMenu>
 	);
 }
 
-export default function ViewActions( {
+const ViewActions = memo( function ViewActions( {
 	fields,
 	view,
 	onChangeView,
@@ -263,7 +259,6 @@ export default function ViewActions( {
 		<DropdownMenu
 			trigger={
 				<Button
-					variant="tertiary"
 					size="compact"
 					icon={
 						VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
@@ -276,11 +271,13 @@ export default function ViewActions( {
 			}
 		>
 			<DropdownMenuGroup>
-				<ViewTypeMenu
-					view={ view }
-					onChangeView={ onChangeView }
-					supportedLayouts={ supportedLayouts }
-				/>
+				{ window?.__experimentalAdminViews && (
+					<ViewTypeMenu
+						view={ view }
+						onChangeView={ onChangeView }
+						supportedLayouts={ supportedLayouts }
+					/>
+				) }
 				<SortMenu
 					fields={ fields }
 					view={ view }
@@ -295,4 +292,6 @@ export default function ViewActions( {
 			</DropdownMenuGroup>
 		</DropdownMenu>
 	);
-}
+} );
+
+export default ViewActions;

package/src/view-grid.js

@@ -42,12 +42,12 @@ export default function ViewGrid( {
 			gap={ 8 }
 			columns={ 2 }
 			alignment="top"
-			className="dataviews-grid-view"
+			className="dataviews-view-grid"
 		>
-			{ usedData.map( ( item, index ) => (
+			{ usedData.map( ( item ) => (
 				<VStack
 					spacing={ 3 }
-					key={ getItemId?.( item ) || index }
+					key={ getItemId( item ) }
 					className="dataviews-view-grid__card"
 				>
 					<div className="dataviews-view-grid__media">
@@ -87,7 +87,7 @@ export default function ViewGrid( {
 										{ field.header }
 									</div>
 									<div className="dataviews-view-grid__field-value">
-										{ field.render( { item } ) }
+										{ renderedValue }
 									</div>
 								</VStack>
 							);

package/src/view-list.js

@@ -10,8 +10,11 @@ import { useAsyncList } from '@wordpress/compose';
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	Button,
 } from '@wordpress/components';
 import { ENTER, SPACE } from '@wordpress/keycodes';
+import { info } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 export default function ViewList( {
 	view,
@@ -19,6 +22,7 @@ export default function ViewList( {
 	data,
 	getItemId,
 	onSelectionChange,
+	onDetailsChange,
 	selection,
 	deferredRendering,
 } ) {
@@ -46,39 +50,38 @@ export default function ViewList( {
 	};
 
 	return (
-		<ul className="dataviews-list-view">
-			{ usedData.map( ( item, index ) => {
+		<ul className="dataviews-view-list">
+			{ usedData.map( ( item ) => {
 				return (
-					<li key={ getItemId?.( item ) || index }>
-						<div
-							role="button"
-							tabIndex={ 0 }
-							aria-pressed={ selection.includes( item.id ) }
-							onKeyDown={ onEnter( item ) }
-							className={ classNames(
-								'dataviews-list-view__item',
-								{
-									'dataviews-list-view__item-selected':
-										selection.includes( item.id ),
-								}
-							) }
-							onClick={ () => onSelectionChange( [ item ] ) }
-						>
-							<HStack spacing={ 3 }>
-								<div className="dataviews-list-view__media-wrapper">
-									{ mediaField?.render( { item } ) || (
-										<div className="dataviews-list-view__media-placeholder"></div>
-									) }
-								</div>
-								<HStack>
+					<li
+						key={ getItemId( item ) }
+						className={ classNames( {
+							'is-selected': selection.includes( item.id ),
+						} ) }
+					>
+						<HStack className="dataviews-view-list__item-wrapper">
+							<div
+								role="button"
+								tabIndex={ 0 }
+								aria-pressed={ selection.includes( item.id ) }
+								onKeyDown={ onEnter( item ) }
+								className="dataviews-view-list__item"
+								onClick={ () => onSelectionChange( [ item ] ) }
+							>
+								<HStack spacing={ 3 } justify="start">
+									<div className="dataviews-view-list__media-wrapper">
+										{ mediaField?.render( { item } ) || (
+											<div className="dataviews-view-list__media-placeholder"></div>
+										) }
+									</div>
 									<VStack spacing={ 1 }>
 										{ primaryField?.render( { item } ) }
-										<div className="dataviews-list-view__fields">
+										<div className="dataviews-view-list__fields">
 											{ visibleFields.map( ( field ) => {
 												return (
 													<span
 														key={ field.id }
-														className="dataviews-list-view__field"
+														className="dataviews-view-list__field"
 													>
 														{ field.render( {
 															item,
@@ -89,8 +92,19 @@ export default function ViewList( {
 										</div>
 									</VStack>
 								</HStack>
-							</HStack>
-						</div>
+							</div>
+							{ onDetailsChange && (
+								<Button
+									className="dataviews-view-list__details-button"
+									onClick={ () =>
+										onDetailsChange( [ item ] )
+									}
+									icon={ info }
+									label={ __( 'View details' ) }
+									size="compact"
+								/>
+							) }
+						</HStack>
 					</li>
 				);
 			} ) }