@wordpress/dataviews 7.0.1-next.f34ab90e9.0 → 8.0.0

package/src/components/dataviews/index.tsx

@@ -66,11 +66,9 @@ type DataViewsProps< Item > = {
 	header?: ReactNode;
 	getItemLevel?: ( item: Item ) => number;
 	children?: ReactNode;
-	config?:
-		| false
-		| {
-				perPageSizes: number[];
-		  };
+	config?: {
+		perPageSizes: number[];
+	};
 	empty?: ReactNode;
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
@@ -90,7 +88,7 @@ function DefaultUI( {
 	search = true,
 	searchLabel = undefined,
 }: DefaultUIProps ) {
-	const { isShowingFilter, config } = useContext( DataViewsContext );
+	const { isShowingFilter } = useContext( DataViewsContext );
 	return (
 		<>
 			<HStack
@@ -107,16 +105,14 @@ function DefaultUI( {
 					{ search && <DataViewsSearch label={ searchLabel } /> }
 					<FiltersToggle />
 				</HStack>
-				{ ( config || header ) && (
-					<HStack
-						spacing={ 1 }
-						expanded={ false }
-						style={ { flexShrink: 0 } }
-					>
-						config && <DataViewsViewConfig />
-						{ header }
-					</HStack>
-				) }
+				<HStack
+					spacing={ 1 }
+					expanded={ false }
+					style={ { flexShrink: 0 } }
+				>
+					<DataViewsViewConfig />
+					{ header }
+				</HStack>
 			</HStack>
 			{ isShowingFilter && (
 				<DataViewsFilters className="dataviews-filters__container" />
@@ -282,6 +278,7 @@ const DataViewsSubComponents = DataViews as typeof DataViews & {
 	Pagination: typeof DataViewsPagination;
 	Search: typeof DataViewsSearch;
 	ViewConfig: typeof DataviewsViewConfigDropdown;
+	Footer: typeof DataViewsFooter;
 };
 
 DataViewsSubComponents.BulkActionToolbar = BulkActionsFooter;
@@ -292,5 +289,6 @@ DataViewsSubComponents.LayoutSwitcher = ViewTypeMenu;
 DataViewsSubComponents.Pagination = DataViewsPagination;
 DataViewsSubComponents.Search = DataViewsSearch;
 DataViewsSubComponents.ViewConfig = DataviewsViewConfigDropdown;
+DataViewsSubComponents.Footer = DataViewsFooter;
 
 export default DataViewsSubComponents;

package/src/components/dataviews/stories/fixtures.tsx

@@ -772,7 +772,7 @@ export const fields: Field< SpaceObject >[] = [
 		label: 'Title',
 		id: 'title',
 		type: 'text',
-		enableHiding: false,
+		enableHiding: true,
 		enableGlobalSearch: true,
 		filterBy: {
 			operators: [ 'contains', 'notContains', 'startsWith' ],

package/src/components/dataviews/stories/index.story.tsx

@@ -46,6 +46,20 @@ import './style.css';
 const meta = {
 	title: 'DataViews/DataViews',
 	component: DataViews,
+	// Use fullscreen layout and a wrapper div with padding to resolve conflicts
+	// between Ariakit's Dialog (usePreventBodyScroll) and Storybook's body padding
+	// (sb-main-padding class). This ensures consistent layout in DataViews stories
+	// when clicking actions menus. Without this the padding on the body will jump.
+	parameters: {
+		layout: 'fullscreen',
+	},
+	decorators: [
+		( Story ) => (
+			<div style={ { padding: '1rem' } }>
+				<Story />
+			</div>
+		),
+	],
 } as Meta< typeof DataViews >;
 
 export default meta;
@@ -146,7 +160,11 @@ export const CustomEmpty = () => {
 	);
 };
 
-export const MinimalUI = () => {
+const MinimalUIComponent = ( {
+	layout = 'table',
+}: {
+	layout: 'table' | 'list' | 'grid';
+} ) => {
 	const [ view, setView ] = useState< View >( {
 		...DEFAULT_VIEW,
 		fields: [ 'title', 'description', 'categories' ],
@@ -165,6 +183,13 @@ export const MinimalUI = () => {
 		filterBy: false,
 	} ) );
 
+	useEffect( () => {
+		setView( {
+			...view,
+			type: layout as any,
+		} );
+	}, [ layout ] );
+
 	return (
 		<DataViews
 			getItemId={ ( item ) => item.id.toString() }
@@ -172,15 +197,24 @@ export const MinimalUI = () => {
 			data={ shownData }
 			view={ view }
 			fields={ _fields }
-			config={ false }
-			search={ false }
 			onChangeView={ setView }
-			defaultLayouts={ {
-				table: {},
-			} }
-		/>
+			defaultLayouts={ { [ layout ]: {} } }
+		>
+			<DataViews.Layout />
+			<DataViews.Footer />
+		</DataViews>
 	);
 };
+export const MinimalUI = {
+	render: MinimalUIComponent,
+	argTypes: {
+		layout: {
+			control: 'select',
+			options: [ 'table', 'list', 'grid' ],
+			defaultValue: 'table',
+		},
+	},
+};
 
 /**
  * Custom composition example

package/src/components/dataviews-context/index.ts

@@ -54,7 +54,7 @@ type DataViewsContextType< Item > = {
 	filters: NormalizedFilter[];
 	isShowingFilter: boolean;
 	setIsShowingFilter: ( value: boolean ) => void;
-	config: false | { perPageSizes: number[] };
+	config: { perPageSizes: number[] };
 	empty?: ReactNode;
 	hasInfiniteScrollHandler: boolean;
 };
@@ -88,4 +88,6 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	},
 } );
 
+DataViewsContext.displayName = 'DataViewsContext';
+
 export default DataViewsContext;

package/src/dataforms-layouts/card/index.tsx

@@ -104,6 +104,11 @@ export default function FormCardField< Item >( {
 					// If it doesn't have a header, keep it open.
 					// Otherwise, the card will not be visible.
 					<CardBody className="dataforms-layouts-card__field-control">
+						{ field.description && (
+							<div className="dataforms-layouts-card__field-description">
+								{ field.description }
+							</div>
+						) }
 						<DataFormLayout
 							data={ data }
 							form={ form }

package/src/dataforms-layouts/card/style.scss

@@ -1,3 +1,10 @@
 .dataforms-layouts-card__field {
 	width: 100%;
 }
+
+.dataforms-layouts-card__field-description {
+	color: $gray-700;
+	display: block;
+	font-size: $font-size-medium;
+	margin-bottom: $grid-unit-20;
+}

package/src/dataviews-layouts/grid/index.tsx

@@ -108,6 +108,7 @@ function GridItem< Item >( {
 		showTitle && titleField?.render ? (
 			<titleField.render item={ item } field={ titleField } />
 		) : null;
+	const shouldRenderMedia = showMedia && renderedMediaField;
 
 	let mediaA11yProps;
 	let titleA11yProps;
@@ -154,7 +155,7 @@ function GridItem< Item >( {
 			}
 			aria-posinset={ posinset }
 		>
-			{ showMedia && renderedMediaField && (
+			{ shouldRenderMedia && (
 				<ItemClickWrapper
 					item={ item }
 					isItemClickable={ isItemClickable }
@@ -166,7 +167,7 @@ function GridItem< Item >( {
 					{ renderedMediaField }
 				</ItemClickWrapper>
 			) }
-			{ hasBulkActions && showMedia && renderedMediaField && (
+			{ hasBulkActions && shouldRenderMedia && (
 				<DataViewsSelectionCheckbox
 					item={ item }
 					selection={ selection }
@@ -176,24 +177,35 @@ function GridItem< Item >( {
 					disabled={ ! hasBulkAction }
 				/>
 			) }
-			<HStack
-				justify="space-between"
-				className="dataviews-view-grid__title-actions"
-			>
-				<ItemClickWrapper
-					item={ item }
-					isItemClickable={ isItemClickable }
-					onClickItem={ onClickItem }
-					renderItemLink={ renderItemLink }
-					className="dataviews-view-grid__title-field dataviews-title-field"
-					{ ...titleA11yProps }
-				>
-					{ renderedTitleField }
-				</ItemClickWrapper>
-				{ !! actions?.length && (
+			{ ! showTitle && shouldRenderMedia && !! actions?.length && (
+				<div className="dataviews-view-grid__media-actions">
 					<ItemActions item={ item } actions={ actions } isCompact />
-				) }
-			</HStack>
+				</div>
+			) }
+			{ showTitle && (
+				<HStack
+					justify="space-between"
+					className="dataviews-view-grid__title-actions"
+				>
+					<ItemClickWrapper
+						item={ item }
+						isItemClickable={ isItemClickable }
+						onClickItem={ onClickItem }
+						renderItemLink={ renderItemLink }
+						className="dataviews-view-grid__title-field dataviews-title-field"
+						{ ...titleA11yProps }
+					>
+						{ renderedTitleField }
+					</ItemClickWrapper>
+					{ !! actions?.length && (
+						<ItemActions
+							item={ item }
+							actions={ actions }
+							isCompact
+						/>
+					) }
+				</HStack>
+			) }
 			<VStack spacing={ 1 }>
 				{ showDescription && descriptionField?.render && (
 					<descriptionField.render

package/src/dataviews-layouts/grid/style.scss

@@ -7,10 +7,10 @@
 	padding: 0 $grid-unit-60 $grid-unit-30;
 	container-type: inline-size;
 	/**
-	 * Breakpoints were adjusted from media queries breakpoints to account for
-	 * the sidebar width. This was done to match the existing styles we had.
+	 * Match the padding applied to other DataViews components at the same
+	 * max-width.
 	 */
-	@container (max-width: 480px) {
+	@container (max-width: 430px) {
 		padding-left: $grid-unit-30;
 		padding-right: $grid-unit-30;
 	}
@@ -139,9 +139,15 @@
 	top: -9999em;
 	left: $grid-unit-10;
 	z-index: z-index(".dataviews-view-grid__card .dataviews-selection-checkbox");
+	opacity: 0;
+
+	@media not (prefers-reduced-motion) {
+		transition: opacity 0.1s linear;
+	}
 
 	@media (hover: none) {
 		// Show checkboxes on devices that do not support hover.
+		opacity: 1;
 		top: $grid-unit-10;
 	}
 }
@@ -149,9 +155,37 @@
 .dataviews-view-grid__card:hover .dataviews-selection-checkbox,
 .dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
 .dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
+	opacity: 1;
 	top: $grid-unit-10;
 }
 
+.dataviews-view-grid__card .dataviews-view-grid__media-actions {
+	position: absolute;
+	top: $grid-unit-05;
+	opacity: 0;
+	right: $grid-unit-05;
+
+	.dataviews-all-actions-button {
+		background-color: $white;
+	}
+
+	@media not (prefers-reduced-motion) {
+		transition: opacity 0.1s linear;
+	}
+
+	@media (hover: none) {
+		// Show actions on devices that do not support hover.
+		opacity: 1;
+		top: $grid-unit-05;
+	}
+}
+
+.dataviews-view-grid__card:hover .dataviews-view-grid__media-actions,
+.dataviews-view-grid__card:focus-within .dataviews-view-grid__media-actions,
+.dataviews-view-grid__card .dataviews-view-grid__media-actions:has(.dataviews-all-actions-button[aria-expanded="true"]) {
+	opacity: 1;
+}
+
 .dataviews-view-grid__media--clickable {
 	cursor: pointer;
 }
@@ -162,4 +196,10 @@
 	color: $gray-900;
 	margin: 0 0 $grid-unit-10 0;
 	padding: 0 $grid-unit-60;
+	container-type: inline-size;
+
+	@container (max-width: 430px) {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
 }