@wordpress/dataviews 9.1.1-next.233ccab9b.0 → 10.0.0

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

@@ -11,15 +11,11 @@ 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';
+import DataViewsPicker from '../components/dataviews-picker/index';
+import { LAYOUT_PICKER_GRID } from '../constants';
+import filterSortAndPaginate from '../utils/filter-sort-and-paginate';
+import type { ActionButton, View } from '../types';
+import { data, fields, type SpaceObject } from './dataviews.fixtures';
 
 const meta = {
 	title: 'DataViews/DataViewsPicker',

package/src/{components/dataviews/stories/fixtures.tsx → stories/dataviews.fixtures.tsx}

@@ -12,7 +12,7 @@ import {
 /**
  * Internal dependencies
  */
-import type { Field, Action } from '../../../types';
+import type { Field, Action } from '../types';
 
 export type Theme = {
 	slug: string;
@@ -311,6 +311,21 @@ export const data: SpaceObject[] = [
 		datetime: '2020-03-01T10:15:20Z',
 		email: 'uranus@example.com',
 	},
+	{
+		id: 19,
+		name: {
+			title: 'Thessalonikopolymnianebuchodonossarinacharybdis',
+			description: 'Takes longer to say than to orbit.',
+		},
+		image: 'https://live.staticflickr.com/1357/935805705_119635028c_b.jpg',
+		type: 'Rogue planet',
+		isPlanet: true,
+		categories: [ 'Planet', 'Rogue planet' ],
+		satellites: 0,
+		date: '2020-03-01',
+		datetime: '2020-03-01T10:15:20Z',
+		email: 'thessalonikopolymnianebuchodonossarinacharybdis@example.com',
+	},
 ];
 
 export const themeData: Theme[] = [
@@ -753,15 +768,20 @@ export const actions: Action< SpaceObject >[] = [
 		label: 'Delete item',
 		isPrimary: true,
 		icon: trash,
-		hideModalHeader: true,
+		modalHeader: ( items ) =>
+			items.length > 1
+				? `Delete ${ items.length } items`
+				: `Delete ${ items[ 0 ].name.title }`,
 		modalFocusOnMount: 'firstContentElement',
 		supportsBulk: true,
 		RenderModal: ( { items, closeModal } ) => {
+			const label =
+				items.length > 1
+					? `Are you sure you want to delete ${ items.length } items?`
+					: `Are you sure you want to delete "${ items[ 0 ].name.title }"?`;
 			return (
 				<VStack spacing="5">
-					<Text>
-						{ `Are you sure you want to delete "${ items[ 0 ].name.title }"?` }
-					</Text>
+					<Text>{ label }</Text>
 					<HStack justify="right">
 						<Button
 							__next40pxDefaultSize
@@ -844,6 +864,17 @@ export const fields: Field< SpaceObject >[] = [
 			{ value: 'Ice giant', label: 'Ice giant' },
 			{ value: 'Terrestrial', label: 'Terrestrial' },
 			{ value: 'Gas giant', label: 'Gas giant' },
+			{ value: 'Dwarf planet', label: 'Dwarf planet' },
+			{ value: 'Asteroid', label: 'Asteroid' },
+			{ value: 'Comet', label: 'Comet' },
+			{ value: 'Kuiper belt object', label: 'Kuiper belt object' },
+			{ value: 'Protoplanet', label: 'Protoplanet' },
+			{ value: 'Planetesimal', label: 'Planetesimal' },
+			{ value: 'Minor planet', label: 'Minor planet' },
+			{
+				value: 'Trans-Neptunian object',
+				label: 'Trans-Neptunian object',
+			},
 		],
 		filterBy: {
 			operators: [ 'is', 'isNot' ],

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

@@ -29,19 +29,19 @@ import { __, _n } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import DataViews from '../index';
+import DataViews from '../components/dataviews/index';
+import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants';
+import filterSortAndPaginate from '../utils/filter-sort-and-paginate';
+import type { Field, View } from '../types';
 import {
 	DEFAULT_VIEW,
 	actions,
 	data,
 	fields,
 	type SpaceObject,
-} from './fixtures';
-import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../../../constants';
-import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
-import type { Field, View } from '../../../types';
+} from './dataviews.fixtures';
 
-import './style.css';
+import './dataviews.style.css';
 
 const meta = {
 	title: 'DataViews/DataViews',
@@ -93,8 +93,7 @@ export const Default = ( { perPageSizes = [ 10, 25, 50, 100 ] } ) => {
 			renderItemLink={ ( { item, ...props }: { item: SpaceObject } ) => (
 				<button
 					style={ { background: 'none', border: 'none', padding: 0 } }
-					onClick={ ( e ) => {
-						e.stopPropagation();
+					onClick={ () => {
 						// eslint-disable-next-line no-alert
 						alert( 'Clicked: ' + item.name.title );
 					} }

package/src/{field-types/stories/index.story.tsx → stories/field-types.story.tsx}

@@ -14,10 +14,10 @@ import { starFilled } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import DataViews from '../../components/dataviews/index';
-import DataForm from '../../components/dataform/index';
-import { filterSortAndPaginate } from '../../filter-and-sort-data-view';
-import type { View, Form, Field } from '../../types';
+import DataViews from '../components/dataviews/index';
+import DataForm from '../components/dataform/index';
+import filterSortAndPaginate from '../utils/filter-sort-and-paginate';
+import type { View, Form, Field } from '../types';
 
 const meta = {
 	title: 'DataViews/FieldTypes',
@@ -42,6 +42,7 @@ const meta = {
 				'datetime',
 				'email',
 				'integer',
+				'number',
 				'password',
 				'radio',
 				'select',
@@ -52,10 +53,17 @@ const meta = {
 				'toggleGroup',
 			],
 		},
+		asyncElements: {
+			control: { type: 'boolean' },
+			description:
+				'Whether the filter should fetch elements asynchronously.',
+			options: [ true, false ],
+		},
 	},
 	args: {
 		type: 'regular',
 		Edit: 'default',
+		asyncElements: false,
 	},
 };
 export default meta;
@@ -80,7 +88,6 @@ const USDSuffix = () => (
 		<span>USD</span>
 	</InputControlSuffixWrapper>
 );
-
 type DataType = {
 	id: number;
 	text: string;
@@ -89,6 +96,8 @@ type DataType = {
 	textWithTextarea: string;
 	integer: number;
 	integerWithElements: number;
+	number?: number;
+	numberWithElements?: number;
 	boolean: boolean;
 	booleanWithToggle: boolean;
 	booleanWithElements: boolean;
@@ -127,6 +136,8 @@ const data: DataType[] = [
 		textWithTextarea: 'Textarea',
 		integer: 1,
 		integerWithElements: 1,
+		number: 10.25,
+		numberWithElements: 2,
 		boolean: true,
 		booleanWithToggle: true,
 		booleanWithElements: true,
@@ -135,7 +146,7 @@ const data: DataType[] = [
 		date: '2021-01-01',
 		dateWithElements: '2021-01-01',
 		email: 'hi@example.com',
-		emailWithElements: 'hi@example.com',
+		emailWithElements: 'bob@example.com',
 		telephone: '+1-555-123-4567',
 		telephoneWithElements: '+1-555-123-4567',
 		color: '#ff6600',
@@ -211,6 +222,29 @@ const fields: Field< DataType >[] = [
 			{ value: 2, label: 'Two' },
 			{ value: 3, label: 'Three' },
 		],
+		setValue: ( { value } ) => ( {
+			integerWithElements: parseInt( value, 10 ),
+		} ),
+	},
+	{
+		id: 'number',
+		type: 'number',
+		label: 'Number',
+		description: 'Number field increments by 0.01.',
+	},
+	{
+		id: 'numberWithElements',
+		type: 'number',
+		label: 'Number (with elements)',
+		description: 'Number field with elements.',
+		elements: [
+			{ value: 1, label: 'One' },
+			{ value: 2, label: 'Two' },
+			{ value: 3, label: 'Three' },
+		],
+		setValue: ( { value } ) => ( {
+			numberWithElements: Number( value ),
+		} ),
 	},
 	{
 		id: 'boolean',
@@ -234,6 +268,9 @@ const fields: Field< DataType >[] = [
 			{ value: true, label: 'It is true' },
 			{ value: false, label: 'It is false' },
 		],
+		setValue: ( { value } ) => ( {
+			booleanWithElements: value === 'true' ? true : false,
+		} ),
 	},
 	{
 		id: 'datetime',
@@ -294,6 +331,9 @@ const fields: Field< DataType >[] = [
 			{ value: 'jane@example.com', label: 'Jane Doe' },
 			{ value: 'bob@example.com', label: 'Bob Smith' },
 		],
+		setValue: ( { value } ) => ( {
+			emailWithElements: value,
+		} ),
 	},
 	{
 		id: 'telephone',
@@ -495,6 +535,7 @@ type ControlTypes =
 	| 'datetime'
 	| 'email'
 	| 'integer'
+	| 'number'
 	| 'password'
 	| 'radio'
 	| 'select'
@@ -508,23 +549,44 @@ interface FieldTypeStoryProps {
 	fields: Field< DataType >[];
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 }
 
 const FieldTypeStory = ( {
 	fields: _fields,
 	type,
 	Edit,
+	asyncElements,
 }: FieldTypeStoryProps ) => {
 	const storyFields = useMemo( () => {
-		if ( Edit === 'default' ) {
-			return _fields;
+		let fieldsToProcess = _fields;
+
+		if ( Edit !== 'default' ) {
+			fieldsToProcess = _fields.map( ( field: Field< DataType > ) => ( {
+				...field,
+				Edit,
+			} ) );
+		}
+
+		if ( asyncElements ) {
+			fieldsToProcess = fieldsToProcess.map( ( field ) => {
+				if ( field.elements ) {
+					const elements = field.elements;
+					return {
+						...field,
+						elements: undefined,
+						getElements: () =>
+							new Promise( ( resolve ) =>
+								setTimeout( () => resolve( elements ), 3500 )
+							),
+					};
+				}
+				return field;
+			} );
 		}
 
-		return _fields.map( ( field: Field< DataType > ) => ( {
-			...field,
-			Edit,
-		} ) );
-	}, [ _fields, Edit ] );
+		return fieldsToProcess;
+	}, [ _fields, Edit, asyncElements ] );
 	const form = useMemo(
 		() => ( {
 			layout: { type },
@@ -622,37 +684,59 @@ const FieldTypeStory = ( {
 	);
 };
 
-export const All = ( {
+export const AllComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
-	return <FieldTypeStory fields={ fields } type={ type } Edit={ Edit } />;
+	return (
+		<FieldTypeStory
+			fields={ fields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
+	);
 };
+AllComponent.storyName = 'All types';
 
-export const Text = ( {
+export const TextComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const textFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'text' ),
 		[]
 	);
 
-	return <FieldTypeStory fields={ textFields } type={ type } Edit={ Edit } />;
+	return (
+		<FieldTypeStory
+			fields={ textFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
+	);
 };
+TextComponent.storyName = 'text';
 
-export const Integer = ( {
+export const IntegerComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const integerFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'integer' ),
@@ -660,16 +744,49 @@ export const Integer = ( {
 	);
 
 	return (
-		<FieldTypeStory fields={ integerFields } type={ type } Edit={ Edit } />
+		<FieldTypeStory
+			fields={ integerFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
 	);
 };
+IntegerComponent.storyName = 'integer';
 
-export const Boolean = ( {
+export const NumberComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
+} ) => {
+	const numberFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'number' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ numberFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
+	);
+};
+NumberComponent.storyName = 'number';
+
+export const BooleanComponent = ( {
+	type,
+	Edit,
+	asyncElements,
+}: {
+	type: PanelTypes;
+	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const booleanFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'boolean' ),
@@ -677,48 +794,73 @@ export const Boolean = ( {
 	);
 
 	return (
-		<FieldTypeStory fields={ booleanFields } type={ type } Edit={ Edit } />
+		<FieldTypeStory
+			fields={ booleanFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
 	);
 };
+BooleanComponent.storyName = 'boolean';
 
-export const DateTime = ( {
+export const DateTimeComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
-	const dateTimeFields = useMemo(
-		() => fields.filter( ( field ) => field.type === 'datetime' ),
-		[]
+	const datetimeFields = fields.filter( ( field ) =>
+		field.id.startsWith( 'datetime' )
 	);
 
 	return (
-		<FieldTypeStory fields={ dateTimeFields } type={ type } Edit={ Edit } />
+		<FieldTypeStory
+			fields={ datetimeFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
 	);
 };
+DateTimeComponent.storyName = 'datetime';
 
-export const Date = ( {
+export const DateComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const dateFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'date' ),
 		[]
 	);
 
-	return <FieldTypeStory fields={ dateFields } type={ type } Edit={ Edit } />;
+	return (
+		<FieldTypeStory
+			fields={ dateFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
+	);
 };
+DateComponent.storyName = 'date';
 
-export const Email = ( {
+export const EmailComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const emailFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'email' ),
@@ -726,20 +868,27 @@ export const Email = ( {
 	);
 
 	return (
-		<FieldTypeStory fields={ emailFields } type={ type } Edit={ Edit } />
+		<FieldTypeStory
+			fields={ emailFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
 	);
 };
+EmailComponent.storyName = 'email';
 
-export const Telephone = ( {
+export const TelephoneComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
-	const telephoneFields = useMemo(
-		() => fields.filter( ( field ) => field.type === 'telephone' ),
-		[]
+	const telephoneFields = fields.filter( ( field ) =>
+		field.id.startsWith( 'telephone' )
 	);
 
 	return (
@@ -747,31 +896,45 @@ export const Telephone = ( {
 			fields={ telephoneFields }
 			type={ type }
 			Edit={ Edit }
+			asyncElements={ asyncElements }
 		/>
 	);
 };
+TelephoneComponent.storyName = 'telephone';
 
-export const Url = ( {
+export const UrlComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const urlFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'url' ),
 		[]
 	);
 
-	return <FieldTypeStory fields={ urlFields } type={ type } Edit={ Edit } />;
+	return (
+		<FieldTypeStory
+			fields={ urlFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
+	);
 };
+UrlComponent.storyName = 'url';
 
-export const Color = ( {
+export const ColorComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const colorFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'color' ),
@@ -779,16 +942,24 @@ export const Color = ( {
 	);
 
 	return (
-		<FieldTypeStory fields={ colorFields } type={ type } Edit={ Edit } />
+		<FieldTypeStory
+			fields={ colorFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
 	);
 };
+ColorComponent.storyName = 'color';
 
-export const Media = ( {
+export const MediaComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const mediaFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'media' ),
@@ -796,16 +967,24 @@ export const Media = ( {
 	);
 
 	return (
-		<FieldTypeStory fields={ mediaFields } type={ type } Edit={ Edit } />
+		<FieldTypeStory
+			fields={ mediaFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
 	);
 };
+MediaComponent.storyName = 'media';
 
-export const Array = ( {
+export const ArrayComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const arrayTextFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'array' ),
@@ -817,33 +996,44 @@ export const Array = ( {
 			fields={ arrayTextFields }
 			type={ type }
 			Edit={ Edit }
+			asyncElements={ asyncElements }
 		/>
 	);
 };
+ArrayComponent.storyName = 'array';
 
-export const Password = ( {
+export const PasswordComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
-	const passwordFields = useMemo(
-		() => fields.filter( ( field ) => field.type === 'password' ),
-		[]
+	const passwordFields = fields.filter( ( field ) =>
+		field.id.startsWith( 'password' )
 	);
 
 	return (
-		<FieldTypeStory fields={ passwordFields } type={ type } Edit={ Edit } />
+		<FieldTypeStory
+			fields={ passwordFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
 	);
 };
+PasswordComponent.storyName = 'password';
 
-export const NoType = ( {
+export const NoTypeComponent = ( {
 	type,
 	Edit,
+	asyncElements,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
+	asyncElements: boolean;
 } ) => {
 	const noTypeFields = useMemo(
 		() => fields.filter( ( field ) => field.type === undefined ),
@@ -851,6 +1041,12 @@ export const NoType = ( {
 	);
 
 	return (
-		<FieldTypeStory fields={ noTypeFields } type={ type } Edit={ Edit } />
+		<FieldTypeStory
+			fields={ noTypeFields }
+			type={ type }
+			Edit={ Edit }
+			asyncElements={ asyncElements }
+		/>
 	);
 };
+NoTypeComponent.storyName = 'No type';