@wordpress/dataviews 3.0.0 → 4.0.0

package/build-types/stories/index.story.d.ts

@@ -1,29 +0,0 @@
-export default meta;
-export function Default(props: any): import("react").JSX.Element;
-export namespace Default {
-    namespace args {
-        export { actions };
-        export namespace defaultLayouts {
-            namespace table {
-                namespace layout {
-                    let primaryField: string;
-                }
-            }
-            namespace grid {
-                export namespace layout_1 {
-                    export let mediaField: string;
-                    let primaryField_1: string;
-                    export { primaryField_1 as primaryField };
-                }
-                export { layout_1 as layout };
-            }
-        }
-    }
-}
-declare namespace meta {
-    export let title: string;
-    export { DataViews as component };
-}
-import { actions } from './fixtures';
-import { DataViews } from '../index';
-//# sourceMappingURL=index.story.d.ts.map

package/build-types/stories/index.story.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../src/stories/index.story.js"],"names":[],"mappings":";AAmBO,iEAeN;;;;;;;;;;;;;;;;;;;;;;;;;wBAzBmD,YAAY;0BADtC,UAAU"}

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

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import type { NormalizedField, View, SupportedLayouts } from './types';
-interface ViewActionsProps<Item> {
-    fields: NormalizedField<Item>[];
-    view: View;
-    onChangeView: (view: View) => void;
-    defaultLayouts?: SupportedLayouts;
-}
-declare function _ViewActions<Item>({ fields, view, onChangeView, defaultLayouts, }: ViewActionsProps<Item>): import("react").JSX.Element;
-declare const ViewActions: typeof _ViewActions;
-export default ViewActions;
-//# sourceMappingURL=view-actions.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"view-actions.d.ts","sourceRoot":"","sources":["../src/view-actions.tsx"],"names":[],"mappings":";AAuBA,OAAO,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAkCvE,UAAU,gBAAgB,CAAE,IAAI;IAC/B,MAAM,EAAE,eAAe,CAAE,IAAI,CAAE,EAAE,CAAC;IAClC,IAAI,EAAE,IAAI,CAAC;IACX,YAAY,EAAE,CAAE,IAAI,EAAE,IAAI,KAAM,IAAI,CAAC;IACrC,cAAc,CAAC,EAAE,gBAAgB,CAAC;CAClC;AA6ND,iBAAS,YAAY,CAAE,IAAI,EAAI,EAC9B,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,cAAc,GACd,EAAE,gBAAgB,CAAE,IAAI,CAAE,+BAwD1B;AAGD,QAAA,MAAM,WAAW,qBAA8C,CAAC;AAEhE,eAAe,WAAW,CAAC"}

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

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { ViewGridProps } from './types';
-export default function ViewGrid<Item>({ actions, data, fields, getItemId, isLoading, onSelectionChange, selection, view, }: ViewGridProps<Item>): import("react").JSX.Element;
-//# sourceMappingURL=view-grid.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"view-grid.d.ts","sourceRoot":"","sources":["../src/view-grid.tsx"],"names":[],"mappings":";AAwBA,OAAO,KAAK,EAA2B,aAAa,EAAE,MAAM,SAAS,CAAC;AAmJtE,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAE,IAAI,EAAI,EACzC,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,SAAS,EACT,IAAI,GACJ,EAAE,aAAa,CAAE,IAAI,CAAE,+BAuEvB"}

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

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { ViewListProps } from './types';
-export default function ViewList<Item>(props: ViewListProps<Item>): import("react").JSX.Element;
-//# sourceMappingURL=view-list.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"view-list.d.ts","sourceRoot":"","sources":["../src/view-list.tsx"],"names":[],"mappings":";AAmCA,OAAO,KAAK,EAA2B,aAAa,EAAE,MAAM,SAAS,CAAC;AA8QtE,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAE,IAAI,EAAI,KAAK,EAAE,aAAa,CAAE,IAAI,CAAE,+BAyGrE"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"view-table.d.ts","sourceRoot":"","sources":["../src/view-table.tsx"],"names":[],"mappings":";AA8CA,OAAO,KAAK,EAKX,cAAc,EACd,MAAM,SAAS,CAAC;AA0WjB,iBAAS,SAAS,CAAE,IAAI,EAAI,EAC3B,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,2CAoKxB;AAED,eAAe,SAAS,CAAC"}

package/src/dataviews.tsx

