@wordpress/dataviews 15.0.0 → 16.0.1

package/src/components/dataviews-layouts/picker-activity/style.scss

@@ -0,0 +1,227 @@
+.dataviews-view-picker-activity {
+	margin: 0;
+	padding: 0;
+	// Fill the wrapper height so the footer sits at the bottom.
+	flex-grow: 1;
+
+	&:focus-visible {
+		&[aria-activedescendant] {
+			outline: none;
+		}
+
+		.dataviews-view-picker-activity__item[data-active-item="true"] {
+			outline: 2px solid var(--wpds-color-stroke-focus-brand);
+			outline-offset: -2px;
+		}
+	}
+
+	.dataviews-view-picker-activity__item {
+		cursor: var(--wpds-cursor-control);
+		border-radius: var(--wpds-border-radius-sm);
+		// Inset content to the toolbar/footer padding so the timeline aligns with the chrome.
+		padding-inline: var(--wpds-dimension-padding-2xl);
+		transition: background-color 0.1s ease;
+
+		// Selected and hovered rows share the same tint (like the table picker),
+		// keeping selection legible even for bullet-only items.
+		&.is-selected,
+		&:hover {
+			background-color: var(--wpds-color-bg-interactive-brand-weak-active);
+		}
+
+		// Selection outline only renders in Windows High Contrast mode.
+		&.is-selected {
+			outline: 3px solid transparent;
+			outline-offset: -2px;
+		}
+
+		&.is-compact {
+			.dataviews-view-picker-activity__item-type {
+				width: var(--wpds-dimension-padding-md);
+
+				&::before {
+					height: calc(var(--wpds-dimension-base) * 3);
+				}
+			}
+			.dataviews-view-picker-activity__item-type-icon {
+				width: calc(var(--wpds-dimension-base) * 3 - 1px);
+				height: calc(var(--wpds-dimension-base) * 3 - 1px);
+			}
+			.dataviews-view-picker-activity__item-content {
+				margin: var(--wpds-dimension-gap-md) 0;
+			}
+		}
+
+		&.is-balanced {
+			.dataviews-view-picker-activity__item-type {
+				width: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+
+				&::before {
+					height: calc(var(--wpds-dimension-base) * 3);
+				}
+			}
+			.dataviews-view-picker-activity__item-type-icon {
+				width: calc(var(--wpds-dimension-base) * 6 + 1px);
+				height: calc(var(--wpds-dimension-base) * 6 + 1px);
+			}
+			.dataviews-view-picker-activity__item-content {
+				margin: var(--wpds-dimension-gap-md) 0;
+				padding-top: var(--wpds-dimension-padding-sm);
+			}
+		}
+
+		&.is-comfortable {
+			.dataviews-view-picker-activity__item-type {
+				width: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+
+				&::before {
+					height: calc(var(--wpds-dimension-base) * 2);
+				}
+			}
+			.dataviews-view-picker-activity__item-type-icon {
+				width: calc(var(--wpds-dimension-base) * 8 + 1px);
+				height: calc(var(--wpds-dimension-base) * 8 + 1px);
+			}
+			.dataviews-view-picker-activity__item-content {
+				margin: var(--wpds-dimension-gap-sm) 0 var(--wpds-dimension-gap-lg);
+				padding-top: var(--wpds-dimension-padding-md);
+			}
+		}
+
+		&.is-comfortable,
+		&.is-balanced {
+			.dataviews-view-picker-activity__item-bullet {
+				width: calc(var(--wpds-dimension-base) * 2 + 1px);
+				height: calc(var(--wpds-dimension-base) * 2 + 1px);
+				position: relative;
+				top: 50%;
+				transform: translateY(-50%);
+			}
+		}
+	}
+
+	.dataviews-view-picker-activity__item-content {
+		flex-grow: 1;
+
+		.dataviews-view-picker-activity__item-title,
+		.dataviews-view-picker-activity__item-description,
+		.dataviews-view-picker-activity__item-fields {
+			min-height: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
+		}
+
+		.dataviews-view-picker-activity__item-title {
+			position: relative;
+			display: flex;
+			align-items: center;
+			flex: 1;
+			overflow: hidden;
+		}
+
+		.dataviews-view-picker-activity__item-description {
+			&:empty {
+				display: none;
+			}
+		}
+
+		.dataviews-view-picker-activity__item-fields {
+			color: var(--wpds-color-fg-content-neutral-weak);
+			display: flex;
+			gap: var(--wpds-dimension-gap-md);
+			row-gap: var(--wpds-dimension-gap-xs);
+			flex-wrap: wrap;
+
+			&:empty {
+				display: none;
+			}
+
+			.dataviews-view-picker-activity__item-field {
+				&:has(.dataviews-view-picker-activity__item-field-value:empty) {
+					display: none;
+				}
+			}
+
+			.dataviews-view-picker-activity__item-field-value {
+				display: flex;
+				align-items: center;
+			}
+		}
+	}
+
+	// Timeline connector line
+	.dataviews-view-picker-activity__item-type {
+		align-self: stretch;
+		flex-shrink: 0;
+
+		&::after {
+			content: "";
+			flex: 1 1 auto;
+			width: 1px;
+			margin: 0 auto;
+			background-color: var(--wpds-color-stroke-surface-neutral);
+		}
+
+		&::before {
+			content: "";
+			flex: 0 0 auto;
+			width: 1px;
+			margin: 0 auto;
+			background-color: var(--wpds-color-stroke-surface-neutral);
+		}
+	}
+
+	// First and last item timeline lines
+	.dataviews-view-picker-activity__item:first-child {
+		.dataviews-view-picker-activity__item-type {
+			&::before {
+				visibility: hidden;
+			}
+		}
+	}
+
+	.dataviews-view-picker-activity-group:last-of-type > .dataviews-view-picker-activity__item:last-of-type,
+	& > .dataviews-view-picker-activity__item:last-child {
+		.dataviews-view-picker-activity__item-type {
+			&::after {
+				background: linear-gradient(to bottom, var(--wpds-color-stroke-surface-neutral) 0%, color-mix(in srgb, var(--wpds-color-stroke-surface-neutral) 20%, transparent) 60%, transparent 100%);
+			}
+		}
+	}
+
+	.dataviews-view-picker-activity-group__header {
+		font-size: var(--wpds-typography-font-size-lg);
+		font-weight: var(--wpds-typography-font-weight-medium);
+		color: var(--wpds-color-fg-content-neutral-weak);
+		margin: 0 0 var(--wpds-dimension-gap-sm) 0;
+		padding: 0;
+		padding-inline-start: var(--wpds-dimension-padding-2xl);
+	}
+
+	// Bullet/icon styling
+	.dataviews-view-picker-activity__item-type-icon {
+		overflow: hidden;
+		flex-shrink: 0;
+		// Transparent so the row tint shows through the corners around the round media.
+		background-color: transparent;
+
+		img,
+		svg,
+		.dataviews-view-picker-activity__item-bullet {
+			display: block;
+			width: 100%;
+			height: 100%;
+			margin: 0 auto;
+			object-fit: cover;
+			border-radius: 50%;
+			box-sizing: border-box;
+			box-shadow: inset 0 0 0 var(--wpds-border-width-xs) var(--wpds-color-stroke-surface-neutral);
+		}
+
+		svg {
+			padding: var(--wpds-dimension-padding-xs);
+		}
+
+		.dataviews-view-picker-activity__item-bullet {
+			background-color: var(--wpds-color-stroke-surface-neutral);
+		}
+	}
+}

