@wordpress/dataviews 3.0.0 → 4.1.0

package/src/{stories → components/dataviews/stories}/index.story.js

@@ -6,10 +6,10 @@ import { useState, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { DataViews } from '../index';
+import DataViews from '../index';
 import { DEFAULT_VIEW, actions, data, fields } from './fixtures';
-import { LAYOUT_GRID, LAYOUT_TABLE } from '../constants';
-import { filterSortAndPaginate } from '../filter-and-sort-data-view';
+import { LAYOUT_GRID, LAYOUT_TABLE } from '../../../constants';
+import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
 
 const meta = {
 	title: 'DataViews/DataViews',
@@ -39,6 +39,20 @@ Default.args = {
 		[ LAYOUT_TABLE ]: {
 			layout: {
 				primaryField: 'title',
+				styles: {
+					image: {
+						width: 50,
+					},
+					title: {
+						maxWidth: 400,
+					},
+					type: {
+						maxWidth: 400,
+					},
+					description: {
+						maxWidth: 200,
+					},
+				},
 			},
 		},
 		[ LAYOUT_GRID ]: {

package/src/components/dataviews/style.scss

@@ -0,0 +1,100 @@
+.dataviews-wrapper {
+	height: 100%;
+	overflow: auto;
+	box-sizing: border-box;
+	scroll-padding-bottom: $grid-unit-80;
+	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
+	container: dataviews-wrapper / inline-size;
+	display: flex;
+	flex-direction: column;
+}
+
+.dataviews__view-actions,
+.dataviews-filters__container {
+	box-sizing: border-box;
+	padding: $grid-unit-20 $grid-unit-60;
+	flex-shrink: 0;
+	position: sticky;
+	left: 0;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+
+	.components-search-control {
+		.components-base-control__field {
+			max-width: 240px;
+		}
+	}
+}
+
+.dataviews-view-list__primary-field,
+.dataviews-view-grid__primary-field,
+.dataviews-view-table__primary-field {
+	font-size: $default-font-size;
+	font-weight: 500;
+	color: $gray-700;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width: 100%;
+
+	a {
+		text-decoration: none;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+		display: block;
+		flex-grow: 0;
+		color: $gray-900;
+
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+		@include link-reset();
+	}
+
+	button.components-button.is-link {
+		text-decoration: none;
+		font-weight: inherit;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+		display: block;
+		width: 100%;
+		color: $gray-900;
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+	}
+}
+
+.dataviews-no-results,
+.dataviews-loading {
+	padding: 0 $grid-unit-60;
+	flex-grow: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.dataviews__view-actions,
+	.dataviews-filters__container {
+		padding: $grid-unit-15 $grid-unit-30;
+
+		.components-search-control {
+			.components-base-control__field {
+				max-width: 112px;
+			}
+		}
+	}
+
+	.dataviews-view-grid,
+	.dataviews-no-results,
+	.dataviews-loading {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+}
+

package/src/{bulk-actions.tsx → components/dataviews-bulk-actions/index.tsx}

@@ -7,15 +7,16 @@ import {
 	Modal,
 } from '@wordpress/components';
 import { __, sprintf, _n } from '@wordpress/i18n';
-import { useMemo, useState, useCallback } from '@wordpress/element';
+import { useMemo, useState, useCallback, useContext } from '@wordpress/element';
 import { useRegistry } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
-import type { Action, ActionModal } from './types';
-import type { SetSelection } from './private-types';
+import DataViewsContext from '../dataviews-context';
+import { LAYOUT_TABLE, LAYOUT_GRID } from '../../constants';
+import { unlock } from '../../lock-unlock';
+import type { Action, ActionModal } from '../../types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -43,14 +44,6 @@ interface ActionsMenuGroupProps< Item > {
 	setActionWithModal: ( action?: ActionModal< Item > ) => void;
 }
 
-interface BulkActionsProps< Item > {
-	data: Item[];
-	actions: Action< Item >[];
-	selection: string[];
-	onSelectionChange: SetSelection;
-	getItemId: ( item: Item ) => string;
-}
-
 export function useHasAPossibleBulkAction< Item >(
 	actions: Action< Item >[],
 	item: Item
@@ -96,6 +89,11 @@ function ActionWithModal< Item >( {
 	const onCloseModal = useCallback( () => {
 		setActionWithModal( undefined );
 	}, [ setActionWithModal ] );
+
+	if ( ! eligibleItems.length ) {
+		return null;
+	}
+
 	const label =
 		typeof action.label === 'string'
 			? action.label
@@ -105,7 +103,7 @@ function ActionWithModal< Item >( {
 			title={ ! hideModalHeader ? label : undefined }
 			__experimentalHideHeader={ !! hideModalHeader }
 			onRequestClose={ onCloseModal }
-			overlayClassName="dataviews-action-modal"
+			overlayClassName="dataviews-bulk-actions__modal"
 		>
 			<RenderModal
 				items={ eligibleItems }
@@ -133,7 +131,6 @@ function BulkActionItem< Item >( {
 	return (
 		<DropdownMenuItem
 			key={ action.id }
-			disabled={ eligibleItems.length === 0 }
 			hideOnClick={ ! shouldShowModal }
 			onClick={ async () => {
 				if ( shouldShowModal ) {
@@ -142,9 +139,7 @@ function BulkActionItem< Item >( {
 					action.callback( eligibleItems, { registry } );
 				}
 			} }
-			suffix={
-				eligibleItems.length > 0 ? eligibleItems.length : undefined
-			}
+			suffix={ eligibleItems.length }
 		>
 			{ action.label }
 		</DropdownMenuItem>
@@ -156,10 +151,20 @@ function ActionsMenuGroup< Item >( {
 	selectedItems,
 	setActionWithModal,
 }: ActionsMenuGroupProps< Item > ) {
+	const elligibleActions = useMemo( () => {
+		return actions.filter( ( action ) => {
+			return selectedItems.some(
+				( item ) => ! action.isEligible || action.isEligible( item )
+			);
+		} );
+	}, [ actions, selectedItems ] );
+	if ( ! elligibleActions.length ) {
+		return null;
+	}
 	return (
 		<>
 			<DropdownMenuGroup>
-				{ actions.map( ( action ) => (
+				{ elligibleActions.map( ( action ) => (
 					<BulkActionItem
 						key={ action.id }
 						action={ action }
@@ -173,20 +178,21 @@ function ActionsMenuGroup< Item >( {
 	);
 }
 
-export default function BulkActions< Item >( {
-	data,
-	actions,
-	selection,
-	onSelectionChange,
-	getItemId,
-}: BulkActionsProps< Item > ) {
+function _BulkActions() {
+	const {
+		data,
+		actions = [],
+		selection,
+		onChangeSelection,
+		getItemId,
+	} = useContext( DataViewsContext );
 	const bulkActions = useMemo(
 		() => actions.filter( ( action ) => action.supportsBulk ),
 		[ actions ]
 	);
 	const [ isMenuOpen, onMenuOpenChange ] = useState( false );
 	const [ actionWithModal, setActionWithModal ] = useState<
-		ActionModal< Item > | undefined
+		ActionModal< any > | undefined
 	>();
 	const selectableItems = useMemo( () => {
 		return data.filter( ( item ) => {
@@ -220,7 +226,7 @@ export default function BulkActions< Item >( {
 				style={ { minWidth: '240px' } }
 				trigger={
 					<Button
-						className="dataviews-bulk-edit-button"
+						className="dataviews-bulk-actions__edit-button"
 						__next40pxDefaultSize
 						variant="tertiary"
 						size="compact"
@@ -249,7 +255,7 @@ export default function BulkActions< Item >( {
 						disabled={ areAllSelected }
 						hideOnClick={ false }
 						onClick={ () => {
-							onSelectionChange(
+							onChangeSelection(
 								selectableItems.map( ( item ) =>
 									getItemId( item )
 								)
@@ -263,7 +269,7 @@ export default function BulkActions< Item >( {
 						disabled={ selection.length === 0 }
 						hideOnClick={ false }
 						onClick={ () => {
-							onSelectionChange( [] );
+							onChangeSelection( [] );
 						} }
 					>
 						{ __( 'Deselect' ) }
@@ -281,3 +287,19 @@ export default function BulkActions< Item >( {
 		</>
 	);
 }
+
+export default function BulkActions() {
+	const { data, actions = [], view } = useContext( DataViewsContext );
+	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
+		actions,
+		data
+	);
+	if (
+		! [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) ||
+		! hasPossibleBulkAction
+	) {
+		return null;
+	}
+
+	return <_BulkActions />;
+}

package/src/components/dataviews-bulk-actions/style.scss

@@ -0,0 +1,7 @@
+.dataviews-bulk-actions__modal {
+	z-index: z-index(".dataviews-bulk-actions__modal");
+}
+
+.dataviews-bulk-actions__edit-button.components-button {
+	flex-shrink: 0;
+}

package/src/{bulk-actions-toolbar.tsx → components/dataviews-bulk-actions-toolbar/index.tsx}

@@ -8,7 +8,7 @@ import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
-import { useMemo, useState, useRef } from '@wordpress/element';
+import { useMemo, useState, useRef, useContext } from '@wordpress/element';
 import { _n, sprintf, __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { useReducedMotion } from '@wordpress/compose';
@@ -17,10 +17,13 @@ import { useRegistry } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { ActionWithModal } from './item-actions';
-import type { Action } from './types';
-import type { ActionTriggerProps } from './item-actions';
-import type { SetSelection } from './private-types';
+import { useSomeItemHasAPossibleBulkAction } from '../dataviews-bulk-actions';
+import DataViewsContext from '../dataviews-context';
+import { ActionWithModal } from '../dataviews-item-actions';
+import { LAYOUT_GRID, LAYOUT_TABLE } from '../../constants';
+import type { Action } from '../../types';
+import type { ActionTriggerProps } from '../dataviews-item-actions';
+import type { SetSelection } from '../../private-types';
 
 interface ActionButtonProps< Item > {
 	action: Action< Item >;
@@ -33,15 +36,7 @@ interface ToolbarContentProps< Item > {
 	selection: string[];
 	actionsToShow: Action< Item >[];
 	selectedItems: Item[];
-	onSelectionChange: SetSelection;
-}
-
-interface BulkActionsToolbarProps< Item > {
-	data: Item[];
-	selection: string[];
-	actions: Action< Item >[];
-	onSelectionChange: SetSelection;
-	getItemId: ( item: Item ) => string;
+	onChangeSelection: SetSelection;
 }
 
 const SNACKBAR_VARIANTS = {
@@ -131,12 +126,12 @@ function renderToolbarContent< Item >(
 	selectedItems: Item[],
 	actionInProgress: string | null,
 	setActionInProgress: ( actionId: string | null ) => void,
-	onSelectionChange: SetSelection
+	onChangeSelection: SetSelection
 ) {
 	return (
 		<>
 			<ToolbarGroup>
-				<div className="dataviews-bulk-actions__selection-count">
+				<div className="dataviews-bulk-actions-toolbar__selection-count">
 					{ selection.length === 1
 						? __( '1 item selected' )
 						: sprintf(
@@ -171,7 +166,7 @@ function renderToolbarContent< Item >(
 					label={ __( 'Cancel' ) }
 					disabled={ !! actionInProgress }
 					onClick={ () => {
-						onSelectionChange( EMPTY_ARRAY );
+						onChangeSelection( EMPTY_ARRAY );
 					} }
 				/>
 			</ToolbarGroup>
@@ -183,7 +178,7 @@ function ToolbarContent< Item >( {
 	selection,
 	actionsToShow,
 	selectedItems,
-	onSelectionChange,
+	onChangeSelection,
 }: ToolbarContentProps< Item > ) {
 	const [ actionInProgress, setActionInProgress ] = useState< string | null >(
 		null
@@ -199,7 +194,7 @@ function ToolbarContent< Item >( {
 			selectedItems,
 			actionInProgress,
 			setActionInProgress,
-			onSelectionChange
+			onChangeSelection
 		);
 	} else if ( ! buttons.current ) {
 		buttons.current = renderToolbarContent(
@@ -208,19 +203,20 @@ function ToolbarContent< Item >( {
 			selectedItems,
 			actionInProgress,
 			setActionInProgress,
-			onSelectionChange
+			onChangeSelection
 		);
 	}
 	return buttons.current;
 }
 
-export default function BulkActionsToolbar< Item >( {
-	data,
-	selection,
-	actions = EMPTY_ARRAY,
-	onSelectionChange,
-	getItemId,
-}: BulkActionsToolbarProps< Item > ) {
+function _BulkActionsToolbar() {
+	const {
+		data,
+		selection,
+		actions = EMPTY_ARRAY,
+		onChangeSelection,
+		getItemId,
+	} = useContext( DataViewsContext );
 	const isReducedMotion = useReducedMotion();
 	const selectedItems = useMemo( () => {
 		return data.filter( ( item ) =>
@@ -258,15 +254,15 @@ export default function BulkActionsToolbar< Item >( {
 				animate="open"
 				exit="exit"
 				variants={ isReducedMotion ? undefined : SNACKBAR_VARIANTS }
-				className="dataviews-bulk-actions"
+				className="dataviews-bulk-actions-toolbar"
 			>
 				<Toolbar label={ __( 'Bulk actions' ) }>
-					<div className="dataviews-bulk-actions-toolbar-wrapper">
+					<div className="dataviews-bulk-actions-toolbar__wrapper">
 						<ToolbarContent
 							selection={ selection }
 							actionsToShow={ actionsToShow }
 							selectedItems={ selectedItems }
-							onSelectionChange={ onSelectionChange }
+							onChangeSelection={ onChangeSelection }
 						/>
 					</div>
 				</Toolbar>
@@ -274,3 +270,19 @@ export default function BulkActionsToolbar< Item >( {
 		</AnimatePresence>
 	);
 }
+
+export default function BulkActionsToolbar() {
+	const { data, actions = [], view } = useContext( DataViewsContext );
+	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
+		actions,
+		data
+	);
+	if (
+		! [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) ||
+		! hasPossibleBulkAction
+	) {
+		return null;
+	}
+
+	return <_BulkActionsToolbar />;
+}

package/src/components/dataviews-bulk-actions-toolbar/style.scss

@@ -0,0 +1,45 @@
+.dataviews-bulk-actions-toolbar {
+	position: sticky;
+	display: flex;
+	flex-direction: column;
+	align-content: center;
+	flex-wrap: wrap;
+	width: fit-content;
+	margin-left: auto;
+	margin-right: auto;
+	bottom: $grid-unit-30;
+	z-index: z-index(".dataviews-bulk-actions-toolbar");
+
+	.components-accessible-toolbar {
+		border-color: $gray-300;
+		box-shadow: $shadow-popover;
+
+		.components-toolbar-group {
+			border-color: $gray-200;
+
+			&:last-child {
+				border: 0;
+			}
+		}
+	}
+
+	.dataviews-bulk-actions-toolbar__selection-count {
+		display: flex;
+		align-items: center;
+		margin: 0 $grid-unit-10 0 $grid-unit-10;
+	}
+}
+
+.dataviews-bulk-actions-toolbar__wrapper {
+	display: flex;
+	flex-grow: 1;
+	width: 100%;
+
+	.components-toolbar-group {
+		align-items: center;
+	}
+
+	.components-button.is-busy {
+		max-height: $button-size;
+	}
+}

package/src/components/dataviews-context/index.ts

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { View, Action, NormalizedField } from '../../types';
+import type { SetSelection } from '../../private-types';
+import { LAYOUT_TABLE } from '../../constants';
+
+type DataViewsContextType< Item > = {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	fields: NormalizedField< Item >[];
+	actions?: Action< Item >[];
+	data: Item[];
+	isLoading?: boolean;
+	paginationInfo: {
+		totalItems: number;
+		totalPages: number;
+	};
+	selection: string[];
+	onChangeSelection: SetSelection;
+	openedFilter: string | null;
+	setOpenedFilter: ( openedFilter: string | null ) => void;
+	getItemId: ( item: Item ) => string;
+	density: number;
+};
+
+const DataViewsContext = createContext< DataViewsContextType< any > >( {
+	view: { type: LAYOUT_TABLE },
+	onChangeView: () => {},
+	fields: [],
+	data: [],
+	paginationInfo: {
+		totalItems: 0,
+		totalPages: 0,
+	},
+	selection: [],
+	onChangeSelection: () => {},
+	setOpenedFilter: () => {},
+	openedFilter: null,
+	getItemId: ( item ) => item.id,
+	density: 0,
+} );
+
+export default DataViewsContext;

package/src/{add-filter.tsx → components/dataviews-filters/add-filter.tsx}

@@ -16,8 +16,8 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
-import type { NormalizedFilter, View } from './types';
+import { unlock } from '../../lock-unlock';
+import type { NormalizedFilter, View } from '../../types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -32,29 +32,18 @@ interface AddFilterProps {
 	setOpenedFilter: ( filter: string | null ) => void;
 }
 
-function AddFilter(
-	{ filters, view, onChangeView, setOpenedFilter }: AddFilterProps,
-	ref: Ref< HTMLButtonElement >
-) {
-	if ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) {
-		return null;
-	}
+export function AddFilterDropdownMenu( {
+	filters,
+	view,
+	onChangeView,
+	setOpenedFilter,
+	trigger,
+}: AddFilterProps & {
+	trigger: React.ReactNode;
+} ) {
 	const inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );
 	return (
-		<DropdownMenu
-			trigger={
-				<Button
-					accessibleWhenDisabled
-					size="compact"
-					className="dataviews-filters-button"
-					variant="tertiary"
-					disabled={ ! inactiveFilters.length }
-					ref={ ref }
-				>
-					{ __( 'Add filter' ) }
-				</Button>
-			}
-		>
+		<DropdownMenu trigger={ trigger }>
 			{ inactiveFilters.map( ( filter ) => {
 				return (
 					<DropdownMenuItem
@@ -85,4 +74,31 @@ function AddFilter(
 	);
 }
 
+function AddFilter(
+	{ filters, view, onChangeView, setOpenedFilter }: AddFilterProps,
+	ref: Ref< HTMLButtonElement >
+) {
+	if ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) {
+		return null;
+	}
+	const inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );
+	return (
+		<AddFilterDropdownMenu
+			trigger={
+				<Button
+					accessibleWhenDisabled
+					size="compact"
+					className="dataviews-filters-button"
+					variant="tertiary"
+					disabled={ ! inactiveFilters.length }
+					ref={ ref }
+				>
+					{ __( 'Add filter' ) }
+				</Button>
+			}
+			{ ...{ filters, view, onChangeView, setOpenedFilter } }
+		/>
+	);
+}
+
 export default forwardRef( AddFilter );