@wordpress/dataviews 10.1.1 → 10.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "10.1.1",
+	"version": "10.2.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,19 +44,19 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@ariakit/react": "^0.4.15",
-		"@wordpress/base-styles": "^6.9.1",
-		"@wordpress/components": "^30.6.1",
-		"@wordpress/compose": "^7.33.1",
-		"@wordpress/data": "^10.33.1",
-		"@wordpress/date": "^5.33.1",
-		"@wordpress/element": "^6.33.1",
-		"@wordpress/i18n": "^6.6.1",
-		"@wordpress/icons": "^11.0.1",
-		"@wordpress/keycodes": "^4.33.1",
-		"@wordpress/primitives": "^4.33.1",
-		"@wordpress/private-apis": "^1.33.1",
-		"@wordpress/url": "^4.33.1",
-		"@wordpress/warning": "^3.33.1",
+		"@wordpress/base-styles": "^6.10.0",
+		"@wordpress/components": "^30.7.0",
+		"@wordpress/compose": "^7.34.0",
+		"@wordpress/data": "^10.34.0",
+		"@wordpress/date": "^5.34.0",
+		"@wordpress/element": "^6.34.0",
+		"@wordpress/i18n": "^6.7.0",
+		"@wordpress/icons": "^11.1.0",
+		"@wordpress/keycodes": "^4.34.0",
+		"@wordpress/primitives": "^4.34.0",
+		"@wordpress/private-apis": "^1.34.0",
+		"@wordpress/url": "^4.34.0",
+		"@wordpress/warning": "^3.34.0",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -74,5 +74,5 @@
 	"scripts": {
 		"build:wp": "node build"
 	},
-	"gitHead": "5f84bafdec1bed05247c1080c12f6a237951b862"
+	"gitHead": "ceebff807958d2e8fc755b5a20473939c78b4d1d"
 }

package/src/components/dataviews/style.scss