@@ -1,183 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentType } from 'react';
-
-/**
- * WordPress dependencies
- */
-import { __experimentalHStack as HStack } from '@wordpress/components';
-import { useMemo, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Pagination from './pagination';
-import ViewActions from './view-actions';
-import Filters from './filters';
-import Search from './search';
-import { LAYOUT_TABLE, LAYOUT_GRID } from './constants';
-import { VIEW_LAYOUTS } from './layouts';
-import {
-	default as BulkActions,
-	useSomeItemHasAPossibleBulkAction,
-} from './bulk-actions';
-import { normalizeFields } from './normalize-fields';
-import BulkActionsToolbar from './bulk-actions-toolbar';
-import type {
-	Action,
-	Field,
-	View,
-	ViewBaseProps,
-	SupportedLayouts,
-} from './types';
-import type { SetSelection, SelectionOrUpdater } from './private-types';
-
-type ItemWithId = { id: string };
-
-type DataViewsProps< Item > = {
-	view: View;
-	onChangeView: ( view: View ) => void;
-	fields: Field< Item >[];
-	search?: boolean;
-	searchLabel?: string;
-	actions?: Action< Item >[];
-	data: Item[];
-	isLoading?: boolean;
-	paginationInfo: {
-		totalItems: number;
-		totalPages: number;
-	};
-	defaultLayouts: SupportedLayouts;
-	selection?: string[];
-	setSelection?: SetSelection;
-	onSelectionChange?: ( items: Item[] ) => void;
-} & ( Item extends ItemWithId
-	? { getItemId?: ( item: Item ) => string }
-	: { getItemId: ( item: Item ) => string } );
-
-const defaultGetItemId = ( item: ItemWithId ) => item.id;
-
-const defaultOnSelectionChange = () => {};
-
-export default function DataViews< Item >( {
-	view,
-	onChangeView,
-	fields,
-	search = true,
-	searchLabel = undefined,
-	actions = [],
-	data,
-	getItemId = defaultGetItemId,
-	isLoading = false,
-	paginationInfo,
-	defaultLayouts,
-	selection: selectionProperty,
-	setSelection: setSelectionProperty,
-	onSelectionChange = defaultOnSelectionChange,
-}: DataViewsProps< Item > ) {
-	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
-	const isUncontrolled =
-		selectionProperty === undefined || setSelectionProperty === undefined;
-	const selection = isUncontrolled ? selectionState : selectionProperty;
-	const setSelection = isUncontrolled
-		? setSelectionState
-		: setSelectionProperty;
-	const [ openedFilter, setOpenedFilter ] = useState< string | null >( null );
-
-	function setSelectionWithChange( value: SelectionOrUpdater ) {
-		const newValue =
-			typeof value === 'function' ? value( selection ) : value;
-		onSelectionChange(
-			data.filter( ( item ) => newValue.includes( getItemId( item ) ) )
-		);
-		return setSelection( value );
-	}
-
-	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
-		?.component as ComponentType< ViewBaseProps< Item > >;
-	const _fields = useMemo( () => normalizeFields( fields ), [ fields ] );
-
-	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
-		actions,
-		data
-	);
-	const _selection = useMemo( () => {
-		return selection.filter( ( id ) =>
-			data.some( ( item ) => getItemId( item ) === id )
-		);
-	}, [ selection, data, getItemId ] );
-	return (
-		<div className="dataviews-wrapper">
-			<HStack
-				alignment="top"
-				justify="start"
-				className="dataviews-filters__view-actions"
-			>
-				<HStack
-					justify="start"
-					className="dataviews-filters__container"
-					wrap
-				>
-					{ search && (
-						<Search
-							label={ searchLabel }
-							view={ view }
-							onChangeView={ onChangeView }
-						/>
-					) }
-					<Filters
-						fields={ _fields }
-						view={ view }
-						onChangeView={ onChangeView }
-						openedFilter={ openedFilter }
-						setOpenedFilter={ setOpenedFilter }
-					/>
-				</HStack>
-				{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
-					hasPossibleBulkAction && (
-						<BulkActions
-							actions={ actions }
-							data={ data }
-							onSelectionChange={ setSelectionWithChange }
-							selection={ _selection }
-							getItemId={ getItemId }
-						/>
-					) }
-				<ViewActions
-					fields={ _fields }
-					view={ view }
-					onChangeView={ onChangeView }
-					defaultLayouts={ defaultLayouts }
-				/>
-			</HStack>
-			<ViewComponent
-				actions={ actions }
-				data={ data }
-				fields={ _fields }
-				getItemId={ getItemId }
-				isLoading={ isLoading }
-				onChangeView={ onChangeView }
-				onSelectionChange={ setSelectionWithChange }
-				selection={ _selection }
-				setOpenedFilter={ setOpenedFilter }
-				view={ view }
-			/>
-			<Pagination
-				view={ view }
-				onChangeView={ onChangeView }
-				paginationInfo={ paginationInfo }
-			/>
-			{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
-				hasPossibleBulkAction && (
-					<BulkActionsToolbar
-						data={ data }
-						actions={ actions }
-						selection={ _selection }
-						onSelectionChange={ setSelectionWithChange }
-						getItemId={ getItemId }
-					/>
-				) }
-		</div>
-	);
-}

package/src/layouts.ts

@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, isRTL } from '@wordpress/i18n';
-import {
-	blockTable,
-	category,
-	formatListBullets,
-	formatListBulletsRTL,
-} from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import ViewTable from './view-table';
-import ViewGrid from './view-grid';
-import ViewList from './view-list';
-import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from './constants';
-
-export const VIEW_LAYOUTS = [
-	{
-		type: LAYOUT_TABLE,
-		label: __( 'Table' ),
-		component: ViewTable,
-		icon: blockTable,
-	},
-	{
-		type: LAYOUT_GRID,
-		label: __( 'Grid' ),
-		component: ViewGrid,
-		icon: category,
-	},
-	{
-		type: LAYOUT_LIST,
-		label: __( 'List' ),
-		component: ViewList,
-		icon: isRTL() ? formatListBulletsRTL : formatListBullets,
-	},
-];