@wordpress/dataviews 9.1.1-next.f56bd8138.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 );
 					} }
@@ -273,7 +272,7 @@ function PlanetOverview( { planets }: { planets: SpaceObject[] } ) {
 						<DataViews.FiltersToggle />
 						<DataViews.Search label={ __( 'moons by planet' ) } />
 					</HStack>
-					<DataViews.Filters />
+					<DataViews.FiltersToggled />
 				</VStack>
 
 				<VStack>