@wordpress/dataviews 3.0.0 → 4.0.0

package/src/components/dataviews-filters/style.scss

@@ -0,0 +1,252 @@
+.dataviews-filters__button {
+	position: relative;
+}
+
+.dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled="true"] {
+	&,
+	&:hover {
+		opacity: 0;
+	}
+
+	&:focus {
+		opacity: 1;
+	}
+}
+
+.dataviews-filters__summary-popover {
+	.components-popover__content {
+		width: 230px;
+		padding: 0;
+		border-radius: $grid-unit-05;
+	}
+}
+
+.dataviews-filters__summary-operators-container {
+	padding: $grid-unit-10 $grid-unit-10 0;
+
+	&:has(+ .dataviews-filters__search-widget-listbox) {
+		border-bottom: 1px solid $gray-200;
+		padding-bottom: $grid-unit-10;
+	}
+
+	&:empty {
+		display: none;
+	}
+
+	.dataviews-filters__summary-operators-filter-name {
+		color: $gray-700;
+	}
+}
+
+.dataviews-filters__summary-chip-container {
+	position: relative;
+	white-space: pre-wrap;
+
+	.dataviews-filters__summary-chip {
+		border-radius: $grid-unit-20;
+		border: 1px solid transparent;
+		cursor: pointer;
+		padding: $grid-unit-05 $grid-unit-15;
+		min-height: $grid-unit-40;
+		background: $gray-100;
+		color: $gray-800;
+		position: relative;
+		display: flex;
+		align-items: center;
+
+		&.has-reset {
+			padding-inline-end: $button-size-small + $grid-unit-05;
+		}
+
+		&:hover,
+		&:focus-visible,
+		&[aria-expanded="true"] {
+			background: $gray-200;
+			color: $gray-900;
+		}
+
+		&.has-values {
+			color: var(--wp-admin-theme-color);
+			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+
+			&:hover,
+			&[aria-expanded="true"] {
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
+			}
+		}
+
+		&:focus-visible {
+			outline: none;
+			box-shadow:
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
+		}
+
+		.dataviews-filters-__summary-filter-text-name {
+			font-weight: 500;
+		}
+	}
+
+	.dataviews-filters__summary-chip-remove {
+		width: $icon-size;
+		height: $icon-size;
+		border-radius: 50%;
+		border: 0;
+		padding: 0;
+		position: absolute;
+		right: $grid-unit-05;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: transparent;
+		cursor: pointer;
+
+		svg {
+			fill: $gray-700;
+		}
+
+		&:hover,
+		&:focus {
+			background: $gray-200;
+			svg {
+				fill: $gray-900;
+			}
+		}
+
+		&.has-values {
+			svg {
+				fill: var(--wp-admin-theme-color);
+			}
+			&:hover {
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+			}
+		}
+
+		&:focus-visible {
+			outline: none;
+			box-shadow:
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
+		}
+	}
+}
+
+.dataviews-filters__search-widget-filter-combobox-list {
+	max-height: $grid-unit * 23;
+	padding: $grid-unit-05;
+	overflow: auto;
+	border-top: 1px solid $gray-200;
+
+	.dataviews-filters__search-widget-filter-combobox-item-value {
+		[data-user-value] {
+			font-weight: 600;
+		}
+	}
+}
+
+.dataviews-filters__search-widget-listbox {
+	max-height: $grid-unit * 23;
+	padding: $grid-unit-05;
+	overflow: auto;
+}
+
+.dataviews-filters__search-widget-listitem {
+	display: flex;
+	align-items: center;
+	gap: $grid-unit-10;
+	border-radius: $radius-block-ui;
+	box-sizing: border-box;
+	padding: $grid-unit-10 $grid-unit-15;
+	cursor: default;
+	margin-block-end: 2px;
+
+	&:last-child {
+		margin-block-end: 0;
+	}
+
+	&:hover,
+	&[data-active-item],
+	&:focus {
+		background-color: var(--wp-admin-theme-color);
+		color: $white;
+
+		.dataviews-filters__search-widget-listitem-check {
+			fill: $white;
+		}
+
+		.dataviews-filters__search-widget-listitem-description {
+			color: $white;
+		}
+	}
+
+	.dataviews-filters__search-widget-listitem-check {
+		width: 24px;
+		height: 24px;
+		flex-shrink: 0;
+	}
+
+	.dataviews-filters__search-widget-listitem-description {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-size: $helptext-font-size;
+		line-height: 16px;
+		color: $gray-700;
+	}
+}
+
+.dataviews-filters__search-widget-filter-combobox__wrapper {
+	position: relative;
+	padding: $grid-unit-10;
+
+	.dataviews-filters__search-widget-filter-combobox__input {
+		@include input-control;
+		display: block;
+		padding: 0 $grid-unit-40 0 $grid-unit-10;
+		background: $gray-100;
+		border: none;
+		width: 100%;
+		height: $grid-unit-40;
+
+		// Unset inherited values.
+		margin-left: 0;
+		margin-right: 0;
+
+		/* Fonts smaller than 16px causes mobile safari to zoom. */
+		font-size: $mobile-text-min-font-size;
+		@include break-small {
+			font-size: $default-font-size;
+		}
+
+		&:focus {
+			background: $white;
+			box-shadow:
+				inset 0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
+		}
+
+		&::placeholder {
+			color: $gray-700;
+		}
+
+		&::-webkit-search-decoration,
+		&::-webkit-search-cancel-button,
+		&::-webkit-search-results-button,
+		&::-webkit-search-results-decoration {
+			-webkit-appearance: none;
+		}
+	}
+
+	.dataviews-filters__search-widget-filter-combobox__icon {
+		position: absolute;
+		right: $grid-unit-15;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: $icon-size;
+	}
+}

