@wordpress/dataviews 8.0.1-next.e256d081a.0 → 9.0.1-next.6870dfe5b.0

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

@@ -0,0 +1,251 @@
+/**
+ * External dependencies
+ */
+import type { Meta } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsPicker from '../index';
+import {
+	data,
+	fields,
+	type SpaceObject,
+} from '../../dataviews/stories/fixtures';
+import { LAYOUT_PICKER_GRID } from '../../../constants';
+import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
+import type { ActionButton, View } from '../../../types';
+
+const meta = {
+	title: 'DataViews/DataViewsPicker',
+	component: DataViewsPicker,
+} as Meta< typeof DataViewsPicker >;
+
+export default meta;
+
+export const Default = ( {
+	perPageSizes = [ 10, 25, 50, 100 ],
+	isMultiselectable,
+	isGrouped,
+	infiniteScrollEnabled,
+}: {
+	perPageSizes: number[];
+	isMultiselectable: boolean;
+	isGrouped: boolean;
+	infiniteScrollEnabled: boolean;
+} ) => {
+	const [ view, setView ] = useState< View >( {
+		type: LAYOUT_PICKER_GRID,
+		fields: [],
+		titleField: 'title',
+		mediaField: 'image',
+		search: '',
+		page: 1,
+		perPage: 10,
+		filters: [],
+		groupByField: isGrouped ? 'type' : undefined,
+		infiniteScrollEnabled,
+	} );
+	const { data: shownData, paginationInfo: normalPaginationInfo } =
+		useMemo( () => {
+			return filterSortAndPaginate( data, view, fields );
+		}, [ view ] );
+
+	useEffect( () => {
+		setView( ( prevView ) => ( {
+			...prevView,
+			groupByField:
+				isGrouped && ! infiniteScrollEnabled ? 'type' : undefined,
+			infiniteScrollEnabled,
+		} ) );
+	}, [ isGrouped, infiniteScrollEnabled ] );
+
+	const [ selection, setSelection ] = useState< string[] >( [] );
+
+	const actions: ActionButton< SpaceObject >[] = [
+		{
+			id: 'cancel',
+			label: 'Cancel',
+			supportsBulk: isMultiselectable,
+			callback() {
+				setSelection( [] );
+			},
+		},
+		{
+			id: 'confirm',
+			label: 'Confirm',
+			isPrimary: true,
+			supportsBulk: isMultiselectable,
+			callback() {
+				const selectedItemNames = data
+					.filter(
+						( item ) => selection?.includes( String( item.id ) )
+					)
+					.map( ( item ) => item.title )
+					.join( ', ' );
+				// eslint-disable-next-line no-alert
+				window.alert( selectedItemNames );
+			},
+		},
+	];
+
+	const {
+		data: infiniteScrollData,
+		paginationInfo: infiniteScrollPaginationInfo,
+		isLoadingMore,
+	} = useInfiniteScroll( {
+		view,
+		setView,
+		data: shownData,
+		getItemId: ( item ) => item.id.toString(),
+	} );
+
+	return (
+		<>
+			{ infiniteScrollEnabled && (
+				<style>{ `
+					.dataviews-wrapper {
+						height: 600px;
+						overflow: auto;
+					}
+				` }</style>
+			) }
+			<DataViewsPicker
+				actions={ actions }
+				selection={ selection }
+				onChangeSelection={ ( selectedIds ) => {
+					setSelection( selectedIds );
+				} }
+				getItemId={ ( item ) => item.id.toString() }
+				paginationInfo={
+					infiniteScrollEnabled
+						? infiniteScrollPaginationInfo
+						: normalPaginationInfo
+				}
+				data={ infiniteScrollEnabled ? infiniteScrollData : shownData }
+				isLoading={ infiniteScrollEnabled ? isLoadingMore : undefined }
+				view={ view }
+				fields={ fields }
+				onChangeView={ setView }
+				config={ { perPageSizes } }
+				itemListLabel="Galactic Bodies"
+				defaultLayouts={ {
+					[ LAYOUT_PICKER_GRID ]: {},
+				} }
+			/>
+		</>
+	);
+};
+
+Default.args = {
+	perPageSizes: [ 10, 25, 50, 100 ],
+	isMultiselectable: false,
+	isGrouped: false,
+};
+
+Default.argTypes = {
+	isMultiselectable: {
+		control: 'boolean',
+		description: 'Whether multiselection is supported',
+	},
+	perPageSizes: {
+		control: 'object',
+		description: 'Array of available page sizes',
+	},
+	isGrouped: {
+		control: 'boolean',
+		description: 'Whether the items are grouped or ungrouped',
+	},
+	infiniteScrollEnabled: {
+		control: 'boolean',
+		description:
+			'Whether the infinite scroll is enabled. Enabling this disables the "Is grouped" option',
+	},
+};
+
+function useInfiniteScroll( {
+	view,
+	setView,
+	data: shownData,
+	getItemId,
+}: {
+	view: View;
+	setView: ( view: View ) => void;
+	data: SpaceObject[];
+	getItemId: ( item: SpaceObject ) => string;
+} ): {
+	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 = data.length;
+	const totalPages = Math.ceil( totalItems / 6 ); // perPage is 6.
+	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 ] );
+
+	// 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/components/dataviews-picker/style.scss

