@wordpress/dataviews 1.2.0 → 2.0.0

package/build-types/view-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"view-list.d.ts","sourceRoot":"","sources":["../src/view-list.tsx"],"names":[],"mappings":";AAkCA,OAAO,KAAK,EACX,MAAM,EACN,OAAO,EACP,eAAe,EACf,QAAQ,IAAI,YAAY,EACxB,MAAM,SAAS,CAAC;AAIjB,UAAU,aAAa,CAAE,IAAI,SAAS,OAAO;IAC5C,OAAO,EAAE,MAAM,CAAE,IAAI,CAAE,EAAE,CAAC;IAC1B,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,MAAM,EAAE,eAAe,CAAE,IAAI,CAAE,EAAE,CAAC;IAClC,SAAS,EAAE,CAAE,IAAI,EAAE,IAAI,KAAM,MAAM,CAAC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,CAAE,SAAS,EAAE,IAAI,EAAE,KAAM,IAAI,CAAC;IACjD,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,IAAI,EAAE,YAAY,CAAC;CACnB;AAmQD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAE,IAAI,SAAS,OAAO,EACrD,KAAK,EAAE,aAAa,CAAE,IAAI,CAAE,+BA2G5B"}
+{"version":3,"file":"view-list.d.ts","sourceRoot":"","sources":["../src/view-list.tsx"],"names":[],"mappings":";AAkCA,OAAO,KAAK,EAAU,OAAO,EAAmB,aAAa,EAAE,MAAM,SAAS,CAAC;AA2Q/E,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAE,IAAI,SAAS,OAAO,EACrD,KAAK,EAAE,aAAa,CAAE,IAAI,CAAE,+BA2G5B"}

package/build-types/view-table.d.ts

@@ -1,14 +1,5 @@
+/// <reference types="react" />
+import type { AnyItem, ViewTableProps } from './types';
+declare function ViewTable<Item extends AnyItem>({ actions, data, fields, getItemId, isLoading, onChangeView, onSelectionChange, selection, setOpenedFilter, view, }: ViewTableProps<Item>): import("react").JSX.Element | undefined;
 export default ViewTable;
-declare function ViewTable({ actions, data, fields, getItemId, isLoading, onChangeView, onSelectionChange, selection, setOpenedFilter, view, }: {
-    actions: any;
-    data: any;
-    fields: any;
-    getItemId: any;
-    isLoading?: boolean | undefined;
-    onChangeView: any;
-    onSelectionChange: any;
-    selection: any;
-    setOpenedFilter: any;
-    view: any;
-}): import("react").JSX.Element | undefined;
 //# sourceMappingURL=view-table.d.ts.map

package/build-types/view-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"view-table.d.ts","sourceRoot":"","sources":["../src/view-table.js"],"names":[],"mappings":";AA2WA;;;;;;;;;;;4CAuKC"}
+{"version":3,"file":"view-table.d.ts","sourceRoot":"","sources":["../src/view-table.tsx"],"names":[],"mappings":";AA8CA,OAAO,KAAK,EAEX,OAAO,EAIP,cAAc,EACd,MAAM,SAAS,CAAC;AA4WjB,iBAAS,SAAS,CAAE,IAAI,SAAS,OAAO,EAAI,EAC3C,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,SAAiB,EACjB,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,eAAe,EACf,IAAI,GACJ,EAAE,cAAc,CAAE,IAAI,CAAE,2CAiKxB;AAED,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "1.2.0",
+	"version": "2.0.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -29,15 +30,13 @@
 	"dependencies": {
 		"@ariakit/react": "^0.3.12",
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.58.0",
-		"@wordpress/components": "^27.6.0",
-		"@wordpress/compose": "^6.35.0",
-		"@wordpress/element": "^5.35.0",
-		"@wordpress/i18n": "^4.58.0",
-		"@wordpress/icons": "^9.49.0",
-		"@wordpress/keycodes": "^3.58.0",
-		"@wordpress/primitives": "^3.56.0",
-		"@wordpress/private-apis": "^0.40.0",
+		"@wordpress/components": "^28.0.0",
+		"@wordpress/compose": "^7.0.0",
+		"@wordpress/element": "^6.0.0",
+		"@wordpress/i18n": "^5.0.0",
+		"@wordpress/icons": "^10.0.0",
+		"@wordpress/primitives": "^4.0.0",
+		"@wordpress/private-apis": "^1.0.0",
 		"clsx": "^2.1.1",
 		"remove-accents": "^0.5.0"
 	},
@@ -47,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "42f38f287506a6b3ed8ccba839b18ad066821044"
+	"gitHead": "2f30cddff15723ac7017fd009fc5913b7b419400"
 }

