@wordpress/dataviews 3.0.0 → 4.1.0

package/src/components/dataviews-layout/index.tsx

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import type { ComponentType } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../dataviews-context';
+import { VIEW_LAYOUTS } from '../../dataviews-layouts';
+import type { ViewBaseProps } from '../../types';
+
+export default function DataViewsLayout() {
+	const {
+		actions = [],
+		data,
+		fields,
+		getItemId,
+		isLoading,
+		view,
+		onChangeView,
+		selection,
+		onChangeSelection,
+		setOpenedFilter,
+		density,
+	} = useContext( DataViewsContext );
+
+	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
+		?.component as ComponentType< ViewBaseProps< any > >;
+
+	return (
+		<ViewComponent
+			actions={ actions }
+			data={ data }
+			fields={ fields }
+			getItemId={ getItemId }
+			isLoading={ isLoading }
+			onChangeView={ onChangeView }
+			onChangeSelection={ onChangeSelection }
+			selection={ selection }
+			setOpenedFilter={ setOpenedFilter }
+			view={ view }
+			density={ density }
+		/>
+	);
+}

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

@@ -6,29 +6,21 @@ import {
 	__experimentalHStack as HStack,
 	SelectControl,
 } from '@wordpress/components';
-import { createInterpolateElement, memo } from '@wordpress/element';
+import { createInterpolateElement, memo, useContext } from '@wordpress/element';
 import { sprintf, __, _x } from '@wordpress/i18n';
-import { chevronRight, chevronLeft } from '@wordpress/icons';
+import { next, previous } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import type { View } from './types';
+import DataViewsContext from '../dataviews-context';
 
