@wordpress/dataviews 8.0.1-next.e256d081a.0 → 9.0.1-next.6870dfe5b.0

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

@@ -0,0 +1,171 @@
+
+@import "../utils/grid-items.scss";
+
+.dataviews-view-picker-grid {
+	.dataviews-view-picker-grid__card {
+		height: 100%;
+		justify-content: flex-start;
+		position: relative;
+
+		.dataviews-view-picker-grid__title-actions {
+			padding: $grid-unit-10 0 $grid-unit-05;
+		}
+
+		.dataviews-view-picker-grid__title-field {
+			min-height: $grid-unit-30; // Preserve layout when there is no ellipsis button
+			display: flex;
+			align-items: center;
+
+			&--clickable {
+				width: fit-content;
+			}
+		}
+
+
+		&.is-selected {
+			.dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
+				color: $gray-900;
+			}
+		}
+		&.is-selected .dataviews-view-picker-grid__media::after,
+		.dataviews-view-picker-grid__media:focus::after {
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+		}
+		&.is-selected .dataviews-view-picker-grid__media::after {
+			box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+		}
+		.dataviews-view-picker-grid__media:focus::after {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+	}
+
+	&:focus-visible {
+		// Only show one focus outline at a time. When focus is on a child element,
+		// hide the grid's own focus outline.
+		&[aria-activedescendant] {
+			outline: none;
+		}
+
+		[data-active-item="true"] {
+			outline: 2px solid var(--wp-admin-theme-color);
+		}
+	}
+
+	.dataviews-selection-checkbox {
+		// Always show the checkbox in picker mode.
+		top: $grid-unit-10 !important;
+
+		input {
+			// When the dataview is used as a picker, ensure the checkbox can't be clicked on.
+			// Only the item card itself is clickable.
+			pointer-events: none;
+		}
+	}
+
+	.dataviews-view-picker-grid__media {
+		width: 100%;
+		aspect-ratio: 1/1;
+		background-color: $white;
+		border-radius: $radius-medium;
+		position: relative;
+
+		img {
+			object-fit: cover;
+			width: 100%;
+			height: 100%;
+		}
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
+			border-radius: $grid-unit-05;
+			pointer-events: none;
+		}
+	}
+
+	.dataviews-view-picker-grid__fields {
+		position: relative;
+		font-size: 12px;
+		line-height: 16px;
+
+		&:not(:empty) {
+			padding: 0 0 $grid-unit-15;
+		}
+
+		.dataviews-view-picker-grid__field-value:not(:empty) {
+			min-height: $grid-unit-30;
+			line-height: $grid-unit-05 * 5;
+			padding-top: math.div($grid-unit-05, 2);
+		}
+
+		.dataviews-view-picker-grid__field {
+			min-height: $grid-unit-30;
+			align-items: center;
+
+			.dataviews-view-picker-grid__field-name {
+				width: 35%;
+				color: $gray-700;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			.dataviews-view-picker-grid__field-value {
+				width: 65%;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			&:not(:has(.dataviews-view-picker-grid__field-value:not(:empty))) {
+				display: none;
+			}
+		}
+	}
+
+	.dataviews-view-picker-grid__badge-fields {
+		&:not(:empty) {
+			padding-bottom: $grid-unit-15;
+		}
+	}
+}
+
+.dataviews-view-picker-grid__field-value:empty,
+.dataviews-view-picker-grid__field:empty {
+	display: none;
+}
+
+.dataviews-view-picker-grid__card .dataviews-selection-checkbox {
+	position: absolute;
+	top: -9999em;
+	left: $grid-unit-10;
+	z-index: z-index(".dataviews-view-grid__card .dataviews-selection-checkbox");
+
+	@media (hover: none) {
+		// Show checkboxes on devices that do not support hover.
+		top: $grid-unit-10;
+	}
+}
+
+.dataviews-view-picker-grid__card:hover .dataviews-selection-checkbox,
+.dataviews-view-picker-grid__card:focus-within .dataviews-selection-checkbox,
+.dataviews-view-picker-grid__card.is-selected .dataviews-selection-checkbox {
+	top: $grid-unit-10;
+}
+
+.dataviews-view-picker-grid__media--clickable {
+	cursor: pointer;
+}
+
+.dataviews-view-picker-grid-group__header {
+	font-size: $font-size-large;
+	font-weight: $font-weight-medium;
+	color: $gray-900;
+	margin: 0 0 $grid-unit-10 0;
+	padding: 0 $grid-unit-60;
+}

package/src/dataviews-layouts/utils/grid-items.scss

@@ -0,0 +1,21 @@
+.dataviews-view-grid-items {
+	margin-bottom: auto;
+	display: grid;
+	gap: $grid-unit-40;
+	grid-template-rows: max-content;
+	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+	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.
+		*/
+	@container (max-width: 430px) {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+
+	@media not (prefers-reduced-motion) {
+		transition: padding ease-out 0.1s;
+	}
+}

package/src/dataviews-layouts/utils/grid-items.tsx

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import type { ComponentPropsWithoutRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+export const GridItems = forwardRef<
+	HTMLDivElement,
+	{
+		className?: string;
+		previewSize: number | undefined;
+	} & ComponentPropsWithoutRef< 'div' >
+>( ( { className, previewSize, ...props }, ref ) => {
+	return (
+		<div
+			ref={ ref }
+			className={ clsx( 'dataviews-view-grid-items', className ) }
+			style={ {
+				gridTemplateColumns:
+					previewSize &&
+					`repeat(auto-fill, minmax(${ previewSize }px, 1fr))`,
+			} }
+			{ ...props }
+		/>
+	);
+} );

package/src/dataviews-layouts/utils/preview-size-picker.tsx

@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import { RangeControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../../components/dataviews-context';
+import type { ViewGrid } from '../../types';
+
+const imageSizes = [
+	{
+		value: 120,
+		breakpoint: 1,
+	},
+	{
+		value: 170,
+		breakpoint: 1,
+	},
+	{
+		value: 230,
+		breakpoint: 1,
+	},
+	{
+		value: 290,
+		breakpoint: 1112, // at minimum image width, 4 images display at this container size
+	},
+	{
+		value: 350,
+		breakpoint: 1636, // at minimum image width, 6 images display at this container size
+	},
+	{
+		value: 430,
+		breakpoint: 588, // at minimum image width, 2 images display at this container size
+	},
+];
+
+export default function PreviewSizePicker() {
+	const context = useContext( DataViewsContext );
+	const view = context.view as ViewGrid;
+
+	const breakValues = imageSizes.filter( ( size ) => {
+		return context.containerWidth >= size.breakpoint;
+	} );
+
+	const layoutPreviewSize = view.layout?.previewSize ?? 230; // Default to the third smallest size if no preview size is set.
+	// If the container has resized and the set preview size is no longer available,
+	// we reset it to the next smallest size, or the smallest available size.
+	const previewSizeToUse =
+		breakValues
+			.map( ( size, index ) => ( { ...size, index } ) )
+			.filter( ( size ) => size.value <= layoutPreviewSize )
+			.sort( ( a, b ) => b.value - a.value )[ 0 ]?.index ?? 0;
+
+	const marks = breakValues.map( ( size, index ) => {
+		return {
+			value: index,
+		};
+	} );
+
+	return (
+		<RangeControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			showTooltip={ false }
+			label={ __( 'Preview size' ) }
+			value={ previewSizeToUse }
+			min={ 0 }
+			max={ breakValues.length - 1 }
+			withInputField={ false }
+			onChange={ ( value = 0 ) => {
+				context.onChangeView( {
+					...view,
+					layout: {
+						...view.layout,
+						previewSize: breakValues[ value ].value,
+					},
+				} );
+			} }
+			step={ 1 }
+			marks={ marks }
+		/>
+	);
+}

package/src/field-types/boolean.tsx

@@ -48,7 +48,7 @@ export default {
 			return null;
 		},
 	},
-	Edit: 'boolean',
+	Edit: 'checkbox',
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
 		if ( field.elements ) {
 			return renderFromElements( { item, field } );

package/src/field-types/color.tsx

@@ -0,0 +1,115 @@
+/**
+ * External dependencies
+ */
+import { colord } from 'colord';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	DataViewRenderFieldProps,
+	SortDirection,
+	NormalizedField,
+	FieldTypeDefinition,
+} from '../types';
+import { renderFromElements } from '../utils';
+import {
+	OPERATOR_IS,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_NOT,
+} from '../constants';
+
+function sort( valueA: any, valueB: any, direction: SortDirection ) {
+	// Convert colors to HSL for better sorting
+	const colorA = colord( valueA );
+	const colorB = colord( valueB );
+
+	if ( ! colorA.isValid() && ! colorB.isValid() ) {
+		return 0;
+	}
+	if ( ! colorA.isValid() ) {
+		return direction === 'asc' ? 1 : -1;
+	}
+	if ( ! colorB.isValid() ) {
+		return direction === 'asc' ? -1 : 1;
+	}
+
+	// Sort by hue, then saturation, then lightness
+	const hslA = colorA.toHsl();
+	const hslB = colorB.toHsl();
+
+	if ( hslA.h !== hslB.h ) {
+		return direction === 'asc' ? hslA.h - hslB.h : hslB.h - hslA.h;
+	}
+	if ( hslA.s !== hslB.s ) {
+		return direction === 'asc' ? hslA.s - hslB.s : hslB.s - hslA.s;
+	}
+	return direction === 'asc' ? hslA.l - hslB.l : hslB.l - hslA.l;
+}
+
+export default {
+	sort,
+	isValid: {
+		custom: ( item: any, field: NormalizedField< any > ) => {
+			const value = field.getValue( { item } );
+
+			if (
+				! [ undefined, '', null ].includes( value ) &&
+				! colord( value ).isValid()
+			) {
+				return __( 'Value must be a valid color.' );
+			}
+
+			if ( field.elements ) {
+				const validValues = field.elements.map( ( f ) => f.value );
+				if ( ! validValues.includes( value ) ) {
+					return __( 'Value must be one of the elements.' );
+				}
+			}
+
+			return null;
+		},
+	},
+	Edit: 'color',
+	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
+		if ( field.elements ) {
+			return renderFromElements( { item, field } );
+		}
+
+		const value = field.getValue( { item } );
+
+		if ( ! value || ! colord( value ).isValid() ) {
+			return value;
+		}
+
+		// Render color with visual preview
+		return (
+			<div
+				style={ { display: 'flex', alignItems: 'center', gap: '8px' } }
+			>
+				<div
+					style={ {
+						width: '16px',
+						height: '16px',
+						borderRadius: '50%',
+						backgroundColor: value,
+						border: '1px solid #ddd',
+						flexShrink: 0,
+					} }
+				/>
+				<span>{ value }</span>
+			</div>
+		);
+	},
+	enableSorting: true,
+	filterBy: {
+		defaultOperators: [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ],
+		validOperators: [ OPERATOR_IS, OPERATOR_IS_NOT ],
+	},
+} satisfies FieldTypeDefinition< any >;

package/src/field-types/index.tsx

@@ -21,6 +21,9 @@ import { default as date } from './date';
 import { default as boolean } from './boolean';
 import { default as media } from './media';
 import { default as array } from './array';
+import { default as telephone } from './telephone';
+import { default as color } from './color';
+import { default as url } from './url';
 import { renderFromElements } from '../utils';
 import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../constants';
 
@@ -65,6 +68,18 @@ export default function getFieldTypeDefinition< Item >(
 		return array;
 	}
 
+	if ( 'telephone' === type ) {
+		return telephone;
+	}
+
+	if ( 'color' === type ) {
+		return color;
+	}
+
+	if ( 'url' === type ) {
+		return url;
+	}
+
 	// This is a fallback for fields that don't provide a type.
 	// It can be removed when the field.type is mandatory.
 	return {