package/src/{item-actions.tsx → components/dataviews-item-actions/index.tsx}

@@ -20,8 +20,8 @@ import { useRegistry } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
-import type { Action, ActionModal as ActionModalType } from './types';
+import { unlock } from '../../lock-unlock';
+import type { Action, ActionModal as ActionModalType } from '../../types';
 
 const {
 	DropdownMenuV2: DropdownMenu,

package/src/components/dataviews-item-actions/style.scss

@@ -0,0 +1,3 @@
+.dataviews-action-modal {
+	z-index: z-index(".dataviews-action-modal");
+}

package/src/components/dataviews-layout/index.tsx

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import type { ComponentType } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../dataviews-context';
+import { VIEW_LAYOUTS } from '../../layouts';
+import type { ViewBaseProps } from '../../types';
+
+export default function DataViewsLayout() {
+	const {
+		actions = [],
+		data,
+		fields,
+		getItemId,
+		isLoading,
+		view,
+		onChangeView,
+		selection,
+		onChangeSelection,
+		setOpenedFilter,
+		density,
+	} = useContext( DataViewsContext );
+
+	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
+		?.component as ComponentType< ViewBaseProps< any > >;
+
+	return (
+		<ViewComponent
+			actions={ actions }
+			data={ data }
+			fields={ fields }
+			getItemId={ getItemId }
+			isLoading={ isLoading }
+			onChangeView={ onChangeView }
+			onChangeSelection={ onChangeSelection }
+			selection={ selection }
+			setOpenedFilter={ setOpenedFilter }
+			view={ view }
+			density={ density }
+		/>
+	);
+}

package/src/{pagination.tsx → components/dataviews-pagination/index.tsx}

@@ -6,29 +6,21 @@ import {
 	__experimentalHStack as HStack,
 	SelectControl,
 } from '@wordpress/components';
-import { createInterpolateElement, memo } from '@wordpress/element';
+import { createInterpolateElement, memo, useContext } from '@wordpress/element';
 import { sprintf, __, _x } from '@wordpress/i18n';
-import { chevronRight, chevronLeft } from '@wordpress/icons';
+import { next, previous } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import type { View } from './types';
+import DataViewsContext from '../dataviews-context';
 
-interface PaginationProps {
-	view: View;
-	onChangeView: ( view: View ) => void;
-	paginationInfo: {
-		totalItems: number;
-		totalPages: number;
-	};
-}
-
-const Pagination = memo( function Pagination( {
-	view,
-	onChangeView,
-	paginationInfo: { totalItems = 0, totalPages },
-}: PaginationProps ) {
+function DataViewsPagination() {
+	const {
+		view,
+		onChangeView,
+		paginationInfo: { totalItems = 0, totalPages },
+	} = useContext( DataViewsContext );
 	if ( ! totalItems || ! totalPages ) {
 		return null;
 	}
@@ -92,7 +84,7 @@ const Pagination = memo( function Pagination( {
 						disabled={ currentPage === 1 }
 						accessibleWhenDisabled
 						label={ __( 'Previous page' ) }
-						icon={ chevronLeft }
+						icon={ previous }
 						showTooltip
 						size="compact"
 						tooltipPosition="top"
@@ -104,7 +96,7 @@ const Pagination = memo( function Pagination( {
 						disabled={ currentPage >= totalPages }
 						accessibleWhenDisabled
 						label={ __( 'Next page' ) }
-						icon={ chevronRight }
+						icon={ next }
 						showTooltip
 						size="compact"
 						tooltipPosition="top"
@@ -113,6 +105,6 @@ const Pagination = memo( function Pagination( {
 			</HStack>
 		)
 	);
-} );
+}
 
-export default Pagination;
+export default memo( DataViewsPagination );

package/src/components/dataviews-pagination/style.scss

@@ -0,0 +1,26 @@
+.dataviews-pagination {
+	position: sticky;
+	bottom: 0;
+	left: 0;
+	background-color: $white;
+	padding: $grid-unit-15 $grid-unit-60;
+	border-top: $border-width solid $gray-100;
+	color: $gray-700;
+	flex-shrink: 0;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+}
+
+.dataviews-pagination__page-selection {
+	font-size: 11px;
+	text-transform: uppercase;
+	font-weight: 500;
+	color: $gray-900;
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.dataviews-pagination {
+		padding: $grid-unit-15 $grid-unit-30;
+	}
+}

package/src/{search.tsx → components/dataviews-search/index.tsx}

@@ -2,26 +2,21 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect, useRef, memo } from '@wordpress/element';
+import { useEffect, useRef, memo, useContext } from '@wordpress/element';
 import { SearchControl } from '@wordpress/components';
 import { useDebouncedInput } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import type { View } from './types';
+import DataViewsContext from '../dataviews-context';
 
 interface SearchProps {
 	label?: string;
-	view: View;
-	onChangeView: ( view: View ) => void;
 }
 
-const Search = memo( function Search( {
-	label,
-	view,
-	onChangeView,
-}: SearchProps ) {
+const DataViewsSearch = memo( function Search( { label }: SearchProps ) {
+	const { view, onChangeView } = useContext( DataViewsContext );
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
 		view.search
 	);
@@ -54,4 +49,4 @@ const Search = memo( function Search( {
 	);
 } );
 
-export default Search;
+export default DataViewsSearch;

package/src/{single-selection-checkbox.tsx → components/dataviews-selection-checkbox/index.tsx}

@@ -7,26 +7,26 @@ import { CheckboxControl } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import type { Field } from './types';
-import type { SetSelection } from './private-types';
+import type { Field } from '../../types';
+import type { SetSelection } from '../../private-types';
 
-interface SingleSelectionCheckboxProps< Item > {
+interface DataViewsSelectionCheckboxProps< Item > {
 	selection: string[];
-	onSelectionChange: SetSelection;
+	onChangeSelection: SetSelection;
 	item: Item;
 	getItemId: ( item: Item ) => string;
 	primaryField?: Field< Item >;
 	disabled: boolean;
 }
 
-export default function SingleSelectionCheckbox< Item >( {
+export default function DataViewsSelectionCheckbox< Item >( {
 	selection,
-	onSelectionChange,
+	onChangeSelection,
 	item,
 	getItemId,
 	primaryField,
 	disabled,
-}: SingleSelectionCheckboxProps< Item > ) {
+}: DataViewsSelectionCheckboxProps< Item > ) {
 	const id = getItemId( item );
 	const checked = ! disabled && selection.includes( id );
 	let selectionLabel;
@@ -44,7 +44,7 @@ export default function SingleSelectionCheckbox< Item >( {
 	}
 	return (
 		<CheckboxControl
-			className="dataviews-view-table-selection-checkbox"
+			className="dataviews-selection-checkbox"
 			__nextHasNoMarginBottom
 			aria-label={ selectionLabel }
 			aria-disabled={ disabled }
@@ -54,7 +54,7 @@ export default function SingleSelectionCheckbox< Item >( {
 					return;
 				}
 
-				onSelectionChange(
+				onChangeSelection(
 					selection.includes( id )
 						? selection.filter( ( itemId ) => id !== itemId )
 						: [ ...selection, id ]

package/src/components/dataviews-selection-checkbox/style.scss

@@ -0,0 +1,14 @@
+.dataviews-selection-checkbox {
+	// Experimental override for CheckboxControl size (fragile)
+	--checkbox-input-size: 24px;
+	@include break-small() {
+		--checkbox-input-size: 16px;
+	}
+
+	line-height: 0;
+	flex-shrink: 0;
+
+	.components-checkbox-control__input-container {
+		margin: 0;
+	}
+}

package/src/{view-actions.tsx → components/dataviews-view-config/index.tsx}

@@ -12,16 +12,17 @@ import {
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-import { memo } from '@wordpress/element';
+import { memo, useContext } from '@wordpress/element';
 import { cog } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
-import { SORTING_DIRECTIONS, sortLabels } from './constants';
-import { VIEW_LAYOUTS } from './layouts';
-import type { NormalizedField, View, SupportedLayouts } from './types';
+import { unlock } from '../../lock-unlock';
+import { SORTING_DIRECTIONS, sortLabels } from '../../constants';
+import { VIEW_LAYOUTS, getMandatoryFields } from '../../layouts';
+import type { NormalizedField, View, SupportedLayouts } from '../../types';
+import DataViewsContext from '../dataviews-context';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -55,10 +56,7 @@ interface SortMenuProps< Item > {
 	onChangeView: ( view: View ) => void;
 }
 
-interface ViewActionsProps< Item > {
-	fields: NormalizedField< Item >[];
-	view: View;
-	onChangeView: ( view: View ) => void;
+interface ViewActionsProps {
 	defaultLayouts?: SupportedLayouts;
 }
 
@@ -147,10 +145,11 @@ function FieldsVisibilityMenu< Item >( {
 	onChangeView,
 	fields,
 }: FieldsVisibilityMenuProps< Item > ) {
+	const mandatoryFields = getMandatoryFields( view );
 	const hidableFields = fields.filter(
 		( field ) =>
 			field.enableHiding !== false &&
-			field.id !== view?.layout?.mediaField
+			! mandatoryFields.includes( field.id )
 	);
 	const viewFields = view.fields || fields.map( ( field ) => field.id );
 	if ( ! hidableFields?.length ) {
@@ -184,7 +183,7 @@ function FieldsVisibilityMenu< Item >( {
 						} }
 					>
 						<DropdownMenuItemLabel>
-							{ field.header }
+							{ field.label }
 						</DropdownMenuItemLabel>
 					</DropdownMenuCheckboxItem>
 				);
@@ -213,7 +212,7 @@ function SortMenu< Item >( {
 				<DropdownMenuItem
 					suffix={
 						<span aria-hidden="true">
-							{ currentSortedField?.header }
+							{ currentSortedField?.label }
 						</span>
 					}
 				>
@@ -231,7 +230,7 @@ function SortMenu< Item >( {
 						trigger={
 							<DropdownMenuItem>
 								<DropdownMenuItemLabel>
-									{ field.header }
+									{ field.label }
 								</DropdownMenuItemLabel>
 							</DropdownMenuItem>
 						}
@@ -281,12 +280,8 @@ function SortMenu< Item >( {
 	);
 }
 
-function _ViewActions< Item >( {
-	fields,
-	view,
-	onChangeView,
-	defaultLayouts,
-}: ViewActionsProps< Item > ) {
+function _DataViewsViewConfig( { defaultLayouts }: ViewActionsProps ) {
+	const { view, fields, onChangeView } = useContext( DataViewsContext );
 	const activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );
 	return (
 		<>
@@ -344,7 +339,6 @@ function _ViewActions< Item >( {
 	);
 }
 
-// A type assertion is used here to keep the type argument.
-const ViewActions = memo( _ViewActions ) as typeof _ViewActions;
+const DataViewsViewConfig = memo( _DataViewsViewConfig );
 
-export default ViewActions;
+export default DataViewsViewConfig;

package/src/index.ts

@@ -1,5 +1,5 @@
-export { default as DataViews } from './dataviews';
+export { default as DataViews } from './components/dataviews';
+export { default as DataForm } from './components/dataform';
 export { VIEW_LAYOUTS } from './layouts';
 export { filterSortAndPaginate } from './filter-and-sort-data-view';
 export type * from './types';
-export { default as DataForm } from './dataform';