@@ -0,0 +1,10 @@
+// For mobile viewports:
+// - align bulk selection checkbox to the left.
+// - align footer actions to the right.
+.dataviews-picker-footer__bulk-selection {
+	align-self: flex-start;
+	height: $grid-unit-40;
+}
+.dataviews-picker-footer__actions {
+	align-self: flex-end;
+}

package/src/components/dataviews-selection-checkbox/index.tsx

@@ -17,6 +17,7 @@ interface DataViewsSelectionCheckboxProps< Item > {
 	getItemId: ( item: Item ) => string;
 	titleField?: NormalizedField< Item >;
 	disabled: boolean;
+	tabIndex?: number;
 }
 
 export default function DataViewsSelectionCheckbox< Item >( {
@@ -26,6 +27,7 @@ export default function DataViewsSelectionCheckbox< Item >( {
 	getItemId,
 	titleField,
 	disabled,
+	...extraProps
 }: DataViewsSelectionCheckboxProps< Item > ) {
 	const id = getItemId( item );
 	const checked = ! disabled && selection.includes( id );
@@ -52,6 +54,7 @@ export default function DataViewsSelectionCheckbox< Item >( {
 						: [ ...selection, id ]
 				);
 			} }
+			{ ...extraProps }
 		/>
 	);
 }

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