package/src/components/dataviews-layouts/table/use-scroll-state.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { RefObject } from 'react';
+import type { MutableRefObject } from 'react';
 
 /**
  * WordPress dependencies
@@ -30,16 +30,16 @@ const isScrolledToEnd = ( element: Element ) => {
  *
  * See https://github.com/Automattic/wp-calypso/pull/103005#discussion_r2077567912.
  *
- * @param params                           The parameters for the hook.
- * @param params.scrollContainerRef        The ref to the scroll container element.
- * @param [params.enabledHorizontal=false] Whether to track horizontal scroll end.
- * @return  The scroll state.
+ * @param {Object}                                  params                           The parameters for the hook.
+ * @param {MutableRefObject<HTMLDivElement | null>} params.scrollContainerRef        The ref to the scroll container element.
+ * @param {boolean}                                 [params.enabledHorizontal=false] Whether to track horizontal scroll end.
+ * @return {{ isHorizontalScrollEnd: boolean, isVerticallyScrolled: boolean }} The scroll state.
  */
 export function useScrollState( {
 	scrollContainerRef,
 	enabledHorizontal = false,
 }: {
-	scrollContainerRef: RefObject< HTMLDivElement | null >;
+	scrollContainerRef: React.MutableRefObject< HTMLDivElement | null >;
 	enabledHorizontal?: boolean;
 } ): { isHorizontalScrollEnd: boolean; isVerticallyScrolled: boolean } {
 	const [ isHorizontalScrollEnd, setIsHorizontalScrollEnd ] =

package/src/components/dataviews-layouts/utils/item-click-wrapper.tsx

@@ -86,9 +86,7 @@ export function ItemClickWrapper< Item >( {
 			className: `${ className } ${ className }--clickable`,
 			...extraProps,
 			children,
-		} ) as ReactElement<
-			Pick< React.DOMAttributes< Element >, 'onClick' | 'onKeyDown' >
-		>;
+		} );
 
 		// Clone the element and enhance onClick to stop propagation
 		return cloneElement( renderedElement, {

package/src/components/dataviews-view-config/index.tsx

@@ -85,6 +85,7 @@ export function ViewTypeMenu() {
 									case 'table':
 									case 'pickerGrid':
 									case 'pickerTable':
+									case 'pickerActivity':
 									case 'activity':
 										const viewWithoutLayout = { ...view };
 										if ( 'layout' in viewWithoutLayout ) {

package/src/constants.ts

@@ -54,5 +54,6 @@ export const LAYOUT_ACTIVITY = 'activity';
 // Picker view layouts.
 export const LAYOUT_PICKER_GRID = 'pickerGrid';
 export const LAYOUT_PICKER_TABLE = 'pickerTable';
+export const LAYOUT_PICKER_ACTIVITY = 'pickerActivity';
 
 export const DAYS_OF_WEEK: DayNumber[] = [ 0, 1, 2, 3, 4, 5, 6 ];

package/src/dataform/stories/content.story.tsx

@@ -18,7 +18,7 @@ const meta: Meta< typeof DataForm > = {
 	parameters: {
 		controls: { disable: true },
 	},
-	tags: [ '!dev' /* Hide individual story pages from sidebar */ ],
+	tags: [ '!dev' /* Hide individual story pages from sidebar */, 'manifest' ],
 };
 export default meta;
 

package/src/dataform/stories/index.story.tsx

@@ -13,6 +13,7 @@ import ValidationComponent from './validation';
 import VisibilityComponent from './visibility';
 
 const meta = {
+	tags: [ 'manifest' ],
 	title: 'DataViews/DataForm',
 	component: DataForm,
 };

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

@@ -21,6 +21,7 @@ import EmptyComponent from './empty';
 import './style.css';
 
 const meta = {
+	tags: [ 'manifest' ],
 	title: 'DataViews/DataViews',
 	component: DataViews,
 	args: {

package/src/dataviews-picker/stories/index.story.tsx

@@ -20,6 +20,7 @@ import type { ActionButton, View } from '../../types';
 import { data, fields, type SpaceObject } from './fixtures';
 
 const meta = {
+	tags: [ 'manifest' ],
 	title: 'DataViews/DataViewsPicker',
 	component: DataViewsPicker,
 } as Meta< typeof DataViewsPicker >;
@@ -186,6 +187,11 @@ const DataViewsPickerContent = ( {
 				fields={ fields }
 				onChangeView={ setView }
 				config={ { perPageSizes } }
+				defaultLayouts={ {
+					pickerGrid: true,
+					pickerTable: true,
+					pickerActivity: true,
+				} }
 				itemListLabel="Galactic Bodies"
 			/>
 		</>

package/src/dataviews-picker/test/dataviews-picker.tsx

@@ -543,6 +543,11 @@ describe( 'DataViews Picker', () => {
 				screen.getByRole( 'menuitemradio', { name: 'Table' } )
 			).toBeInTheDocument();
 
+			// The Activity layout is opt-in and must not appear by default.
+			expect(
+				screen.queryByRole( 'menuitemradio', { name: 'Activity' } )
+			).not.toBeInTheDocument();
+
 			// The grid layout is active by default.
 			expect(
 				screen.getByRole( 'menuitemradio', { name: 'Grid' } )

package/src/hooks/use-form-validity.ts

@@ -392,8 +392,8 @@ function handleCustomValidationAsync< Item >(
 }
 
 type PromiseHandler< Item > = {
-	customCounterRef: React.RefObject< Record< string, number > >;
-	elementsCounterRef: React.RefObject< Record< string, number > >;
+	customCounterRef: React.MutableRefObject< Record< string, number > >;
+	elementsCounterRef: React.MutableRefObject< Record< string, number > >;
 	setFormValidity: React.Dispatch< React.SetStateAction< FormValidity > >;
 	path: string[];
 	item: Item;

package/src/style.scss

@@ -13,6 +13,7 @@
 @use "./components/dataviews-layouts/picker-grid/style.scss" as *;
 @use "./components/dataviews-layouts/picker-table/style.scss" as *;
 @use "./components/dataviews-layouts/activity/style.scss" as *;
+@use "./components/dataviews-layouts/picker-activity/style.scss" as *;
 @use "./components/dataviews-picker-footer/style.scss" as *;
 
 @use "./components/dataform-controls/style.scss" as *;

package/src/types/dataviews.ts

@@ -342,12 +342,24 @@ export interface ViewPickerTable extends ViewBase {
 	};
 }
 
+export interface ViewPickerActivity extends ViewBase {
+	type: 'pickerActivity';
+
+	layout?: {
+		/**
+		 * The density of the view.
+		 */
+		density?: Density;
+	};
+}
+
 export type View =
 	| ViewList
 	| ViewGrid
 	| ViewTable
 	| ViewPickerGrid
 	| ViewPickerTable
+	| ViewPickerActivity
 	| ViewActivity;
 
 interface ActionBase< Item > {
@@ -516,6 +528,11 @@ export interface ViewPickerTableProps< Item >
 	view: ViewPickerTable;
 }
 
+export interface ViewPickerActivityProps< Item >
+	extends Omit< ViewPickerBaseProps< Item >, 'view' > {
+	view: ViewPickerActivity;
+}
+
 export type ViewProps< Item > =
 	| ViewTableProps< Item >
 	| ViewGridProps< Item >
@@ -524,7 +541,8 @@ export type ViewProps< Item > =
 
 export type ViewPickerProps< Item > =
 	| ViewPickerGridProps< Item >
-	| ViewPickerTableProps< Item >;
+	| ViewPickerTableProps< Item >
+	| ViewPickerActivityProps< Item >;
 
 export interface SupportedLayouts {
 	list?: Omit< ViewList, 'type' > | true;
@@ -533,6 +551,7 @@ export interface SupportedLayouts {
 	activity?: Omit< ViewActivity, 'type' > | true;
 	pickerGrid?: Omit< ViewPickerGrid, 'type' > | true;
 	pickerTable?: Omit< ViewPickerTable, 'type' > | true;
+	pickerActivity?: Omit< ViewPickerActivity, 'type' > | true;
 }
 
 export interface NormalizedSupportedLayouts {
@@ -542,4 +561,5 @@ export interface NormalizedSupportedLayouts {
 	activity?: Omit< ViewActivity, 'type' >;
 	pickerGrid?: Omit< ViewPickerGrid, 'type' >;
 	pickerTable?: Omit< ViewPickerTable, 'type' >;
+	pickerActivity?: Omit< ViewPickerActivity, 'type' >;
 }