@@ -61,7 +61,7 @@
 
 .dataviews-title-field {
 	font-size: $default-font-size;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 	color: $gray-800;
 	text-overflow: ellipsis;
 	white-space: nowrap;

package/src/components/dataviews-bulk-actions/index.tsx

@@ -15,6 +15,7 @@ import { __, sprintf, _n } from '@wordpress/i18n';
 import { useMemo, useState, useRef, useContext } from '@wordpress/element';
 import { useRegistry } from '@wordpress/data';
 import { closeSmall } from '@wordpress/icons';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -165,6 +166,22 @@ function ActionTrigger< Item >( {
 }: ActionTriggerProps< Item > ) {
 	const label =
 		typeof action.label === 'string' ? action.label : action.label( items );
+	const isMobile = useViewportMatch( 'medium', '<' );
+
+	if ( isMobile ) {
+		return (
+			<Button
+				disabled={ isBusy }
+				accessibleWhenDisabled
+				label={ label }
+				icon={ action.icon }
+				size="compact"
+				onClick={ onClick }
+				isBusy={ isBusy }
+			/>
+		);
+	}
+
 	return (
 		<Button
 			disabled={ isBusy }
@@ -308,6 +325,7 @@ function FooterContent< Item >( {
 		null
 	);
 	const footerContentRef = useRef< JSX.Element | null >( null );
+	const isMobile = useViewportMatch( 'medium', '<' );
 
 	const bulkActions = useMemo(
 		() => actions.filter( ( action ) => action.supportsBulk ),
@@ -334,13 +352,14 @@ function FooterContent< Item >( {
 			actions.filter( ( action ) => {
 				return (
 					action.supportsBulk &&
+					( ! isMobile || action.icon ) &&
 					selectedItems.some(
 						( item ) =>
 							! action.isEligible || action.isEligible( item )
 					)
 				);
 			} ),
-		[ actions, selectedItems ]
+		[ actions, selectedItems, isMobile ]
 	);
 	if ( ! actionInProgress ) {
 		if ( footerContentRef.current ) {

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

@@ -4,7 +4,7 @@
 
 .dataviews-bulk-actions-footer__item-count {
 	color: $gray-900;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 	font-size: 11px;
 	text-transform: uppercase;
 }

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

@@ -119,7 +119,7 @@
 		}
 
 		.dataviews-filters-__summary-filter-text-name {
-			font-weight: 500;
+			font-weight: $font-weight-medium;
 		}
 	}
 

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

@@ -3,13 +3,13 @@
 
 .dataviews-pagination__page-select {
 	font-size: 11px;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 	text-transform: uppercase;
 
 	@include break-small() {
 		.components-select-control__input {
 			font-size: 11px !important;
-			font-weight: 500;
+			font-weight: $font-weight-medium;
 		}
 	}
 }

package/src/dataform-controls/password.tsx

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import {
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+	Button,
+} from '@wordpress/components';
 import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { seen, unseen } from '@wordpress/icons';
@@ -34,17 +37,18 @@ export default function Password< Item >( {
 				validity,
 				type: isVisible ? 'text' : 'password',
 				suffix: (
-					<Button
-						icon={ isVisible ? unseen : seen }
-						onClick={ toggleVisibility }
-						size="small"
-						variant="tertiary"
-						aria-label={
-							isVisible
-								? __( 'Hide password' )
-								: __( 'Show password' )
-						}
-					/>
+					<InputControlSuffixWrapper variant="control">
+						<Button
+							icon={ isVisible ? unseen : seen }
+							onClick={ toggleVisibility }
+							size="small"
+							label={
+								isVisible
+									? __( 'Hide password' )
+									: __( 'Show password' )
+							}
+						/>
+					</InputControlSuffixWrapper>
 				),
 			} }
 		/>

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

@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { Button, Card, CardBody, CardHeader } from '@wordpress/components';
+import {
+	Button,
+	Card,
+	CardBody,
+	CardHeader as OriginalCardHeader,
+} from '@wordpress/components';
 import { useCallback, useContext, useMemo, useState } from '@wordpress/element';
 import { chevronDown, chevronUp } from '@wordpress/icons';
 
@@ -23,8 +28,30 @@ import { isCombinedField } from '../is-combined-field';
 import { DEFAULT_LAYOUT, normalizeLayout } from '../normalize-form-fields';
 import { getSummaryFields } from '../get-summary-fields';
 
-export function useCollapsibleCard( initialIsOpen: boolean = true ) {
-	const [ isOpen, setIsOpen ] = useState( initialIsOpen );
+const NonCollapsibleCardHeader = ( {
+	children,
+	...props
+}: {
+	children: React.ReactNode;
+} ) => (
+	<OriginalCardHeader { ...props }>
+		<div
+			style={ {
+				height: '40px', // This is to match the chevron's __next40pxDefaultSize
+				width: '100%',
+				display: 'flex',
+				justifyContent: 'space-between',
+				alignItems: 'center',
+			} }
+		>
+			{ children }
+		</div>
+	</OriginalCardHeader>
+);
+
+export function useCardHeader( layout: NormalizedCardLayout ) {
+	const { isOpened, isCollapsible } = layout;
+	const [ isOpen, setIsOpen ] = useState( isOpened );
 
 	const toggle = useCallback( () => {
 		setIsOpen( ( prev ) => ! prev );
@@ -38,7 +65,7 @@ export function useCollapsibleCard( initialIsOpen: boolean = true ) {
 			children: React.ReactNode;
 			[ key: string ]: any;
 		} ) => (
-			<CardHeader
+			<OriginalCardHeader
 				{ ...props }
 				onClick={ toggle }
 				style={ {
@@ -63,12 +90,17 @@ export function useCollapsibleCard( initialIsOpen: boolean = true ) {
 					aria-expanded={ isOpen }
 					aria-label={ isOpen ? 'Collapse' : 'Expand' }
 				/>
-			</CardHeader>
+			</OriginalCardHeader>
 		),
 		[ toggle, isOpen ]
 	);
 
-	return { isOpen, CollapsibleCardHeader };
+	const effectiveIsOpen = isCollapsible ? isOpen : true;
+	const CardHeaderComponent = isCollapsible
+		? CollapsibleCardHeader
+		: NonCollapsibleCardHeader;
+
+	return { isOpen: effectiveIsOpen, CardHeader: CardHeaderComponent };
 }
 
 function isSummaryFieldVisible< Item >(
@@ -144,9 +176,7 @@ export default function FormCardField< Item >( {
 		[ field ]
 	);
 
-	const { isOpen, CollapsibleCardHeader } = useCollapsibleCard(
-		layout.isOpened
-	);
+	const { isOpen, CardHeader } = useCardHeader( layout );
 
 	const summaryFields = getSummaryFields< Item >( layout.summary, fields );
 
@@ -156,10 +186,11 @@ export default function FormCardField< Item >( {
 
 	if ( isCombinedField( field ) ) {
 		const withHeader = !! field.label && layout.withHeader;
+
 		return (
 			<Card className="dataforms-layouts-card__field">
 				{ withHeader && (
-					<CollapsibleCardHeader className="dataforms-layouts-card__field-header">
+					<CardHeader className="dataforms-layouts-card__field-header">
 						<span className="dataforms-layouts-card__field-header-label">
 							{ field.label }
 						</span>
@@ -177,7 +208,7 @@ export default function FormCardField< Item >( {
 									) }
 								</div>
 							) }
-					</CollapsibleCardHeader>
+					</CardHeader>
 				) }
 				{ ( isOpen || ! withHeader ) && (
 					// If it doesn't have a header, keep it open.
@@ -213,10 +244,11 @@ export default function FormCardField< Item >( {
 		return null;
 	}
 	const withHeader = !! fieldDefinition.label && layout.withHeader;
+
 	return (
 		<Card className="dataforms-layouts-card__field">
 			{ withHeader && (
-				<CollapsibleCardHeader className="dataforms-layouts-card__field-header">
+				<CardHeader className="dataforms-layouts-card__field-header">
 					<span className="dataforms-layouts-card__field-header-label">
 						{ fieldDefinition.label }
 					</span>
@@ -231,7 +263,7 @@ export default function FormCardField< Item >( {
 							) ) }
 						</div>
 					) }
-				</CollapsibleCardHeader>
+				</CardHeader>
 			) }
 			{ ( isOpen || ! withHeader ) && (
 				// If it doesn't have a header, keep it open.

package/src/dataform-layouts/normalize-form-fields.ts

@@ -72,6 +72,7 @@ export function normalizeLayout( layout?: Layout ): NormalizedLayout {
 				withHeader: false,
 				isOpened: true,
 				summary: [],
+				isCollapsible: false,
 			} satisfies NormalizedCardLayout;
 		} else {
 			const summary = layout.summary ?? [];
@@ -84,6 +85,10 @@ export function normalizeLayout( layout?: Layout ): NormalizedLayout {
 						? layout.isOpened
 						: true,
 				summary: normalizeCardSummaryField( summary ),
+				isCollapsible:
+					layout.isCollapsible === undefined
+						? true
+						: layout.isCollapsible,
 			} satisfies NormalizedCardLayout;
 		}
 	} else if ( layout?.type === 'row' ) {

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

@@ -157,7 +157,7 @@
 			padding-left: $grid-unit-15;
 			font-size: 11px;
 			text-transform: uppercase;
-			font-weight: 500;
+			font-weight: $font-weight-medium;
 
 			&:has(.dataviews-view-table-header-button):not(:first-child) {
 				padding-left: $grid-unit-05;
@@ -190,7 +190,7 @@
 		padding: $grid-unit-05 $grid-unit-10;
 		font-size: 11px;
 		text-transform: uppercase;
-		font-weight: 500;
+		font-weight: $font-weight-medium;
 
 		&:not(:hover) {
 			color: $gray-900;

package/src/stories/dataform.story.tsx

@@ -1252,7 +1252,13 @@ const VisibilityComponent = () => {
 	);
 };
 
-const LayoutCardComponent = ( { withHeader }: { withHeader: boolean } ) => {
+const LayoutCardComponent = ( {
+	withHeader,
+	isCollapsible,
+}: {
+	withHeader: boolean;
+	isCollapsible: boolean;
+} ) => {
 	type Customer = {
 		name: string;
 		email: string;
@@ -1383,7 +1389,11 @@ const LayoutCardComponent = ( { withHeader }: { withHeader: boolean } ) => {
 			fields: [
 				{
 					id: 'customerCard',
-					layout: { type: 'card', summary: 'plan-summary' },
+					layout: {
+						type: 'card',
+						summary: 'plan-summary',
+						isCollapsible,
+					},
 					label: 'Customer',
 					description:
 						'Enter your contact details, plan type, and addresses to complete your customer information.',
@@ -1448,12 +1458,13 @@ const LayoutCardComponent = ( { withHeader }: { withHeader: boolean } ) => {
 						type: 'card',
 						isOpened: false,
 						summary: [ { id: 'dueDate', visibility: 'always' } ],
+						isCollapsible,
 					},
 					children: [ 'vat', 'commission' ],
 				},
 			],
 		} ),
-		[ withHeader ]
+		[ withHeader, isCollapsible ]
 	);
 
 	return (
@@ -1860,9 +1871,14 @@ export const LayoutCard = {
 			control: { type: 'boolean' },
 			description: 'Whether the card has a header.',
 		},
+		isCollapsible: {
+			control: { type: 'boolean' },
+			description: 'Whether the card can be collapsed/expanded.',
+		},
 	},
 	args: {
 		withHeader: true,
+		isCollapsible: true,
 	},
 };
 

package/src/test/normalize-form-fields.ts

@@ -161,6 +161,7 @@ describe( 'normalizeFormFields', () => {
 						withHeader: true,
 						isOpened: true,
 						summary: [],
+						isCollapsible: true,
 					},
 				},
 			] );
@@ -187,6 +188,7 @@ describe( 'normalizeFormFields', () => {
 						withHeader: false,
 						isOpened: true,
 						summary: [],
+						isCollapsible: false,
 					},
 				},
 			] );
@@ -211,6 +213,7 @@ describe( 'normalizeFormFields', () => {
 						withHeader: true,
 						isOpened: false,
 						summary: [ { id: 'field1', visibility: 'always' } ],
+						isCollapsible: true,
 					},
 				},
 			] );
@@ -226,6 +229,7 @@ describe( 'normalizeFormFields', () => {
 						'field2',
 						{ id: 'field1', visibility: 'always' },
 					],
+					isCollapsible: true,
 				},
 				fields: [ 'field1' ],
 			};
@@ -241,6 +245,7 @@ describe( 'normalizeFormFields', () => {
 							{ id: 'field2', visibility: 'when-collapsed' },
 							{ id: 'field1', visibility: 'always' },
 						],
+						isCollapsible: true,
 					},
 				},
 			] );
@@ -300,6 +305,7 @@ describe( 'normalizeFormFields', () => {
 						withHeader: false,
 						isOpened: true,
 						summary: [],
+						isCollapsible: false,
 					},
 				},
 				{
@@ -309,6 +315,7 @@ describe( 'normalizeFormFields', () => {
 						withHeader: true,
 						isOpened: false,
 						summary: [],
+						isCollapsible: true,
 					},
 				},
 			] );

package/src/types/dataform.ts

@@ -56,12 +56,15 @@ export type CardLayout =
 			// isOpened cannot be false if withHeader is false as well.
 			// Otherwise, the card would not be visible.
 			isOpened?: true;
+			// isCollapsible cannot be true if withHeader is false as well.
+			isCollapsible?: false;
 	  }
 	| {
 			type: 'card';
 			withHeader?: true | undefined;
 			isOpened?: boolean;
 			summary?: CardSummaryField;
+			isCollapsible?: boolean | undefined;
 	  };
 export type NormalizedCardLayout =
 	| {
@@ -72,12 +75,15 @@ export type NormalizedCardLayout =
 			isOpened: true;
 			// Summary is an empty array
 			summary: [];
+			// If no header, the card should not be collapsible.
+			isCollapsible: false;
 	  }
 	| {
 			type: 'card';
 			withHeader: true;
 			isOpened: boolean;
 			summary: NormalizedCardSummaryField;
+			isCollapsible: boolean;
 	  };
 
 export type RowLayout = {