@wordpress/edit-site 5.22.0 → 5.24.0

package/src/components/dataviews/item-actions.js

@@ -2,17 +2,103 @@
  * WordPress dependencies
  */
 import {
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
 	Button,
+	Modal,
 	__experimentalHStack as HStack,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 import { moreVertical } from '@wordpress/icons';
 
-export default function ItemActions( { item, actions } ) {
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const {
+	DropdownMenuV2Ariakit: DropdownMenu,
+	DropdownMenuGroupV2Ariakit: DropdownMenuGroup,
+	DropdownMenuItemV2Ariakit: DropdownMenuItem,
+	DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel,
+} = unlock( componentsPrivateApis );
+
+function ButtonTrigger( { action, onClick } ) {
+	return (
+		<Button
+			label={ action.label }
+			icon={ action.icon }
+			isDestructive={ action.isDestructive }
+			size="compact"
+			onClick={ onClick }
+		/>
+	);
+}
+
+function DropdownMenuItemTrigger( { action, onClick } ) {
+	return (
+		<DropdownMenuItem onClick={ onClick }>
+			<DropdownMenuItemLabel>{ action.label }</DropdownMenuItemLabel>
+		</DropdownMenuItem>
+	);
+}
+
+function ActionWithModal( { action, item, ActionTrigger } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const actionTriggerProps = {
+		action,
+		onClick: () => setIsModalOpen( true ),
+	};
+	const { RenderModal, hideModalHeader } = action;
+	return (
+		<>
+			<ActionTrigger { ...actionTriggerProps } />
+			{ isModalOpen && (
+				<Modal
+					title={ ! hideModalHeader && action.label }
+					__experimentalHideHeader={ !! hideModalHeader }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+					} }
+					overlayClassName="dataviews-action-modal"
+				>
+					<RenderModal
+						item={ item }
+						closeModal={ () => setIsModalOpen( false ) }
+					/>
+				</Modal>
+			) }
+		</>
+	);
+}
+
+function ActionsDropdownMenuGroup( { actions, item } ) {
+	return (
+		<DropdownMenuGroup>
+			{ actions.map( ( action ) => {
+				if ( !! action.RenderModal ) {
+					return (
+						<ActionWithModal
+							key={ action.id }
+							action={ action }
+							item={ item }
+							ActionTrigger={ DropdownMenuItemTrigger }
+						/>
+					);
+				}
+				return (
+					<DropdownMenuItemTrigger
+						key={ action.id }
+						action={ action }
+						onClick={ () => action.callback( item ) }
+					/>
+				);
+			} ) }
+		</DropdownMenuGroup>
+	);
+}
+
+export default function ItemActions( { item, actions, isCompact } ) {
 	const { primaryActions, secondaryActions } = useMemo( () => {
 		return actions.reduce(
 			( accumulator, action ) => {
@@ -34,36 +120,89 @@ export default function ItemActions( { item, actions } ) {
 	if ( ! primaryActions.length && ! secondaryActions.length ) {
 		return null;
 	}
+	if ( isCompact ) {
+		return (
+			<CompactItemActions
+				item={ item }
+				primaryActions={ primaryActions }
+				secondaryActions={ secondaryActions }
+			/>
+		);
+	}
 	return (
-		<HStack justify="flex-end">
+		<HStack
+			spacing={ 1 }
+			justify="flex-end"
+			style={ {
+				flexShrink: '0',
+				width: 'auto',
+			} }
+		>
 			{ !! primaryActions.length &&
-				primaryActions.map( ( action ) => (
-					<Button
-						label={ action.label }
-						key={ action.id }
-						icon={ action.icon }
-						onClick={ () => action.perform( item ) }
-						isDestructive={ action.isDestructive }
-						size="compact"
-					/>
-				) ) }
+				primaryActions.map( ( action ) => {
+					if ( !! action.RenderModal ) {
+						return (
+							<ActionWithModal
+								key={ action.id }
+								action={ action }
+								item={ item }
+								ActionTrigger={ ButtonTrigger }
+							/>
+						);
+					}
+					return (
+						<ButtonTrigger
+							key={ action.id }
+							action={ action }
+							onClick={ () => action.callback( item ) }
+						/>
+					);
+				} ) }
 			{ !! secondaryActions.length && (
-				<DropdownMenu icon={ moreVertical } label={ __( 'Actions' ) }>
-					{ () => (
-						<MenuGroup>
-							{ secondaryActions.map( ( action ) => (
-								<MenuItem
-									key={ action.id }
-									onClick={ () => action.perform( item ) }
-									isDestructive={ action.isDestructive }
-								>
-									{ action.label }
-								</MenuItem>
-							) ) }
-						</MenuGroup>
-					) }
+				<DropdownMenu
+					trigger={
+						<Button
+							size="compact"
+							icon={ moreVertical }
+							label={ __( 'Actions' ) }
+						/>
+					}
+					placement="bottom-end"
+				>
+					<ActionsDropdownMenuGroup
+						actions={ secondaryActions }
+						item={ item }
+					/>
 				</DropdownMenu>
 			) }
 		</HStack>
 	);
 }
+
+function CompactItemActions( { item, primaryActions, secondaryActions } ) {
+	return (
+		<DropdownMenu
+			trigger={
+				<Button
+					size="compact"
+					icon={ moreVertical }
+					label={ __( 'Actions' ) }
+				/>
+			}
+			placement="bottom-end"
+		>
+			{ !! primaryActions.length && (
+				<ActionsDropdownMenuGroup
+					actions={ primaryActions }
+					item={ item }
+				/>
+			) }
+			{ !! secondaryActions.length && (
+				<ActionsDropdownMenuGroup
+					actions={ secondaryActions }
+					item={ item }
+				/>
+			) }
+		</DropdownMenu>
+	);
+}

package/src/components/dataviews/pagination.js

@@ -48,6 +48,7 @@ function Pagination( {
 								onChangeView( { ...view, page: 1 } )
 							}
 							disabled={ view.page === 1 }
+							__experimentalIsFocusable
 							label={ __( 'First page' ) }
 							icon={ previous }
 							showTooltip
@@ -58,6 +59,7 @@ function Pagination( {
 								onChangeView( { ...view, page: view.page - 1 } )
 							}
 							disabled={ view.page === 1 }
+							__experimentalIsFocusable
 							label={ __( 'Previous page' ) }
 							icon={ chevronLeft }
 							showTooltip
@@ -83,16 +85,17 @@ function Pagination( {
 										min={ 1 }
 										max={ totalPages }
 										onChange={ ( value ) => {
+											const _value = +value;
 											if (
-												! value ||
-												value < 1 ||
-												value > totalPages
+												! _value ||
+												_value < 1 ||
+												_value > totalPages
 											) {
 												return;
 											}
 											onChangeView( {
 												...view,
-												page: value,
+												page: _value,
 											} );
 										} }
 										step="1"
@@ -114,6 +117,7 @@ function Pagination( {
 								onChangeView( { ...view, page: view.page + 1 } )
 							}
 							disabled={ view.page >= totalPages }
+							__experimentalIsFocusable
 							label={ __( 'Next page' ) }
 							icon={ chevronRight }
 							showTooltip
@@ -124,6 +128,7 @@ function Pagination( {
 								onChangeView( { ...view, page: totalPages } )
 							}
 							disabled={ view.page >= totalPages }
+							__experimentalIsFocusable
 							label={ __( 'Last page' ) }
 							icon={ next }
 							showTooltip

package/src/components/dataviews/reset-filters.js

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

package/src/components/dataviews/search.js

@@ -31,6 +31,7 @@ export default function Search( { label, view, onChangeView } ) {
 	const searchLabel = label || __( 'Filter list' );
 	return (
 		<SearchControl
+			__nextHasNoMarginBottom
 			onChange={ setSearch }
 			value={ search }
 			label={ searchLabel }

package/src/components/dataviews/style.scss

@@ -1,8 +1,8 @@
 .dataviews-wrapper {
 	width: 100%;
-	height: 100%;
+	height: calc(100% - #{$grid-unit-40} * 2);
 	overflow: auto;
-	padding: $grid-unit-40;
+	padding: $grid-unit-40 $grid-unit-40 0;
 
 	> div {
 		min-height: 100%;
@@ -11,6 +11,15 @@
 
 .dataviews-pagination {
 	margin-top: auto;
+	position: sticky;
+	bottom: 0;
+	background-color: $white;
+	padding: $grid-unit-20 0;
+	border-top: $border-width solid $gray-200;
+}
+
+.dataviews-filters-options {
+	margin: $grid-unit-40 0 $grid-unit-20;
 }
 
 .dataviews-list-view {
@@ -19,6 +28,7 @@
 	border-color: inherit;
 	border-collapse: collapse;
 	position: relative;
+
 	a {
 		text-decoration: none;
 	}
@@ -31,21 +41,91 @@
 	td,
 	th {
 		padding: $grid-unit-15;
-		&:last-child {
+		&[data-field-id="actions"] {
 			text-align: right;
 		}
 	}
 	tr {
 		border-bottom: 1px solid $gray-100;
+
+		&:last-child {
+			border-bottom: 0;
+		}
+	}
+	thead {
+		tr {
+			border: 0;
+		}
+		th {
+			position: sticky;
+			top: - #{$grid-unit-40}; // Offset the container padding
+			background-color: $white;
+			box-shadow: inset 0 -#{$border-width} 0 $gray-200;
+		}
 	}
 }
 
-.dataviews-view-grid__media {
-	width: 100%;
-	min-height: 200px;
+.dataviews-grid-view {
+	margin-bottom: $grid-unit-30;
+	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+
+	@include break-xlarge() {
+		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
+	}
+
+	@include break-huge() {
+		grid-template-columns: repeat(4, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
+	}
 
-	> * {
-		max-width: 100%;
-		object-fit: cover;
+	.dataviews-view-grid__card {
+		h3 { // Todo: A better way to target this
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+
+	.dataviews-view-grid__media {
+		width: 100%;
+		min-height: 200px;
+		aspect-ratio: 1/1;
+		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+		border-radius: $radius-block-ui * 2;
+		overflow: hidden;
+
+		> * {
+			object-fit: cover;
+			width: 100%;
+			height: 100%;
+		}
 	}
+
+	.dataviews-view-grid__title {
+		min-height: $grid-unit-30;
+
+		a {
+			color: $gray-900;
+			text-decoration: none;
+			font-weight: 500;
+		}
+	}
+
+	.dataviews-view-grid__fields {
+		position: relative;
+		font-size: 12px;
+		line-height: 16px;
+
+		.dataviews-view-grid__field {
+			.dataviews-view-grid__field-header {
+				color: $gray-700;
+			}
+			.dataviews-view-grid__field-value {
+				color: $gray-900;
+			}
+		}
+	}
+}
+
+.dataviews-action-modal {
+	z-index: z-index(".dataviews-action-modal");
 }