@wordpress/dataviews 10.1.5 → 10.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "10.1.5",
+	"version": "10.3.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.4",
-		"@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.11.0",
+		"@wordpress/components": "^30.8.0",
+		"@wordpress/compose": "^7.35.0",
+		"@wordpress/data": "^10.35.0",
+		"@wordpress/date": "^5.35.0",
+		"@wordpress/element": "^6.35.0",
+		"@wordpress/i18n": "^6.8.0",
+		"@wordpress/icons": "^11.2.0",
+		"@wordpress/keycodes": "^4.35.0",
+		"@wordpress/primitives": "^4.35.0",
+		"@wordpress/private-apis": "^1.35.0",
+		"@wordpress/url": "^4.35.0",
+		"@wordpress/warning": "^3.35.0",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -74,5 +74,5 @@
 	"scripts": {
 		"build:wp": "node build"
 	},
-	"gitHead": "e821b2ec0a90d60aa7cafc248ba049f13b4265b7"
+	"gitHead": "77aa1f194edceafe8ac2a1b9438bf84b557e76e3"
 }

package/src/components/dataform/index.tsx

@@ -10,6 +10,7 @@ import type { DataFormProps } from '../../types';
 import { DataFormProvider } from '../dataform-context';
 import normalizeFields from '../../utils/normalize-fields';
 import { DataFormLayout } from '../../dataform-layouts/data-form-layout';
+import normalizeForm from '../../dataform-layouts/normalize-form';
 
 export default function DataForm< Item >( {
 	data,
@@ -18,6 +19,7 @@ export default function DataForm< Item >( {
 	onChange,
 	validity,
 }: DataFormProps< Item > ) {
+	const normalizedForm = useMemo( () => normalizeForm( form ), [ form ] );
 	const normalizedFields = useMemo(
 		() => normalizeFields( fields ),
 		[ fields ]
@@ -31,7 +33,7 @@ export default function DataForm< Item >( {
 		<DataFormProvider fields={ normalizedFields }>
 			<DataFormLayout
 				data={ data }
-				form={ form }
+				form={ normalizedForm }
 				onChange={ onChange }
 				validity={ validity }
 			/>

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

@@ -62,6 +62,7 @@ import type {
 	View,
 } from '../../types';
 import useElements from '../../hooks/use-elements';
+import parseDateTime from '../../field-types/utils/parse-date-time';
 
 interface FilterTextProps {
 	activeElements: Option[];
@@ -494,10 +495,24 @@ export default function Filter( {
 			return filterInView?.value?.includes( element.value );
 		} );
 	} else if ( filterInView?.value !== undefined ) {
+		const field = fields.find( ( f ) => f.id === filter.field );
+		let label = filterInView.value;
+
+		if ( field?.type === 'datetime' && typeof label === 'string' ) {
+			try {
+				const dateValue = parseDateTime( label );
+				if ( dateValue !== null ) {
+					label = dateValue.toLocaleString();
+				}
+			} catch ( e ) {
+				label = filterInView.value;
+			}
+		}
+
 		activeElements = [
 			{
 				value: filterInView.value,
-				label: filterInView.value,
+				label,
 			},
 		];
 	}

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-item-actions/index.tsx

@@ -132,22 +132,45 @@ export function ActionsMenuGroup< Item >( {
 	registry,
 	setActiveModalAction,
 }: ActionsMenuGroupProps< Item > ) {
+	const { primaryActions, regularActions } = useMemo( () => {
+		return actions.reduce(
+			( acc, action ) => {
+				( action.isPrimary
+					? acc.primaryActions
+					: acc.regularActions
+				).push( action );
+				return acc;
+			},
+			{
+				primaryActions: [] as Action< Item >[],
+				regularActions: [] as Action< Item >[],
+			}
+		);
+	}, [ actions ] );
+
+	const renderActionGroup = ( actionList: Action< Item >[] ) =>
+		actionList.map( ( action ) => (
+			<MenuItemTrigger
+				key={ action.id }
+				action={ action }
+				onClick={ () => {
+					if ( 'RenderModal' in action ) {
+						setActiveModalAction( action );
+						return;
+					}
+					action.callback( [ item ], { registry } );
+				} }
+				items={ [ item ] }
+			/>
+		) );
+
 	return (
 		<Menu.Group>
-			{ actions.map( ( action ) => (
-				<MenuItemTrigger
-					key={ action.id }
-					action={ action }
-					onClick={ () => {
-						if ( 'RenderModal' in action ) {
-							setActiveModalAction( action );
-							return;
-						}
-						action.callback( [ item ], { registry } );
-					} }
-					items={ [ item ] }
-				/>
-			) ) }
+			{ renderActionGroup( primaryActions ) }
+			{ primaryActions.length > 0 && regularActions.length > 0 && (
+				<Menu.Separator />
+			) }
+			{ renderActionGroup( regularActions ) }
 		</Menu.Group>
 	);
 }

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