@wordpress/dataviews 13.1.1-next.v.202603102151.0 → 14.0.0

package/src/dataviews-picker/index.tsx

@@ -2,12 +2,19 @@
  * External dependencies
  */
 import type { ReactNode } from 'react';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { useEffect, useMemo, useRef, useState } from '@wordpress/element';
-import { useResizeObserver, throttle } from '@wordpress/compose';
+import {
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from '@wordpress/element';
+import { useResizeObserver } from '@wordpress/compose';
 import { Stack } from '@wordpress/ui';
 
 /**
@@ -30,6 +37,8 @@ import DataViewsViewConfig, {
 	ViewTypeMenu,
 } from '../components/dataviews-view-config';
 import normalizeFields from '../field-types';
+import useData from '../hooks/use-data';
+import { useInfiniteScroll } from '../hooks/use-infinite-scroll';
 import type { ActionButton, Field, View, SupportedLayouts } from '../types';
 import type { SelectionOrUpdater } from '../types/private';
 type ItemWithId = { id: string };
@@ -52,7 +61,6 @@ type DataViewsPickerProps< Item > = {
 	paginationInfo: {
 		totalItems: number;
 		totalPages: number;
-		infiniteScrollHandler?: () => void;
 	};
 	defaultLayouts: SupportedLayouts;
 	selection: string[];
@@ -79,13 +87,18 @@ function DefaultUI( {
 	search = true,
 	searchLabel = undefined,
 }: DefaultUIProps ) {
+	const { view } = useContext( DataViewsContext );
+	const isInfiniteScroll = view.infiniteScrollEnabled;
 	return (
 		<>
 			<Stack
 				direction="row"
 				align="top"
 				justify="space-between"
-				className="dataviews__view-actions"
+				className={ clsx( 'dataviews__view-actions', {
+					'dataviews__view-actions--infinite-scroll':
+						isInfiniteScroll,
+				} ) }
 				gap="xs"
 			>
 				<Stack
@@ -127,7 +140,17 @@ function DataViewsPicker< Item >( {
 	itemListLabel,
 	empty,
 }: DataViewsPickerProps< Item > ) {
-	const { infiniteScrollHandler } = paginationInfo;
+	// useData ensures data loading is correct whether infinite scroll is enabled or pagination is used.
+	const { data: displayData, setVisibleEntries } = useData( {
+		view,
+		data: data as any,
+		getItemId: getItemId as any,
+		selection,
+		paginationInfo,
+	} ) as {
+		data: ( Item & { position?: number } )[];
+		setVisibleEntries?: React.Dispatch< React.SetStateAction< number[] > >;
+	};
 	const containerRef = useRef< HTMLDivElement >( null );
 	const [ containerWidth, setContainerWidth ] = useState( 0 );
 	const resizeObserverRef = useResizeObserver(
@@ -148,6 +171,7 @@ function DataViewsPicker< Item >( {
 	}
 	const _fields = useMemo( () => normalizeFields( fields ), [ fields ] );
 	const filters = useFilters( _fields, view );
+
 	const hasPrimaryOrLockedFilters = useMemo(
 		() =>
 			( filters || [] ).some(
@@ -159,39 +183,21 @@ function DataViewsPicker< Item >( {
 		hasPrimaryOrLockedFilters
 	);
 
+	const { intersectionObserver } = useInfiniteScroll( {
+		view,
+		onChangeView,
+		isLoading,
+		paginationInfo,
+		containerRef,
+		setVisibleEntries,
+	} );
+
 	useEffect( () => {
 		if ( hasPrimaryOrLockedFilters && ! isShowingFilter ) {
 			setIsShowingFilter( true );
 		}
 	}, [ hasPrimaryOrLockedFilters, isShowingFilter ] );
 
-	// Attach scroll event listener for infinite scroll
-	useEffect( () => {
-		if ( ! view.infiniteScrollEnabled || ! containerRef.current ) {
-			return;
-		}
-
-		const handleScroll = throttle( ( event: unknown ) => {
-			const target = ( event as Event ).target as HTMLElement;
-			const scrollTop = target.scrollTop;
-			const scrollHeight = target.scrollHeight;
-			const clientHeight = target.clientHeight;
-
-			// Check if user has scrolled near the bottom
-			if ( scrollTop + clientHeight >= scrollHeight - 100 ) {
-				infiniteScrollHandler?.();
-			}
-		}, 100 ); // Throttle to 100ms
-
-		const container = containerRef.current;
-		container.addEventListener( 'scroll', handleScroll );
-
-		return () => {
-			container.removeEventListener( 'scroll', handleScroll );
-			handleScroll.cancel(); // Cancel any pending throttled calls
-		};
-	}, [ infiniteScrollHandler, view.infiniteScrollEnabled ] );
-
 	// Filter out DataViewsPicker layouts.
 	const defaultLayouts = useMemo(
 		() =>
@@ -218,7 +224,7 @@ function DataViewsPicker< Item >( {
 				onChangeView,
 				fields: _fields,
 				actions,
-				data,
+				data: displayData,
 				isLoading,
 				paginationInfo,
 				isItemClickable,
@@ -238,10 +244,10 @@ function DataViewsPicker< Item >( {
 				itemListLabel,
 				empty,
 				hasInitiallyLoaded: true,
-				hasInfiniteScrollHandler: !! infiniteScrollHandler,
+				intersectionObserver,
 			} }
 		>
-			<div className="dataviews-picker-wrapper" ref={ containerRef }>
+			<div className="dataviews-picker-wrapper">
 				{ children ?? (
 					<DefaultUI search={ search } searchLabel={ searchLabel } />
 				) }

package/src/dataviews-picker/stories/fixtures.tsx

@@ -312,6 +312,276 @@ export const data: SpaceObject[] = [
 		datetime: '2020-03-01T10:15:20Z',
 		email: 'thessalonikopolymnianebuchodonossarinacharybdis@example.com',
 	},
+	{
+		id: 20,
+		name: {
+			title: 'Titan',
+			description: 'Largest moon of Saturn',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/f/fe/Titan_in_true_color_by_Kevin_M._Gill.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Saturn', 'Moon' ],
+		satellites: 0,
+		date: '2022-02-15',
+		datetime: '2022-02-15T08:30:00Z',
+		email: 'titan@example.com',
+	},
+	{
+		id: 21,
+		name: {
+			title: 'Enceladus',
+			description: 'Icy moon of Saturn with geysers',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/PIA17202_-_Approaching_Enceladus.jpg/960px-PIA17202_-_Approaching_Enceladus.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Saturn', 'Moon' ],
+		satellites: 0,
+		date: '2023-03-20',
+		datetime: '2023-03-20T11:45:00Z',
+		email: 'enceladus@example.com',
+	},
+	{
+		id: 22,
+		name: {
+			title: 'Mimas',
+			description: 'Death Star moon of Saturn',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Mimas_Cassini.jpg/960px-Mimas_Cassini.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Saturn', 'Moon' ],
+		satellites: 0,
+		date: '2021-07-12',
+		datetime: '2021-07-12T15:20:00Z',
+		email: 'mimas@example.com',
+	},
+	{
+		id: 23,
+		name: {
+			title: 'Charon',
+			description: 'Largest moon of Pluto',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/2/2e/Charon_in_True_Color_-_High-Res.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Pluto', 'Moon' ],
+		satellites: 0,
+		date: '2020-09-25',
+		datetime: '2020-09-25T13:15:00Z',
+		email: 'charon@example.com',
+	},
+	{
+		id: 24,
+		name: {
+			title: 'Phobos',
+			description: 'Larger moon of Mars',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Phobos_colour_2008.jpg/960px-Phobos_colour_2008.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Mars', 'Moon' ],
+		satellites: 0,
+		date: '2019-06-14',
+		datetime: '2019-06-14T07:45:00Z',
+		email: 'phobos@example.com',
+	},
+	{
+		id: 25,
+		name: {
+			title: 'Deimos',
+			description: 'Smaller moon of Mars',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/8/86/NASA-Deimos-MarsMoon-20090221.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Mars', 'Moon' ],
+		satellites: 0,
+		date: '2018-11-30',
+		datetime: '2018-11-30T16:00:00Z',
+		email: 'deimos@example.com',
+	},
+	{
+		id: 26,
+		name: {
+			title: 'Rhea',
+			description: 'Second largest moon of Saturn',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/PIA07763_Rhea_full_globe5.jpg/2560px-PIA07763_Rhea_full_globe5.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Saturn', 'Moon' ],
+		satellites: 0,
+		date: '2022-08-19',
+		datetime: '2022-08-19T10:30:00Z',
+		email: 'rhea@example.com',
+	},
+	{
+		id: 27,
+		name: {
+			title: 'Iapetus',
+			description: 'Two-toned moon of Saturn',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Iapetus_trailing_natural_color.jpg/2560px-Iapetus_trailing_natural_color.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Saturn', 'Moon' ],
+		satellites: 0,
+		date: '2023-01-22',
+		datetime: '2023-01-22T14:20:00Z',
+		email: 'iapetus@example.com',
+	},
+	{
+		id: 28,
+		name: {
+			title: 'Dione',
+			description: 'Icy moon of Saturn',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/d/d0/Dione_in_natural_light_%28cropped%29.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Saturn', 'Moon' ],
+		satellites: 0,
+		date: '2021-04-17',
+		datetime: '2021-04-17T12:00:00Z',
+		email: 'dione@example.com',
+	},
+	{
+		id: 29,
+		name: {
+			title: 'Tethys',
+			description: 'Mid-sized moon of Saturn',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Tethys_-_Rev_15_%2837267740632%29.png/960px-Tethys_-_Rev_15_%2837267740632%29.png',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Saturn', 'Moon' ],
+		satellites: 0,
+		date: '2020-12-05',
+		datetime: '2020-12-05T09:40:00Z',
+		email: 'tethys@example.com',
+	},
+	{
+		id: 30,
+		name: {
+			title: 'Miranda',
+			description: 'Unusual moon of Uranus',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Miranda_mosaic_in_color_-_Voyager_2.png/960px-Miranda_mosaic_in_color_-_Voyager_2.png',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Uranus', 'Moon' ],
+		satellites: 0,
+		date: '2024-02-28',
+		datetime: '2024-02-28T11:15:00Z',
+		email: 'miranda@example.com',
+	},
+	{
+		id: 31,
+		name: {
+			title: 'Ariel',
+			description: 'Brightest moon of Uranus',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Ariel_in_monochrome.jpg/960px-Ariel_in_monochrome.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Uranus', 'Moon' ],
+		satellites: 0,
+		date: '2023-09-10',
+		datetime: '2023-09-10T08:25:00Z',
+		email: 'ariel@example.com',
+	},
+	{
+		id: 32,
+		name: {
+			title: 'Umbriel',
+			description: 'Dark moon of Uranus',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/PIA00040_Umbrielx2.47.jpg/560px-PIA00040_Umbrielx2.47.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Uranus', 'Moon' ],
+		satellites: 0,
+		date: '2022-05-03',
+		datetime: '2022-05-03T15:50:00Z',
+		email: 'umbriel@example.com',
+	},
+	{
+		id: 33,
+		name: {
+			title: 'Titania',
+			description: 'Largest moon of Uranus',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Titania_-_Jan_24_1986_%2822689891350%29.jpg/560px-Titania_-_Jan_24_1986_%2822689891350%29.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Uranus', 'Moon' ],
+		satellites: 0,
+		date: '2021-10-18',
+		datetime: '2021-10-18T13:35:00Z',
+		email: 'titania@example.com',
+	},
+	{
+		id: 34,
+		name: {
+			title: 'Oberon',
+			description: 'Outermost major moon of Uranus',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/6/6d/Oberon_in_true_color_by_Kevin_M._Gill.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Uranus', 'Moon' ],
+		satellites: 0,
+		date: '2020-07-22',
+		datetime: '2020-07-22T10:05:00Z',
+		email: 'oberon@example.com',
+	},
+	{
+		id: 35,
+		name: {
+			title: 'Ceres',
+			description: 'Largest object in the asteroid belt',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Ceres_-_RC3_-_Haulani_Crater_%2822381131691%29_%28cropped%29.jpg/560px-Ceres_-_RC3_-_Haulani_Crater_%2822381131691%29_%28cropped%29.jpg',
+		type: 'Dwarf planet',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Dwarf planet', 'Asteroid belt' ],
+		satellites: 0,
+		date: '2024-08-14',
+		datetime: '2024-08-14T16:40:00Z',
+		email: 'ceres@example.com',
+	},
+	{
+		id: 36,
+		name: {
+			title: 'Makemake',
+			description: 'Reddish dwarf planet',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Makemake_and_its_moon.jpg/560px-Makemake_and_its_moon.jpg',
+		type: 'Dwarf planet',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Dwarf planet', 'Trans-Neptunian' ],
+		satellites: 1,
+		date: '2022-03-29',
+		datetime: '2022-03-29T12:55:00Z',
+		email: 'makemake@example.com',
+	},
+	{
+		id: 37,
+		name: {
+			title: 'Haumea',
+			description: 'Elongated dwarf planet',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/2/2b/Haumea_Hubble.png',
+		type: 'Dwarf planet',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Dwarf planet', 'Trans-Neptunian' ],
+		satellites: 2,
+		date: '2021-11-11',
+		datetime: '2021-11-11T09:10:00Z',
+		email: 'haumea@example.com',
+	},
 ];
 
 export const fields: Field< SpaceObject >[] = [

package/src/dataviews-picker/stories/index.story.tsx

@@ -6,7 +6,7 @@ import type { Meta } from '@storybook/react-vite';
 /**
  * WordPress dependencies
  */
-import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
+import { useState, useMemo, useEffect } from '@wordpress/element';
 import { Modal, Button } from '@wordpress/components';
 import { Stack } from '@wordpress/ui';
 
@@ -70,32 +70,66 @@ const DataViewsPickerContent = ( {
 	actions: customActions,
 	selection: customSelection,
 }: PickerContentProps ) => {
-	const [ view, setView ] = useState< View >( {
-		fields: [],
-		titleField: 'title',
-		mediaField: 'image',
-		search: '',
-		page: 1,
-		perPage: 10,
-		filters: [],
-		type: LAYOUT_PICKER_GRID,
-		groupBy: isGrouped ? { field: 'type', direction: 'asc' } : undefined,
-		infiniteScrollEnabled,
+	const [ view, setView ] = useState< View >( () => {
+		const baseView: View = {
+			fields: [],
+			titleField: 'title',
+			mediaField: 'image',
+			search: '',
+			filters: [],
+			type: LAYOUT_PICKER_GRID,
+			groupBy: isGrouped
+				? { field: 'type', direction: 'asc' as const }
+				: undefined,
+			infiniteScrollEnabled,
+		};
+
+		if ( infiniteScrollEnabled ) {
+			return {
+				...baseView,
+				startPosition: 1,
+				perPage: 10,
+			};
+		}
+
+		return {
+			...baseView,
+			page: 1,
+			perPage: 10,
+		};
 	} );
-	const { data: shownData, paginationInfo: normalPaginationInfo } =
-		useMemo( () => {
-			return filterSortAndPaginate( data, view, fields );
-		}, [ view ] );
+	const { data: shownData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( data, view, fields );
+	}, [ view ] );
 
 	useEffect( () => {
-		setView( ( prevView ) => ( {
-			...prevView,
-			groupBy:
-				isGrouped && ! infiniteScrollEnabled
-					? { field: 'type', direction: 'asc' }
-					: undefined,
-			infiniteScrollEnabled,
-		} ) );
+		setView( ( prevView ) => {
+			const baseUpdates = {
+				groupBy:
+					isGrouped && ! infiniteScrollEnabled
+						? { field: 'type', direction: 'asc' as const }
+						: undefined,
+				infiniteScrollEnabled,
+			};
+
+			if ( infiniteScrollEnabled ) {
+				return {
+					...prevView,
+					...baseUpdates,
+					startPosition: 1,
+					perPage: 15,
+					page: undefined,
+				} as View;
+			}
+
+			return {
+				...prevView,
+				...baseUpdates,
+				page: prevView.page ?? 1,
+				perPage: prevView.perPage ?? 10,
+				startPosition: undefined,
+			} as View;
+		} );
 	}, [ isGrouped, infiniteScrollEnabled ] );
 
 	const [ selection, setSelection ] = useState< string[] >(
@@ -129,24 +163,12 @@ const DataViewsPickerContent = ( {
 		},
 	];
 
-	const {
-		data: infiniteScrollData,
-		paginationInfo: infiniteScrollPaginationInfo,
-		isLoadingMore,
-	} = useInfiniteScroll( {
-		view,
-		setView,
-		data: shownData,
-		getItemId: ( item ) => item.id.toString(),
-		totalDataLength: data.length,
-	} );
-
 	return (
 		<>
 			{ infiniteScrollEnabled && (
 				<style>{ `
 					.dataviews-picker-wrapper {
-						height: 600px;
+						height: 750px;
 						overflow: auto;
 					}
 				` }</style>
@@ -158,13 +180,8 @@ const DataViewsPickerContent = ( {
 					setSelection( selectedIds );
 				} }
 				getItemId={ ( item ) => item.id.toString() }
-				paginationInfo={
-					infiniteScrollEnabled
-						? infiniteScrollPaginationInfo
-						: normalPaginationInfo
-				}
-				data={ infiniteScrollEnabled ? infiniteScrollData : shownData }
-				isLoading={ infiniteScrollEnabled ? isLoadingMore : undefined }
+				paginationInfo={ paginationInfo }
+				data={ shownData }
 				view={ view }
 				fields={ fields }
 				onChangeView={ setView }
@@ -172,7 +189,7 @@ const DataViewsPickerContent = ( {
 				itemListLabel="Galactic Bodies"
 				defaultLayouts={ {
 					[ LAYOUT_PICKER_GRID ]: {},
-					[ LAYOUT_PICKER_TABLE ]: { perPage: 20 },
+					[ LAYOUT_PICKER_TABLE ]: {},
 				} }
 			/>
 		</>
@@ -296,87 +313,3 @@ export const WithModal = ( {
 
 WithModal.args = storyArgs;
 WithModal.argTypes = storyArgTypes;
-
-function useInfiniteScroll( {
-	view,
-	setView,
-	data: shownData,
-	getItemId,
-	totalDataLength,
-}: {
-	view: View;
-	setView: ( view: View ) => void;
-	data: SpaceObject[];
-	getItemId: ( item: SpaceObject ) => string;
-	totalDataLength: number;
-} ): {
-	data: SpaceObject[];
-	paginationInfo: {
-		totalItems: number;
-		totalPages: number;
-		infiniteScrollHandler?: ( () => void ) | undefined;
-	};
-	isLoadingMore: boolean;
-	hasMoreData: boolean;
-} {
-	// Custom pagination handler that simulates server-side pagination
-	const [ allLoadedRecords, setAllLoadedRecords ] = useState< SpaceObject[] >(
-		[]
-	);
-	const [ isLoadingMore, setIsLoadingMore ] = useState( false );
-
-	const totalItems = totalDataLength;
-	const totalPages = Math.ceil( totalItems / ( view.perPage || 10 ) );
-	const currentPage = view.page || 1;
-	const hasMoreData = currentPage < totalPages;
-
-	const infiniteScrollHandler = useCallback( () => {
-		if ( isLoadingMore || currentPage >= totalPages ) {
-			return;
-		}
-
-		setIsLoadingMore( true );
-
-		setView( {
-			...view,
-			page: currentPage + 1,
-		} );
-	}, [ isLoadingMore, currentPage, totalPages, view, setView ] );
-
-	// Initialize data on first load or when view changes significantly
-	useEffect( () => {
-		if ( currentPage === 1 || ! view.infiniteScrollEnabled ) {
-			// First page - replace all data
-			setAllLoadedRecords( shownData );
-		} else {
-			// Subsequent pages - append to existing data
-			setAllLoadedRecords( ( prev ) => {
-				const existingIds = new Set( prev.map( getItemId ) );
-				const newRecords = shownData.filter(
-					( record ) => ! existingIds.has( getItemId( record ) )
-				);
-				return [ ...prev, ...newRecords ];
-			} );
-		}
-		setIsLoadingMore( false );
-	}, [
-		view.search,
-		view.filters,
-		view.perPage,
-		currentPage,
-		view.infiniteScrollEnabled,
-	] );
-
-	const paginationInfo = {
-		totalItems,
-		totalPages,
-		infiniteScrollHandler,
-	};
-
-	return {
-		data: allLoadedRecords,
-		paginationInfo,
-		isLoadingMore,
-		hasMoreData,
-	};
-}

package/src/field-types/stories/index.story.tsx

@@ -110,6 +110,7 @@ type DataType = {
 	booleanWithToggle: boolean;
 	booleanWithElements: boolean;
 	datetime: string;
+	datetimeCompact?: string;
 	datetimeWithElements: string;
 	date: string;
 	dateWithElements: string;
@@ -150,6 +151,7 @@ const data: DataType[] = [
 		booleanWithToggle: true,
 		booleanWithElements: true,
 		datetime: '2021-01-01T14:30:00Z',
+		datetimeCompact: '2021-01-01T14:30:00Z',
 		datetimeWithElements: '1982-05-10T20:30:00Z',
 		date: '2021-01-01',
 		dateWithElements: '2021-01-01',
@@ -303,6 +305,16 @@ const fields: Field< DataType >[] = [
 		label: 'Datetime',
 		description: 'Help for datetime.',
 	},
+	{
+		id: 'datetimeCompact',
+		type: 'datetime',
+		label: 'Datetime (compact)',
+		description: 'Datetime field without the calendar widget.',
+		Edit: {
+			control: 'datetime',
+			compact: true,
+		},
+	},
 	{
 		id: 'datetimeWithElements',
 		type: 'datetime',

package/src/hooks/index.ts

@@ -2,3 +2,6 @@
  * Internal dependencies
  */
 export { default as useFormValidity } from './use-form-validity';
+export { default as useData } from './use-data';
+export { useInfiniteScroll } from './use-infinite-scroll';
+export { default as useSelectedItems } from './use-selected-items';