@wordpress/dataviews 3.0.0 → 4.1.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/dataform.tsx

@@ -1,106 +0,0 @@
-/**
- * External dependencies
- */
-import type { Dispatch, SetStateAction } from 'react';
-
-/**
- * WordPress dependencies
- */
-import { TextControl } from '@wordpress/components';
-import { useCallback, useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import type { Form, Field, NormalizedField } from './types';
-import { normalizeFields } from './normalize-fields';
-
-type DataFormProps< Item > = {
-	data: Item;
-	fields: Field< Item >[];
-	form: Form;
-	onChange: Dispatch< SetStateAction< Item > >;
-};
-
-type DataFormControlProps< Item > = {
-	data: Item;
-	field: NormalizedField< Item >;
-	onChange: Dispatch< SetStateAction< Item > >;
-};
-
-function DataFormTextControl< Item >( {
-	data,
-	field,
-	onChange,
-}: DataFormControlProps< Item > ) {
-	const { id, header, placeholder } = field;
-	const value = field.getValue( { item: data } );
-
-	const onChangeControl = useCallback(
-		( newValue: string ) =>
-			onChange( ( prevItem: Item ) => ( {
-				...prevItem,
-				[ id ]: newValue,
-			} ) ),
-		[ id, onChange ]
-	);
-
-	return (
-		<TextControl
-			label={ header }
-			placeholder={ placeholder }
-			value={ value }
-			onChange={ onChangeControl }
-			__next40pxDefaultSize
-		/>
-	);
-}
-
-const controls: {
-	[ key: string ]: < Item >(
-		props: DataFormControlProps< Item >
-	) => JSX.Element;
-} = {
-	text: DataFormTextControl,
-};
-
-function getControlForField< Item >( field: NormalizedField< Item > ) {
-	if ( ! field.type ) {
-		return null;
-	}
-
-	if ( ! Object.keys( controls ).includes( field.type ) ) {
-		return null;
-	}
-
-	return controls[ field.type ];
-}
-
-export default function DataForm< Item >( {
-	data,
-	fields,
-	form,
-	onChange,
-}: DataFormProps< Item > ) {
-	const visibleFields = useMemo(
-		() =>
-			normalizeFields(
-				fields.filter(
-					( { id } ) => !! form.visibleFields?.includes( id )
-				)
-			),
-		[ fields, form.visibleFields ]
-	);
-
-	return visibleFields.map( ( field ) => {
-		const DataFormControl = getControlForField( field );
-		return DataFormControl ? (
-			<DataFormControl
-				key={ field.id }
-				data={ data }
-				field={ field }
-				onChange={ onChange }
-			/>
-		) : null;
-	} );
-}

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/filters.tsx

@@ -1,125 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { memo, useRef } from '@wordpress/element';
-import { __experimentalHStack as HStack } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import FilterSummary from './filter-summary';
-import AddFilter from './add-filter';
-import ResetFilters from './reset-filters';
-import { sanitizeOperators } from './utils';
-import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from './constants';
-import type { NormalizedField, NormalizedFilter, View } from './types';
-
-interface FiltersProps< Item > {
-	fields: NormalizedField< Item >[];
-	view: View;
-	onChangeView: ( view: View ) => void;
-	openedFilter: string | null;
-	setOpenedFilter: ( openedFilter: string | null ) => void;
-}
-
-function _Filters< Item >( {
-	fields,
-	view,
-	onChangeView,
-	openedFilter,
-	setOpenedFilter,
-}: FiltersProps< Item > ) {
-	const addFilterRef = useRef< HTMLButtonElement >( null );
-	const filters: NormalizedFilter[] = [];
-	fields.forEach( ( field ) => {
-		if ( ! field.elements?.length ) {
-			return;
-		}
-
-		const operators = sanitizeOperators( field );
-		if ( operators.length === 0 ) {
-			return;
-		}
-
-		const isPrimary = !! field.filterBy?.isPrimary;
-		filters.push( {
-			field: field.id,
-			name: field.header,
-			elements: field.elements,
-			singleSelection: operators.some( ( op ) =>
-				[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op )
-			),
-			operators,
-			isVisible:
-				isPrimary ||
-				!! view.filters?.some(
-					( f ) =>
-						f.field === field.id &&
-						ALL_OPERATORS.includes( f.operator )
-				),
-			isPrimary,
-		} );
-	} );
-	// Sort filters by primary property. We need the primary filters to be first.
-	// Then we sort by name.
-	filters.sort( ( a, b ) => {
-		if ( a.isPrimary && ! b.isPrimary ) {
-			return -1;
-		}
-		if ( ! a.isPrimary && b.isPrimary ) {
-			return 1;
-		}
-		return a.name.localeCompare( b.name );
-	} );
-	const addFilter = (
-		<AddFilter
-			key="add-filter"
-			filters={ filters }
-			view={ view }
-			onChangeView={ onChangeView }
-			ref={ addFilterRef }
-			setOpenedFilter={ setOpenedFilter }
-		/>
-	);
-	const filterComponents = [
-		...filters.map( ( filter ) => {
-			if ( ! filter.isVisible ) {
-				return null;
-			}
-
-			return (
-				<FilterSummary
-					key={ filter.field }
-					filter={ filter }
-					view={ view }
-					onChangeView={ onChangeView }
-					addFilterRef={ addFilterRef }
-					openedFilter={ openedFilter }
-				/>
-			);
-		} ),
-		addFilter,
-	];
-
-	if ( filterComponents.length > 1 ) {
-		filterComponents.push(
-			<ResetFilters
-				key="reset-filters"
-				filters={ filters }
-				view={ view }
-				onChangeView={ onChangeView }
-			/>
-		);
-	}
-
-	return (
-		<HStack justify="flex-start" style={ { width: 'fit-content' } } wrap>
-			{ filterComponents }
-		</HStack>
-	);
-}
-
-// A type assertion is used here to keep the type argument.
-const Filters = memo( _Filters ) as typeof _Filters;
-
-export default Filters;

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,
-	},
-];