package/src/{add-filter.js → add-filter.tsx}

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { Ref } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -12,6 +17,7 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
+import type { NormalizedFilter, View } from './types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -19,7 +25,17 @@ const {
 	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
 } = unlock( componentsPrivateApis );
 
-function AddFilter( { filters, view, onChangeView, setOpenedFilter }, ref ) {
+interface AddFilterProps {
+	filters: NormalizedFilter[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+	setOpenedFilter: ( filter: string | null ) => void;
+}
+
+function AddFilter(
+	{ filters, view, onChangeView, setOpenedFilter }: AddFilterProps,
+	ref: Ref< HTMLButtonElement >
+) {
 	if ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) {
 		return null;
 	}

package/src/{bulk-actions-toolbar.js → bulk-actions-toolbar.tsx}

@@ -17,6 +17,30 @@ import { useReducedMotion } from '@wordpress/compose';
  * Internal dependencies
  */
 import { ActionWithModal } from './item-actions';
+import type { Action, AnyItem } from './types';
+import type { ActionTriggerProps } from './item-actions';
+
+interface ActionButtonProps< Item extends AnyItem > {
+	action: Action< Item >;
+	selectedItems: Item[];
+	actionInProgress: string | null;
+	setActionInProgress: ( actionId: string | null ) => void;
+}
+
+interface ToolbarContentProps< Item extends AnyItem > {
+	selection: string[];
+	actionsToShow: Action< Item >[];
+	selectedItems: Item[];
+	onSelectionChange: ( selection: Item[] ) => void;
+}
+
+interface BulkActionsToolbarProps< Item extends AnyItem > {
+	data: Item[];
+	selection: string[];
+	actions: Action< Item >[];
+	onSelectionChange: ( selection: Item[] ) => void;
+	getItemId: ( item: Item ) => string;
+}
 
 const SNACKBAR_VARIANTS = {
 	init: {
@@ -37,11 +61,18 @@ const SNACKBAR_VARIANTS = {
 	},
 };
 
-function ActionTrigger( { action, onClick, isBusy } ) {
+function ActionTrigger< Item extends AnyItem >( {
+	action,
+	onClick,
+	isBusy,
+	items,
+}: ActionTriggerProps< Item > ) {
+	const label =
+		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
 		<ToolbarButton
 			disabled={ isBusy }
-			label={ action.label }
+			label={ label }
 			icon={ action.icon }
 			isDestructive={ action.isDestructive }
 			size="compact"
@@ -53,32 +84,26 @@ function ActionTrigger( { action, onClick, isBusy } ) {
 	);
 }
 
-const EMPTY_ARRAY = [];
+const EMPTY_ARRAY: [] = [];
 
-function ActionButton( {
+function ActionButton< Item extends AnyItem >( {
 	action,
 	selectedItems,
 	actionInProgress,
 	setActionInProgress,
-} ) {
+}: ActionButtonProps< Item > ) {
 	const selectedEligibleItems = useMemo( () => {
 		return selectedItems.filter( ( item ) => {
-			return action.isEligible( item );
+			return ! action.isEligible || action.isEligible( item );
 		} );
 	}, [ action, selectedItems ] );
-	if ( !! action.RenderModal ) {
+	if ( 'RenderModal' in action ) {
 		return (
 			<ActionWithModal
 				key={ action.id }
 				action={ action }
 				items={ selectedEligibleItems }
 				ActionTrigger={ ActionTrigger }
-				onActionStart={ () => {
-					setActionInProgress( action.id );
-				} }
-				onActionPerformed={ () => {
-					setActionInProgress( null );
-				} }
 			/>
 		);
 	}
@@ -86,25 +111,23 @@ function ActionButton( {
 		<ActionTrigger
 			key={ action.id }
 			action={ action }
-			items={ selectedItems }
 			onClick={ () => {
 				setActionInProgress( action.id );
-				action.callback( selectedItems, () => {
-					setActionInProgress( action.id );
-				} );
+				action.callback( selectedItems );
 			} }
+			items={ selectedEligibleItems }
 			isBusy={ actionInProgress === action.id }
 		/>
 	);
 }
 
-function renderToolbarContent(
-	selection,
-	actionsToShow,
-	selectedItems,
-	actionInProgress,
-	setActionInProgress,
-	setSelection
+function renderToolbarContent< Item extends AnyItem >(
+	selection: string[],
+	actionsToShow: Action< Item >[],
+	selectedItems: Item[],
+	actionInProgress: string | null,
+	setActionInProgress: ( actionId: string | null ) => void,
+	onSelectionChange: ( selection: Item[] ) => void
 ) {
 	return (
 		<>
@@ -144,7 +167,7 @@ function renderToolbarContent(
 					label={ __( 'Cancel' ) }
 					disabled={ !! actionInProgress }
 					onClick={ () => {
-						setSelection( EMPTY_ARRAY );
+						onSelectionChange( EMPTY_ARRAY );
 					} }
 				/>
 			</ToolbarGroup>
@@ -152,14 +175,16 @@ function renderToolbarContent(
 	);
 }
 
-function ToolbarContent( {
+function ToolbarContent< Item extends AnyItem >( {
 	selection,
 	actionsToShow,
 	selectedItems,
-	setSelection,
-} ) {
-	const [ actionInProgress, setActionInProgress ] = useState( null );
-	const buttons = useRef( null );
+	onSelectionChange,
+}: ToolbarContentProps< Item > ) {
+	const [ actionInProgress, setActionInProgress ] = useState< string | null >(
+		null
+	);
+	const buttons = useRef< JSX.Element | null >( null );
 	if ( ! actionInProgress ) {
 		if ( buttons.current ) {
 			buttons.current = null;
@@ -170,7 +195,7 @@ function ToolbarContent( {
 			selectedItems,
 			actionInProgress,
 			setActionInProgress,
-			setSelection
+			onSelectionChange
 		);
 	} else if ( ! buttons.current ) {
 		buttons.current = renderToolbarContent(
@@ -179,19 +204,19 @@ function ToolbarContent( {
 			selectedItems,
 			actionInProgress,
 			setActionInProgress,
-			setSelection
+			onSelectionChange
 		);
 	}
 	return buttons.current;
 }
 
-export default function BulkActionsToolbar( {
+export default function BulkActionsToolbar< Item extends AnyItem >( {
 	data,
 	selection,
 	actions = EMPTY_ARRAY,
-	setSelection,
+	onSelectionChange,
 	getItemId,
-} ) {
+}: BulkActionsToolbarProps< Item > ) {
 	const isReducedMotion = useReducedMotion();
 	const selectedItems = useMemo( () => {
 		return data.filter( ( item ) =>
@@ -205,7 +230,10 @@ export default function BulkActionsToolbar( {
 				return (
 					action.supportsBulk &&
 					action.icon &&
-					selectedItems.some( ( item ) => action.isEligible( item ) )
+					selectedItems.some(
+						( item ) =>
+							! action.isEligible || action.isEligible( item )
+					)
 				);
 			} ),
 		[ actions, selectedItems ]
@@ -222,9 +250,9 @@ export default function BulkActionsToolbar( {
 		<AnimatePresence>
 			<motion.div
 				layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
-				initial={ 'init' }
-				animate={ 'open' }
-				exit={ 'exit' }
+				initial="init"
+				animate="open"
+				exit="exit"
 				variants={ isReducedMotion ? undefined : SNACKBAR_VARIANTS }
 				className="dataviews-bulk-actions"
 			>
@@ -234,7 +262,7 @@ export default function BulkActionsToolbar( {
 							selection={ selection }
 							actionsToShow={ actionsToShow }
 							selectedItems={ selectedItems }
-							setSelection={ setSelection }
+							onSelectionChange={ onSelectionChange }
 						/>
 					</div>
 				</Toolbar>

package/src/bulk-actions.tsx

@@ -94,9 +94,13 @@ function ActionWithModal< Item extends AnyItem >( {
 	const onCloseModal = useCallback( () => {
 		setActionWithModal( undefined );
 	}, [ setActionWithModal ] );
+	const label =
+		typeof action.label === 'string'
+			? action.label
+			: action.label( selectedItems );
 	return (
 		<Modal
-			title={ ! hideModalHeader ? action.label : undefined }
+			title={ ! hideModalHeader ? label : undefined }
 			__experimentalHideHeader={ !! hideModalHeader }
 			onRequestClose={ onCloseModal }
 			overlayClassName="dataviews-action-modal"

package/src/constants.ts

@@ -3,6 +3,11 @@
  */
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import type { Operator } from './types';
+
 // Filter operators.
 export const OPERATOR_IS = 'is';
 export const OPERATOR_IS_NOT = 'isNot';
@@ -19,7 +24,7 @@ export const ALL_OPERATORS = [
 	OPERATOR_IS_ALL,
 	OPERATOR_IS_NOT_ALL,
 ];
-export const OPERATORS = {
+export const OPERATORS: Record< Operator, { key: string; label: string } > = {
 	[ OPERATOR_IS ]: {
 		key: 'is-filter',
 		label: __( 'Is' ),
@@ -46,10 +51,12 @@ export const OPERATORS = {
 	},
 };
 
-// Sorting
-export const SORTING_DIRECTIONS = {
-	asc: { label: __( 'Sort ascending' ) },
-	desc: { label: __( 'Sort descending' ) },
+export const SORTING_DIRECTIONS = [ 'asc', 'desc' ] as const;
+export const sortArrows = { asc: '↑', desc: '↓' };
+export const sortValues = { asc: 'ascending', desc: 'descending' } as const;
+export const sortLabels = {
+	asc: __( 'Sort ascending' ),
+	desc: __( 'Sort descending' ),
 };
 
 // View layouts.

package/src/{dataviews.js → dataviews.tsx}

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentType } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -16,21 +21,46 @@ import { VIEW_LAYOUTS } from './layouts';
 import BulkActions from './bulk-actions';
 import { normalizeFields } from './normalize-fields';
 import BulkActionsToolbar from './bulk-actions-toolbar';
+import type { Action, AnyItem, Field, View, ViewBaseProps } from './types';
+
+interface DataViewsProps< Item extends AnyItem > {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	fields: Field< Item >[];
+	search?: boolean;
+	searchLabel?: string;
+	actions?: Action< Item >[];
+	data: Item[];
+	getItemId?: ( item: Item ) => string;
+	isLoading?: boolean;
+	paginationInfo: {
+		totalItems: number;
+		totalPages: number;
+	};
+	supportedLayouts: string[];
+	onSelectionChange?: ( items: Item[] ) => void;
+}
 
-const defaultGetItemId = ( item ) => item.id;
+const defaultGetItemId = ( item: AnyItem ) => item.id;
 const defaultOnSelectionChange = () => {};
 
-function useSomeItemHasAPossibleBulkAction( actions, data ) {
+function useSomeItemHasAPossibleBulkAction< Item extends AnyItem >(
+	actions: Action< Item >[],
+	data: Item[]
+) {
 	return useMemo( () => {
 		return data.some( ( item ) => {
 			return actions.some( ( action ) => {
-				return action.supportsBulk && action.isEligible( item );
+				return (
+					action.supportsBulk &&
+					( ! action.isEligible || action.isEligible( item ) )
+				);
 			} );
 		} );
 	}, [ actions, data ] );
 }
 
-export default function DataViews( {
+export default function DataViews< Item extends AnyItem >( {
 	view,
 	onChangeView,
 	fields,
@@ -43,9 +73,9 @@ export default function DataViews( {
 	paginationInfo,
 	supportedLayouts,
 	onSelectionChange = defaultOnSelectionChange,
-} ) {
-	const [ selection, setSelection ] = useState( [] );
-	const [ openedFilter, setOpenedFilter ] = useState( null );
+}: DataViewsProps< Item > ) {
+	const [ selection, setSelection ] = useState< string[] >( [] );
+	const [ openedFilter, setOpenedFilter ] = useState< string | null >( null );
 
 	useEffect( () => {
 		if (
@@ -67,16 +97,15 @@ export default function DataViews( {
 	}, [ selection, data, getItemId, onSelectionChange ] );
 
 	const onSetSelection = useCallback(
-		( items ) => {
+		( items: Item[] ) => {
 			setSelection( items.map( ( item ) => getItemId( item ) ) );
 			onSelectionChange( items );
 		},
 		[ setSelection, getItemId, onSelectionChange ]
 	);
 
-	const ViewComponent = VIEW_LAYOUTS.find(
-		( v ) => v.type === view.type
-	).component;
+	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
+		?.component as ComponentType< ViewBaseProps< Item > >;
 	const _fields = useMemo( () => normalizeFields( fields ), [ fields ] );
 
 	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
@@ -150,7 +179,7 @@ export default function DataViews( {
 						data={ data }
 						actions={ actions }
 						selection={ selection }
-						setSelection={ setSelection }
+						onSelectionChange={ onSetSelection }
 						getItemId={ getItemId }
 					/>
 				) }

package/src/{filter-summary.js → filter-summary.tsx}

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import type { RefObject } from 'react';
 
 /**
  * WordPress dependencies
@@ -35,8 +36,30 @@ import {
 	OPERATOR_IS_ALL,
 	OPERATOR_IS_NOT_ALL,
 } from './constants';
+import type { Filter, NormalizedFilter, Operator, Option, View } from './types';
 
-const FilterText = ( { activeElements, filterInView, filter } ) => {
+interface FilterTextProps {
+	activeElements: Option[];
+	filterInView?: Filter;
+	filter: NormalizedFilter;
+}
+
+interface OperatorSelectorProps {
+	filter: NormalizedFilter;
+	view: View;
+	onChangeView: ( view: View ) => void;
+}
+
+interface FilterSummaryProps extends OperatorSelectorProps {
+	addFilterRef: RefObject< HTMLButtonElement >;
+	openedFilter: string | null;
+}
+
+const FilterText = ( {
+	activeElements,
+	filterInView,
+	filter,
+}: FilterTextProps ) => {
 	if ( activeElements === undefined || activeElements.length === 0 ) {
 		return filter.name;
 	}
@@ -125,7 +148,11 @@ const FilterText = ( { activeElements, filterInView, filter } ) => {
 	);
 };
 
-function OperatorSelector( { filter, view, onChangeView } ) {
+function OperatorSelector( {
+	filter,
+	view,
+	onChangeView,
+}: OperatorSelectorProps ) {
 	const operatorOptions = filter.operators?.map( ( operator ) => ( {
 		value: operator,
 		label: OPERATORS[ operator ]?.label,
@@ -150,13 +177,14 @@ function OperatorSelector( { filter, view, onChangeView } ) {
 					value={ value }
 					options={ operatorOptions }
 					onChange={ ( newValue ) => {
+						const operator = newValue as Operator;
 						const newFilters = currentFilter
 							? [
 									...view.filters.map( ( _filter ) => {
 										if ( _filter.field === filter.field ) {
 											return {
 												..._filter,
-												operator: newValue,
+												operator,
 											};
 										}
 										return _filter;
@@ -166,7 +194,8 @@ function OperatorSelector( { filter, view, onChangeView } ) {
 									...view.filters,
 									{
 										field: filter.field,
-										operator: newValue,
+										operator,
+										value: undefined,
 									},
 							  ];
 						onChangeView( {
@@ -188,8 +217,8 @@ export default function FilterSummary( {
 	addFilterRef,
 	openedFilter,
 	...commonProps
-} ) {
-	const toggleRef = useRef();
+}: FilterSummaryProps ) {
+	const toggleRef = useRef< HTMLDivElement >( null );
 	const { filter, view, onChangeView } = commonProps;
 	const filterInView = view.filters.find( ( f ) => f.field === filter.field );
 	const activeElements = filter.elements.filter( ( element ) => {

package/src/{filters.js → filters.tsx}

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { memo, useRef } from '@wordpress/element';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -11,17 +12,25 @@ import AddFilter from './add-filter';
 import ResetFilters from './reset-filters';
 import { sanitizeOperators } from './utils';
 import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from './constants';
-import { __experimentalHStack as HStack } from '@wordpress/components';
+import type { AnyItem, NormalizedField, NormalizedFilter, View } from './types';
 
-const Filters = memo( function Filters( {
+interface FiltersProps< Item extends AnyItem > {
+	fields: NormalizedField< Item >[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+	openedFilter: string | null;
+	setOpenedFilter: ( openedFilter: string | null ) => void;
+}
+
+function _Filters< Item extends AnyItem >( {
 	fields,
 	view,
 	onChangeView,
 	openedFilter,
 	setOpenedFilter,
-} ) {
-	const addFilterRef = useRef();
-	const filters = [];
+}: FiltersProps< Item > ) {
+	const addFilterRef = useRef< HTMLButtonElement >( null );
+	const filters: NormalizedFilter[] = [];
 	fields.forEach( ( field ) => {
 		if ( ! field.elements?.length ) {
 			return;
@@ -108,6 +117,9 @@ const Filters = memo( function Filters( {
 			{ filterComponents }
 		</HStack>
 	);
-} );
+}
+
+// A type assertion is used here to keep the type argument.
+const Filters = memo( _Filters ) as typeof _Filters;
 
 export default Filters;