-interface PaginationProps {
-	view: View;
-	onChangeView: ( view: View ) => void;
-	paginationInfo: {
-		totalItems: number;
-		totalPages: number;
-	};
-}
-
-const Pagination = memo( function Pagination( {
-	view,
-	onChangeView,
-	paginationInfo: { totalItems = 0, totalPages },
-}: PaginationProps ) {
+function DataViewsPagination() {
+	const {
+		view,
+		onChangeView,
+		paginationInfo: { totalItems = 0, totalPages },
+	} = useContext( DataViewsContext );
 	if ( ! totalItems || ! totalPages ) {
 		return null;
 	}
@@ -92,7 +84,7 @@ const Pagination = memo( function Pagination( {
 						disabled={ currentPage === 1 }
 						accessibleWhenDisabled
 						label={ __( 'Previous page' ) }
-						icon={ chevronLeft }
+						icon={ previous }
 						showTooltip
 						size="compact"
 						tooltipPosition="top"
@@ -104,7 +96,7 @@ const Pagination = memo( function Pagination( {
 						disabled={ currentPage >= totalPages }
 						accessibleWhenDisabled
 						label={ __( 'Next page' ) }
-						icon={ chevronRight }
+						icon={ next }
 						showTooltip
 						size="compact"
 						tooltipPosition="top"
@@ -113,6 +105,6 @@ const Pagination = memo( function Pagination( {
 			</HStack>
 		)
 	);
-} );
+}
 
-export default Pagination;
+export default memo( DataViewsPagination );

package/src/components/dataviews-pagination/style.scss

@@ -0,0 +1,26 @@
+.dataviews-pagination {
+	position: sticky;
+	bottom: 0;
+	left: 0;
+	background-color: $white;
+	padding: $grid-unit-15 $grid-unit-60;
+	border-top: $border-width solid $gray-100;
+	color: $gray-700;
+	flex-shrink: 0;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+}
+
+.dataviews-pagination__page-selection {
+	font-size: 11px;
+	text-transform: uppercase;
+	font-weight: 500;
+	color: $gray-900;
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.dataviews-pagination {
+		padding: $grid-unit-15 $grid-unit-30;
+	}
+}

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

@@ -2,26 +2,21 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect, useRef, memo } from '@wordpress/element';
+import { useEffect, useRef, memo, useContext } from '@wordpress/element';
 import { SearchControl } from '@wordpress/components';
 import { useDebouncedInput } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import type { View } from './types';
+import DataViewsContext from '../dataviews-context';
 
 interface SearchProps {
 	label?: string;
-	view: View;
-	onChangeView: ( view: View ) => void;
 }
 
-const Search = memo( function Search( {
-	label,
-	view,
-	onChangeView,
-}: SearchProps ) {
+const DataViewsSearch = memo( function Search( { label }: SearchProps ) {
+	const { view, onChangeView } = useContext( DataViewsContext );
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
 		view.search
 	);
@@ -35,15 +30,18 @@ const Search = memo( function Search( {
 		viewRef.current = view;
 	}, [ onChangeView, view ] );
 	useEffect( () => {
-		onChangeViewRef.current( {
-			...viewRef.current,
-			page: 1,
-			search: debouncedSearch,
-		} );
+		if ( debouncedSearch !== viewRef.current?.search ) {
+			onChangeViewRef.current( {
+				...viewRef.current,
+				page: 1,
+				search: debouncedSearch,
+			} );
+		}
 	}, [ debouncedSearch ] );
 	const searchLabel = label || __( 'Search' );
 	return (
 		<SearchControl
+			className="dataviews-search"
 			__nextHasNoMarginBottom
 			onChange={ setSearch }
 			value={ search }
@@ -54,4 +52,4 @@ const Search = memo( function Search( {
 	);
 } );
 
-export default Search;
+export default DataViewsSearch;

package/src/{single-selection-checkbox.tsx → components/dataviews-selection-checkbox/index.tsx}

@@ -7,26 +7,26 @@ import { CheckboxControl } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import type { Field } from './types';
-import type { SetSelection } from './private-types';
+import type { Field } from '../../types';
+import type { SetSelection } from '../../private-types';
 
-interface SingleSelectionCheckboxProps< Item > {
+interface DataViewsSelectionCheckboxProps< Item > {
 	selection: string[];
-	onSelectionChange: SetSelection;
+	onChangeSelection: SetSelection;
 	item: Item;
 	getItemId: ( item: Item ) => string;
 	primaryField?: Field< Item >;
 	disabled: boolean;
 }
 
-export default function SingleSelectionCheckbox< Item >( {
+export default function DataViewsSelectionCheckbox< Item >( {
 	selection,
-	onSelectionChange,
+	onChangeSelection,
 	item,
 	getItemId,
 	primaryField,
 	disabled,
-}: SingleSelectionCheckboxProps< Item > ) {
+}: DataViewsSelectionCheckboxProps< Item > ) {
 	const id = getItemId( item );
 	const checked = ! disabled && selection.includes( id );
 	let selectionLabel;
@@ -44,7 +44,7 @@ export default function SingleSelectionCheckbox< Item >( {
 	}
 	return (
 		<CheckboxControl
-			className="dataviews-view-table-selection-checkbox"
+			className="dataviews-selection-checkbox"
 			__nextHasNoMarginBottom
 			aria-label={ selectionLabel }
 			aria-disabled={ disabled }
@@ -54,7 +54,7 @@ export default function SingleSelectionCheckbox< Item >( {
 					return;
 				}
 
-				onSelectionChange(
+				onChangeSelection(
 					selection.includes( id )
 						? selection.filter( ( itemId ) => id !== itemId )
 						: [ ...selection, id ]

package/src/components/dataviews-selection-checkbox/style.scss

@@ -0,0 +1,14 @@
+.dataviews-selection-checkbox {
+	// Experimental override for CheckboxControl size (fragile)
+	--checkbox-input-size: 24px;
+	@include break-small() {
+		--checkbox-input-size: 16px;
+	}
+
+	line-height: 0;
+	flex-shrink: 0;
+
+	.components-checkbox-control__input-container {
+		margin: 0;
+	}
+}

package/src/components/dataviews-view-config/index.tsx

@@ -0,0 +1,358 @@
+/**
+ * External dependencies
+ */
+import type { ChangeEvent } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Popover,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+	SelectControl,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalGrid as Grid,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { memo, useContext, useState, useMemo } from '@wordpress/element';
+import { cog, seen, unseen } from '@wordpress/icons';
+import warning from '@wordpress/warning';
+
+/**
+ * Internal dependencies
+ */
+import { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';
+import { VIEW_LAYOUTS, getMandatoryFields } from '../../dataviews-layouts';
+import type { SupportedLayouts } from '../../types';
+import DataViewsContext from '../dataviews-context';
+import { unlock } from '../../lock-unlock';
+
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
+	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+} = unlock( componentsPrivateApis );
+
+interface ViewTypeMenuProps {
+	defaultLayouts?: SupportedLayouts;
+}
+
+function ViewTypeMenu( {
+	defaultLayouts = { list: {}, grid: {}, table: {} },
+}: ViewTypeMenuProps ) {
+	const { view, onChangeView } = useContext( DataViewsContext );
+	const availableLayouts = Object.keys( defaultLayouts );
+	if ( availableLayouts.length <= 1 ) {
+		return null;
+	}
+	const activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );
+	return (
+		<DropdownMenu
+			trigger={
+				<Button
+					size="compact"
+					icon={ activeView?.icon }
+					label={ __( 'Layout' ) }
+				/>
+			}
+		>
+			{ availableLayouts.map( ( layout ) => {
+				const config = VIEW_LAYOUTS.find( ( v ) => v.type === layout );
+				if ( ! config ) {
+					return null;
+				}
+				return (
+					<DropdownMenuRadioItem
+						key={ layout }
+						value={ layout }
+						name="view-actions-available-view"
+						checked={ layout === view.type }
+						hideOnClick
+						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => {
+							switch ( e.target.value ) {
+								case 'list':
+								case 'grid':
+								case 'table':
+									return onChangeView( {
+										...view,
+										type: e.target.value,
+										...defaultLayouts[ e.target.value ],
+									} );
+							}
+							warning( 'Invalid dataview' );
+						} }
+					>
+						<DropdownMenuItemLabel>
+							{ config.label }
+						</DropdownMenuItemLabel>
+					</DropdownMenuRadioItem>
+				);
+			} ) }
+		</DropdownMenu>
+	);
+}
+
+interface ViewActionsProps {
+	defaultLayouts?: SupportedLayouts;
+}
+
+function SortFieldControl() {
+	const { view, fields, onChangeView } = useContext( DataViewsContext );
+	const orderOptions = useMemo( () => {
+		const sortableFields = fields.filter(
+			( field ) => field.enableSorting !== false
+		);
+		return sortableFields.map( ( field ) => {
+			return {
+				label: field.label,
+				value: field.id,
+			};
+		} );
+	}, [ fields ] );
+
+	return (
+		<SelectControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			label={ __( 'Sort by' ) }
+			value={ view.sort?.field }
+			options={ orderOptions }
+			onChange={ ( value: string ) => {
+				onChangeView( {
+					...view,
+					sort: {
+						direction: view?.sort?.direction || 'desc',
+						field: value,
+					},
+				} );
+			} }
+		/>
+	);
+}
+
+function SortDirectionControl() {
+	const { view, onChangeView } = useContext( DataViewsContext );
+	return (
+		<ToggleGroupControl
+			className="dataviews-view-config__sort-direction"
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			isBlock
+			label={ __( 'Order' ) }
+			value={ view.sort?.direction || 'desc' }
+			disabled={ ! view?.sort?.field }
+			onChange={ ( newDirection ) => {
+				if ( ! view?.sort?.field ) {
+					return;
+				}
+				if ( newDirection === 'asc' || newDirection === 'desc' ) {
+					onChangeView( {
+						...view,
+						sort: {
+							direction: newDirection,
+							field: view.sort.field,
+						},
+					} );
+					return;
+				}
+				warning( 'Invalid direction' );
+			} }
+		>
+			{ SORTING_DIRECTIONS.map( ( direction ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ direction }
+						value={ direction }
+						icon={ sortIcons[ direction ] }
+						label={ sortLabels[ direction ] }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
+	);
+}
+
+const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
+function ItemsPerPageControl() {
+	const { view, onChangeView } = useContext( DataViewsContext );
+	return (
+		<ToggleGroupControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			isBlock
+			label={ __( 'Items per page' ) }
+			value={ view.perPage || 10 }
+			disabled={ ! view?.sort?.field }
+			onChange={ ( newItemsPerPage ) => {
+				const newItemsPerPageNumber =
+					typeof newItemsPerPage === 'number' ||
+					newItemsPerPage === undefined
+						? newItemsPerPage
+						: parseInt( newItemsPerPage, 10 );
+				onChangeView( {
+					...view,
+					perPage: newItemsPerPageNumber,
+					page: 1,
+				} );
+			} }
+		>
+			{ PAGE_SIZE_VALUES.map( ( value ) => {
+				return (
+					<ToggleGroupControlOption
+						key={ value }
+						value={ value }
+						label={ value.toString() }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
+	);
+}
+
+function FieldControl() {
+	const { view, fields, onChangeView } = useContext( DataViewsContext );
+	const mandatoryFields = getMandatoryFields( view );
+	const hidableFields = fields.filter(
+		( field ) =>
+			field.enableHiding !== false &&
+			! mandatoryFields.includes( field.id )
+	);
+	const viewFields = view.fields || fields.map( ( field ) => field.id );
+	if ( ! hidableFields?.length ) {
+		return null;
+	}
+	return (
+		<ItemGroup isBordered isSeparated>
+			{ hidableFields?.map( ( field ) => {
+				const isVisible = viewFields.includes( field.id );
+				return (
+					<Item key={ field.id }>
+						<HStack expanded>
+							<span>{ field.label }</span>
+							<Button
+								className="'dataviews-view-config__field-control-button"
+								size="compact"
+								onClick={ () =>
+									onChangeView( {
+										...view,
+										fields: isVisible
+											? viewFields.filter(
+													( id ) => id !== field.id
+											  )
+											: [ ...viewFields, field.id ],
+									} )
+								}
+								icon={ isVisible ? seen : unseen }
+								label={
+									isVisible
+										? __( 'Hide field' )
+										: __( 'Show field' )
+								}
+							/>
+						</HStack>
+					</Item>
+				);
+			} ) }
+		</ItemGroup>
+	);
+}
+
+function SettingsSection( {
+	title,
+	description,
+	children,
+}: {
+	title: string;
+	description?: string;
+	children: React.ReactNode;
+} ) {
+	return (
+		<Grid columns={ 12 } className="dataviews-settings-section" gap={ 4 }>
+			<div className="dataviews-settings-section__sidebar">
+				<Heading
+					level={ 2 }
+					className="dataviews-settings-section__title"
+				>
+					{ title }
+				</Heading>
+				{ description && (
+					<Text
+						variant="muted"
+						className="dataviews-settings-section__description"
+					>
+						{ description }
+					</Text>
+				) }
+			</div>
+			<Grid
+				columns={ 8 }
+				gap={ 4 }
+				className="dataviews-settings-section__content"
+			>
+				{ children }
+			</Grid>
+		</Grid>
+	);
+}
+
+function DataviewsViewConfigContent() {
+	return (
+		<VStack className="dataviews-view-config" spacing={ 6 }>
+			<SettingsSection title={ __( 'Appearance' ) }>
+				<HStack expanded className="is-divided-in-two">
+					<SortFieldControl />
+					<SortDirectionControl />
+				</HStack>
+				<ItemsPerPageControl />
+			</SettingsSection>
+			<SettingsSection title={ __( 'Properties' ) }>
+				<FieldControl />
+			</SettingsSection>
+		</VStack>
+	);
+}
+
+function _DataViewsViewConfig( {
+	defaultLayouts = { list: {}, grid: {}, table: {} },
+}: ViewActionsProps ) {
+	const [ isShowingViewPopover, setIsShowingViewPopover ] =
+		useState< boolean >( false );
+
+	return (
+		<>
+			<ViewTypeMenu defaultLayouts={ defaultLayouts } />
+			<div>
+				<Button
+					size="compact"
+					icon={ cog }
+					label={ _x( 'View options', 'View is used as a noun' ) }
+					onClick={ () => setIsShowingViewPopover( true ) }
+				/>
+				{ isShowingViewPopover && (
+					<Popover
+						placement="bottom-end"
+						onClose={ () => {
+							setIsShowingViewPopover( false );
+						} }
+						focusOnMount
+					>
+						<DataviewsViewConfigContent />
+					</Popover>
+				) }
+			</div>
+		</>
+	);
+}
+
+const DataViewsViewConfig = memo( _DataViewsViewConfig );
+
+export default DataViewsViewConfig;

package/src/components/dataviews-view-config/style.scss

@@ -0,0 +1,44 @@
+.dataviews-view-config {
+	width: 320px;
+	/* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
+	container-type: inline-size;
+	padding: $grid-unit-20;
+}
+.dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
+	text-transform: uppercase;
+}
+
+.dataviews-settings-section__title.dataviews-settings-section__title {
+	line-height: $grid-unit-30;
+	font-size: 15px;
+}
+
+.dataviews-settings-section__sidebar {
+	grid-column: span 4;
+}
+
+.dataviews-settings-section__content,
+.dataviews-settings-section__content > * {
+	grid-column: span 8;
+}
+
+.dataviews-settings-section__content .is-divided-in-two {
+	display: contents;
+	& > * {
+		grid-column: span 4;
+	}
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 500px) {
+	.dataviews-settings-section.dataviews-settings-section {
+		grid-template-columns: repeat(2, 1fr);
+		.dataviews-settings-section__sidebar {
+			grid-column: span 2;
+		}
+
+		.dataviews-settings-section__content {
+			grid-column: span 2;
+		}
+	}
+}

package/src/constants.ts

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { arrowDown, arrowUp } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -58,6 +59,10 @@ export const sortLabels = {
 	asc: __( 'Sort ascending' ),
 	desc: __( 'Sort descending' ),
 };
+export const sortIcons = {
+	asc: arrowUp,
+	desc: arrowDown,
+};
 
 // View layouts.
 export const LAYOUT_TABLE = 'table';