@@ -99,6 +99,7 @@ export function ViewTypeMenu() {
 									case 'list':
 									case 'grid':
 									case 'table':
+									case 'pickerGrid':
 										const viewWithoutLayout = { ...view };
 										if ( 'layout' in viewWithoutLayout ) {
 											delete viewWithoutLayout.layout;

package/src/constants.ts

@@ -183,3 +183,6 @@ export const sortIcons = {
 export const LAYOUT_TABLE = 'table';
 export const LAYOUT_GRID = 'grid';
 export const LAYOUT_LIST = 'list';
+
+// Picker view layouts.
+export const LAYOUT_PICKER_GRID = 'pickerGrid';

package/src/dataform-controls/checkbox.tsx

@@ -1,12 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { CheckboxControl } from '@wordpress/components';
+import { privateApis } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
+import { unlock } from '../lock-unlock';
+
+const { ValidatedCheckboxControl } = unlock( privateApis );
 
 export default function Checkbox< Item >( {
 	field,
@@ -15,10 +19,36 @@ export default function Checkbox< Item >( {
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
 	const { id, getValue, label, description } = field;
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedCheckboxControl
+			>[ 'customValidity' ]
+		>( undefined );
 
 	return (
-		<CheckboxControl
-			__nextHasNoMarginBottom
+		<ValidatedCheckboxControl
+			required={ !! field.isValid?.required }
+			onValidate={ ( newValue: any ) => {
+				const message = field.isValid?.custom?.(
+					{
+						...data,
+						[ id ]: newValue,
+					},
+					field
+				);
+
+				if ( message ) {
+					setCustomValidity( {
+						type: 'invalid',
+						message,
+					} );
+					return;
+				}
+
+				setCustomValidity( undefined );
+			} }
+			customValidity={ customValidity }
 			hidden={ hideLabelFromVision }
 			label={ label }
 			help={ description }

package/src/dataform-controls/color.tsx

@@ -0,0 +1,139 @@
+/**
+ * External dependencies
+ */
+import { colord } from 'colord';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Dropdown,
+	privateApis,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+} from '@wordpress/components';
+import { useCallback, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+import { unlock } from '../lock-unlock';
+
+const { ValidatedInputControl, Picker } = unlock( privateApis );
+
+const ColorPicker = ( {
+	color,
+	onColorChange,
+}: {
+	color: string;
+	onColorChange: ( colorObject: any ) => void;
+} ) => {
+	const validColor = color && colord( color ).isValid() ? color : '#ffffff';
+
+	return (
+		<Dropdown
+			renderToggle={ ( { onToggle, isOpen } ) => (
+				<InputControlPrefixWrapper variant="icon">
+					<button
+						type="button"
+						onClick={ onToggle }
+						style={ {
+							width: '24px',
+							height: '24px',
+							borderRadius: '50%',
+							backgroundColor: validColor,
+							border: '1px solid #ddd',
+							cursor: 'pointer',
+							outline: isOpen ? '2px solid #007cba' : 'none',
+							outlineOffset: '2px',
+							display: 'flex',
+							alignItems: 'center',
+							justifyContent: 'center',
+							padding: 0,
+							margin: 0,
+						} }
+						aria-label="Open color picker"
+					/>
+				</InputControlPrefixWrapper>
+			) }
+			renderContent={ () => (
+				<div style={ { padding: '16px' } }>
+					<Picker
+						color={ colord( validColor ) }
+						onChange={ onColorChange }
+						enableAlpha
+					/>
+				</div>
+			) }
+		/>
+	);
+};
+
+export default function Color< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label, placeholder, description } = field;
+	const value = field.getValue( { item: data } ) || '';
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedInputControl
+			>[ 'customValidity' ]
+		>( undefined );
+
+	const handleColorChange = useCallback(
+		( colorObject: any ) => {
+			onChange( { [ id ]: colorObject.toHex() } );
+		},
+		[ id, onChange ]
+	);
+
+	const handleInputChange = useCallback(
+		( newValue: string | undefined ) => {
+			onChange( { [ id ]: newValue || '' } );
+		},
+		[ id, onChange ]
+	);
+
+	return (
+		<ValidatedInputControl
+			required={ !! field.isValid?.required }
+			onValidate={ ( newValue: any ) => {
+				const message = field.isValid?.custom?.(
+					{
+						...data,
+						[ id ]: newValue,
+					},
+					field
+				);
+
+				if ( message ) {
+					setCustomValidity( {
+						type: 'invalid',
+						message,
+					} );
+					return;
+				}
+
+				setCustomValidity( undefined );
+			} }
+			customValidity={ customValidity }
+			label={ label }
+			placeholder={ placeholder }
+			value={ value }
+			help={ description }
+			onChange={ handleInputChange }
+			hideLabelFromVision={ hideLabelFromVision }
+			type="text"
+			prefix={
+				<ColorPicker
+					color={ value }
+					onColorChange={ handleColorChange }
+				/>
+			}
+		/>
+	);
+}

package/src/dataform-controls/email.tsx

@@ -1,16 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { privateApis } from '@wordpress/components';
-import { useCallback, useState } from '@wordpress/element';
+import { atSymbol } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
-import { unlock } from '../lock-unlock';
-
-const { ValidatedTextControl } = unlock( privateApis );
+import ValidatedText from './utils/validated-text';
 
 export default function Email< Item >( {
 	data,
@@ -18,55 +15,16 @@ export default function Email< Item >( {
 	onChange,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id, label, placeholder, description } = field;
-	const value = field.getValue( { item: data } );
-	const [ customValidity, setCustomValidity ] =
-		useState<
-			React.ComponentProps<
-				typeof ValidatedTextControl
-			>[ 'customValidity' ]
-		>( undefined );
-
-	const onChangeControl = useCallback(
-		( newValue: string ) =>
-			onChange( {
-				[ id ]: newValue,
-			} ),
-		[ id, onChange ]
-	);
-
 	return (
-		<ValidatedTextControl
-			required={ !! field.isValid?.required }
-			onValidate={ ( newValue: any ) => {
-				const message = field.isValid?.custom?.(
-					{
-						...data,
-						[ id ]: newValue,
-					},
-					field
-				);
-
-				if ( message ) {
-					setCustomValidity( {
-						type: 'invalid',
-						message,
-					} );
-					return;
-				}
-
-				setCustomValidity( undefined );
+		<ValidatedText
+			{ ...{
+				data,
+				field,
+				onChange,
+				hideLabelFromVision,
+				type: 'email',
+				icon: atSymbol,
 			} }
-			customValidity={ customValidity }
-			type="email"
-			label={ label }
-			placeholder={ placeholder }
-			value={ value ?? '' }
-			help={ description }
-			onChange={ onChangeControl }
-			__next40pxDefaultSize
-			__nextHasNoMarginBottom
-			hideLabelFromVision={ hideLabelFromVision }
 		/>
 	);
 }

package/src/dataform-controls/index.tsx

@@ -15,13 +15,16 @@ import checkbox from './checkbox';
 import datetime from './datetime';
 import date from './date';
 import email from './email';
+import telephone from './telephone';
+import url from './url';
 import integer from './integer';
 import radio from './radio';
 import select from './select';
 import text from './text';
+import toggle from './toggle';
 import toggleGroup from './toggle-group';
-import boolean from './boolean';
 import array from './array';
+import color from './color';
 
 interface FormControls {
 	[ key: string ]: ComponentType< DataFormControlProps< any > >;
@@ -29,15 +32,18 @@ interface FormControls {
 
 const FORM_CONTROLS: FormControls = {
 	array,
-	boolean,
 	checkbox,
+	color,
 	datetime,
 	date,
 	email,
+	telephone,
+	url,
 	integer,
 	radio,
 	select,
 	text,
+	toggle,
 	toggleGroup,
 };
 

package/src/dataform-controls/telephone.tsx

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { mobile } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+import ValidatedText from './utils/validated-text';
+
+export default function Telephone< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	return (
+		<ValidatedText
+			{ ...{
+				data,
+				field,
+				onChange,
+				hideLabelFromVision,
+				type: 'tel',
+				icon: mobile,
+			} }
+		/>
+	);
+}