@wordpress/widget-dashboard 0.2.0 → 0.3.0

package/src/components/layout-settings/index.ts

@@ -1 +0,0 @@
-export { LayoutSettings } from './layout-settings';

package/src/components/layout-settings/layout-model-edit-field/index.tsx

@@ -1,98 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import type { DataFormControlProps } from '@wordpress/dataviews';
-import { useCallback } from '@wordpress/element';
-/* eslint-disable @wordpress/use-recommended-components */
-import { Button, Fieldset, Stack, Text } from '@wordpress/ui';
-/* eslint-enable @wordpress/use-recommended-components */
-
-/**
- * Internal dependencies
- */
-import type { WidgetGridSettings } from '../../../types';
-import { GridThumbnail } from './thumbnail-grid';
-import { MasonryThumbnail } from './thumbnail-masonry';
-import styles from './style.module.css';
-
-interface ModelThumbnailProps {
-	model: string;
-	className?: string;
-}
-
-function ModelThumbnail( {
-	model,
-	className,
-}: ModelThumbnailProps ): React.ReactNode {
-	return model === 'masonry' ? (
-		<MasonryThumbnail className={ className } />
-	) : (
-		<GridThumbnail className={ className } />
-	);
-}
-
-/**
- * Card-style picker for the layout model: each option (`grid`, `masonry`)
- * renders as a thumbnail card in a radio group. Wired as the `Edit` control
- * for the `model` field of the layout settings DataForm.
- *
- * @param {DataFormControlProps< WidgetGridSettings >} props DataForm control props.
- */
-export function LayoutModelEditField( {
-	data,
-	field,
-	onChange,
-}: DataFormControlProps< WidgetGridSettings > ): React.ReactNode {
-	const { getValue, setValue, elements = [] } = field;
-	const value = getValue( { item: data } );
-	const disabled = field.isDisabled( { item: data, field } );
-
-	const onSelect = useCallback(
-		( nextValue: string | number | undefined ) =>
-			onChange( setValue( { item: data, value: nextValue } ) ),
-		[ data, onChange, setValue ]
-	);
-
-	return (
-		<Fieldset.Root>
-			<Fieldset.Legend>{ field.label }</Fieldset.Legend>
-			<Stack direction="row" gap="md" role="radiogroup">
-				{ elements.map( ( option ) => {
-					const isSelected = value === option.value;
-
-					return (
-						<Button
-							key={ String( option.value ) }
-							variant="unstyled"
-							role="radio"
-							aria-checked={ isSelected }
-							disabled={ disabled }
-							className={ clsx( styles.option, {
-								[ styles.optionSelected ]: isSelected,
-							} ) }
-							onClick={ () => onSelect( option.value ) }
-						>
-							<Stack direction="column" gap="sm" align="stretch">
-								<ModelThumbnail
-									model={ String( option.value ) }
-									className={ styles.thumbnail }
-								/>
-								<Text>{ option.label }</Text>
-							</Stack>
-						</Button>
-					);
-				} ) }
-			</Stack>
-			{ typeof field.description === 'string' && (
-				<Fieldset.Description>
-					{ field.description }
-				</Fieldset.Description>
-			) }
-		</Fieldset.Root>
-	);
-}

package/src/components/layout-settings/layout-model-edit-field/style.module.css

@@ -1,34 +0,0 @@
-.option {
-	flex: 1;
-	padding: var(--wpds-dimension-padding-md);
-	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
-	border-radius: var(--wpds-border-radius-md);
-	background: transparent;
-	color: inherit;
-	cursor: var(--wpds-cursor-control);
-	text-align: center;
-	transition:
-		border-color var(--wpds-motion-duration-sm) var(--wpds-motion-easing-subtle),
-		background-color var(--wpds-motion-duration-sm) var(--wpds-motion-easing-subtle);
-}
-
-.option:hover {
-	border-color: var(--wpds-color-stroke-surface-neutral-strong);
-}
-
-.optionSelected,
-.optionSelected:hover {
-	border-color: var(--wpds-color-stroke-interactive-brand);
-	background-color: color-mix(in srgb, var(--wpds-color-background-surface-brand) 6%, transparent);
-}
-
-.thumbnail {
-	display: block;
-	inline-size: 100%;
-	block-size: auto;
-	color: var(--wpds-color-foreground-content-neutral-weak);
-}
-
-.optionSelected .thumbnail {
-	color: var(--wpds-color-foreground-interactive-brand);
-}

package/src/components/layout-settings/layout-model-edit-field/thumbnail-grid.tsx

@@ -1,28 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Rect } from '@wordpress/primitives';
-
-interface GridThumbnailProps {
-	className?: string;
-}
-
-export function GridThumbnail( {
-	className,
-}: GridThumbnailProps ): React.ReactNode {
-	return (
-		<SVG
-			className={ className }
-			viewBox="0 0 40 24"
-			fill="currentColor"
-			aria-hidden="true"
-		>
-			<Rect x="2" y="1.25" width="11" height="10" rx="1.5" />
-			<Rect x="14.5" y="1.25" width="11" height="10" rx="1.5" />
-			<Rect x="27" y="1.25" width="11" height="10" rx="1.5" />
-			<Rect x="2" y="12.75" width="11" height="10" rx="1.5" />
-			<Rect x="14.5" y="12.75" width="11" height="10" rx="1.5" />
-			<Rect x="27" y="12.75" width="11" height="10" rx="1.5" />
-		</SVG>
-	);
-}

package/src/components/layout-settings/layout-model-edit-field/thumbnail-masonry.tsx

@@ -1,28 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Rect } from '@wordpress/primitives';
-
-interface MasonryThumbnailProps {
-	className?: string;
-}
-
-export function MasonryThumbnail( {
-	className,
-}: MasonryThumbnailProps ): React.ReactNode {
-	return (
-		<SVG
-			className={ className }
-			viewBox="0 0 40 24"
-			fill="currentColor"
-			aria-hidden="true"
-		>
-			<Rect x="2" y="0.75" width="11" height="13" rx="1.5" />
-			<Rect x="2" y="15.25" width="11" height="8" rx="1.5" />
-			<Rect x="14.5" y="0.75" width="11" height="8" rx="1.5" />
-			<Rect x="14.5" y="10.25" width="11" height="13" rx="1.5" />
-			<Rect x="27" y="0.75" width="11" height="10" rx="1.5" />
-			<Rect x="27" y="12.25" width="11" height="11" rx="1.5" />
-		</SVG>
-	);
-}

package/src/components/layout-settings/layout-settings.tsx

@@ -1,217 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { DataForm } from '@wordpress/dataviews';
-import type { Field, Form } from '@wordpress/dataviews';
-import { useCallback, useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Button, Drawer } from '@wordpress/ui'; // eslint-disable-line @wordpress/use-recommended-components
-
-/**
- * Internal dependencies
- */
-import { useDashboardInternalContext } from '../../context/dashboard-context';
-import { useDashboardUIContext } from '../../context/ui-context';
-import { migrateLayout } from '../../utils/migrate-layout';
-import {
-	presetToRowHeight,
-	rowHeightToPreset,
-	type RowHeightPreset,
-} from '../../utils/row-height-presets';
-import {
-	WIDGET_DASHBOARD_COLUMN_COUNT,
-	type WidgetGridLayoutSettings,
-	type WidgetGridModel,
-	type WidgetGridSettings,
-} from '../../types';
-import { LayoutModelEditField } from './layout-model-edit-field';
-
-function getModel( item: WidgetGridSettings ): WidgetGridModel {
-	return item.model ?? 'grid';
-}
-
-function isMasonry( item: WidgetGridSettings ): boolean {
-	return getModel( item ) === 'masonry';
-}
-
-const fields: Field< WidgetGridSettings >[] = [
-	{
-		id: 'model',
-		type: 'text',
-		Edit: LayoutModelEditField,
-		label: __( 'Layout model' ),
-		description: __(
-			'Grid keeps every tile the same height. Masonry lets tiles flow at their own height.'
-		),
-		elements: [
-			{ value: 'grid', label: __( 'Standard grid' ) },
-			{ value: 'masonry', label: __( 'Masonry' ) },
-		],
-		getValue: ( { item } ) => getModel( item ),
-	},
-	{
-		id: 'rowHeight',
-		type: 'text',
-		Edit: 'toggleGroup',
-		label: __( 'Row height' ),
-		description: __( 'Height of each grid row.' ),
-		elements: [
-			{ value: 'small', label: __( 'Small' ) },
-			{ value: 'medium', label: __( 'Medium' ) },
-			{ value: 'large', label: __( 'Large' ) },
-		],
-		getValue: ( { item } ) => {
-			const rowHeight = ( item as WidgetGridLayoutSettings ).rowHeight;
-			if ( typeof rowHeight !== 'number' ) {
-				return 'medium';
-			}
-			return rowHeightToPreset( rowHeight );
-		},
-		setValue: ( { value } ) => ( {
-			rowHeight: presetToRowHeight( value as RowHeightPreset ),
-		} ),
-		isVisible: ( item ) => ! isMasonry( item ),
-	},
-];
-
-const form: Form = {
-	layout: { type: 'regular', labelPosition: 'top' },
-	fields: [ 'model', 'rowHeight' ],
-};
-
-/**
- * Modal side drawer for grid-level settings (layout model and row height),
- * mounted by the engine and shown while `layoutSettingsOpen` is set in the
- * shared UI context. Renders nothing when grid settings are not editable.
- *
- * Edits, including Reset, apply to the staging copy and preview live behind
- * the drawer. Save commits them; Cancel and any other dismissal (X, Escape)
- * revert them. Either way only grid settings change, so in-progress widget
- * layout edits survive and customize mode stays active.
- *
- * Tile gap is deliberately not exposed; spacing stays a design-system concern.
- */
-export function LayoutSettings(): React.ReactNode {
-	const {
-		gridSettings,
-		onGridSettingsChange,
-		layout,
-		onLayoutChange,
-		commit,
-		cancel: cancelStaging,
-		resetGridSettings,
-		hasUncommittedChanges,
-		canEditGridSettings,
-		editMode,
-	} = useDashboardInternalContext();
-
-	const { layoutSettingsOpen: open, setLayoutSettingsOpen: onOpenChange } =
-		useDashboardUIContext();
-
-	// Close when customize mode exits, whatever the exit path.
-	useEffect( () => {
-		if ( ! editMode && open ) {
-			onOpenChange( false );
-		}
-	}, [ editMode, open, onOpenChange ] );
-
-	const handleChange = useCallback(
-		( edits: Record< string, unknown > ) => {
-			const nextModel = edits.model as WidgetGridModel | undefined;
-			const currentModel = getModel( gridSettings );
-
-			if ( nextModel && nextModel !== currentModel ) {
-				const migrated = migrateLayout(
-					layout,
-					currentModel,
-					nextModel,
-					{ columns: WIDGET_DASHBOARD_COLUMN_COUNT }
-				);
-				onLayoutChange( migrated );
-			}
-
-			onGridSettingsChange( {
-				...gridSettings,
-				...edits,
-			} as WidgetGridSettings );
-		},
-		[ gridSettings, layout, onGridSettingsChange, onLayoutChange ]
-	);
-
-	const handleCancel = useCallback( () => {
-		cancelStaging( { exitEditMode: false, revertLayout: false } );
-		onOpenChange( false );
-	}, [ cancelStaging, onOpenChange ] );
-
-	const handleSave = useCallback( () => {
-		commit( { exitEditMode: false } );
-		onOpenChange( false );
-	}, [ commit, onOpenChange ] );
-
-	const handleOpenChange = useCallback(
-		( nextOpen: boolean ) => {
-			if ( ! nextOpen && open ) {
-				cancelStaging( { exitEditMode: false, revertLayout: false } );
-			}
-			onOpenChange( nextOpen );
-		},
-		[ open, cancelStaging, onOpenChange ]
-	);
-
-	if ( ! canEditGridSettings ) {
-		return null;
-	}
-
-	return (
-		<Drawer.Root
-			open={ open }
-			onOpenChange={ handleOpenChange }
-			swipeDirection="right"
-		>
-			<Drawer.Popup size="medium" style={ { marginTop: '32px' } }>
-				<Drawer.Header>
-					<Drawer.Title>{ __( 'Layout settings' ) }</Drawer.Title>
-					<Drawer.CloseIcon />
-				</Drawer.Header>
-
-				<Drawer.Content>
-					<DataForm
-						data={ gridSettings }
-						fields={ fields }
-						form={ form }
-						onChange={ handleChange }
-					/>
-				</Drawer.Content>
-
-				<Drawer.Footer>
-					<Button
-						variant="minimal"
-						tone="neutral"
-						size="compact"
-						onClick={ resetGridSettings }
-						style={ { marginInlineEnd: 'auto' } }
-					>
-						{ __( 'Reset' ) }
-					</Button>
-					<Button
-						variant="minimal"
-						tone="brand"
-						size="compact"
-						onClick={ handleCancel }
-					>
-						{ __( 'Cancel' ) }
-					</Button>
-					<Button
-						variant="solid"
-						tone="brand"
-						size="compact"
-						onClick={ handleSave }
-						disabled={ ! hasUncommittedChanges }
-					>
-						{ __( 'Save' ) }
-					</Button>
-				</Drawer.Footer>
-			</Drawer.Popup>
-		</Drawer.Root>
-	);
-}

package/src/components/widget-picker/widget-picker.module.css

@@ -1,11 +0,0 @@
-.preview {
-	width: 125%;
-	height: 125%;
-	overflow: hidden;
-	padding: 0;
-	transform: scale(0.8);
-	transform-origin: top left;
-	/* Let clicks and hovers reach the picker tile, not links inside the preview. */
-	pointer-events: none;
-	user-select: none;
-}

package/src/components/widget-settings/utils/get-admin-menu-inset.ts

@@ -1,30 +0,0 @@
-// cspell:ignore adminmenuback
-const ADMIN_MENU_ID = 'adminmenuback';
-
-/**
- * Width, in pixels, taken up by the WordPress admin menu
- * (`#adminmenuback`) on the inline-start edge of the viewport.
- *
- * The settings drawer portals to the document body and anchors to a
- * viewport edge, so a left-anchored drawer would slide over the fixed
- * admin menu. Offsetting the drawer by this value keeps the menu
- * uncovered (and reachable) instead of raising the drawer's z-index over
- * it.
- *
- * Defensive: returns `0` when the element is absent (outside wp-admin, or
- * in tests/Storybook), so the drawer just anchors to the viewport edge.
- *
- * @return {number} The admin menu's right edge in px, or `0`.
- */
-export function getAdminMenuInset(): number {
-	if ( typeof document === 'undefined' ) {
-		return 0;
-	}
-
-	const adminMenu = document.getElementById( ADMIN_MENU_ID );
-	if ( ! adminMenu ) {
-		return 0;
-	}
-
-	return Math.max( 0, adminMenu.getBoundingClientRect().right );
-}

package/src/components/widget-settings/widget-settings-toolbar.module.css

@@ -1,25 +0,0 @@
-/* Translucent surface so the gear stays legible over any widget background. */
-.widgetSettingsToolbar {
-	background: color-mix(in srgb, var(--wpds-color-background-surface-neutral) 40%, transparent);
-	opacity: 0;
-	pointer-events: none;
-}
-
-/*
- * Revealed on tile hover or focus. Hidden with opacity, not display, so the
- * gear stays in the tab order and `:focus-within` surfaces it for keyboard
- * users. The matched ancestor is the grid item, shared by the slot and card.
- */
-:global([data-wp-grid-item-key]):hover .widgetSettingsToolbar,
-:global([data-wp-grid-item-key]):focus-within .widgetSettingsToolbar {
-	opacity: 1;
-	pointer-events: auto;
-}
-
-@media not ( prefers-reduced-motion ) {
-	.widgetSettingsToolbar {
-		transition:
-			opacity var(--wpds-motion-duration-sm)
-			var(--wpds-motion-easing-subtle);
-	}
-}

package/src/components/widget-settings/widget-settings-toolbar.tsx

@@ -1,45 +0,0 @@
-/**
- * WordPress dependencies
- */
-import type { WidgetType } from '@wordpress/widget-primitives';
-
-/**
- * Internal dependencies
- */
-import { WidgetToolbar } from '../widget-toolbar';
-import { WidgetSettingsTrigger } from './widget-settings-trigger';
-import styles from './widget-settings-toolbar.module.css';
-import type { DashboardWidget } from '../../types';
-
-export interface WidgetSettingsToolbarProps {
-	/** The instance whose settings this toolbar configures. */
-	widget: DashboardWidget< unknown >;
-
-	/** The instance's widget type, for the trigger label and guard. */
-	widgetType: WidgetType;
-}
-
-/**
- * Normal-mode per-tile toolbar: the gear that opens the settings drawer. Lives
- * in the grid's `actionableArea` slot, so it shows for every `presentation`.
- * Returns `null` when the type has no attributes.
- *
- * @param {WidgetSettingsToolbarProps} props Component props.
- */
-export function WidgetSettingsToolbar( {
-	widget,
-	widgetType,
-}: WidgetSettingsToolbarProps ): React.ReactNode {
-	if ( ! widgetType.attributes?.length ) {
-		return null;
-	}
-
-	return (
-		<WidgetToolbar className={ styles.widgetSettingsToolbar }>
-			<WidgetSettingsTrigger
-				widget={ widget }
-				widgetType={ widgetType }
-			/>
-		</WidgetToolbar>
-	);
-}

package/src/components/widgets/widget-layout-toolbar.module.css

@@ -1,6 +0,0 @@
-/* Solid surface: shown for the whole customize session, not on hover. */
-.widgetLayoutToolbar {
-	background: var(--wpds-color-background-surface-neutral-strong);
-	border: 1px solid var(--wpds-color-stroke-surface-neutral-weak);
-	box-shadow: var(--wpds-elevation-xs);
-}

package/src/utils/grid-model-change/grid-model-change.ts

@@ -1,53 +0,0 @@
-/**
- * Internal dependencies
- */
-import { migrateLayout } from '../migrate-layout';
-import type {
-	DashboardWidget,
-	WidgetGridModel,
-	WidgetGridSettings,
-} from '../../types';
-import { WIDGET_DASHBOARD_COLUMN_COUNT } from '../../types';
-
-export function getGridModel( settings: WidgetGridSettings ): WidgetGridModel {
-	return settings.model ?? 'grid';
-}
-
-type ComputeGridModelChangeProps = {
-	layout: DashboardWidget[];
-	gridSettings: WidgetGridSettings;
-	targetModel: WidgetGridModel;
-};
-
-type ComputeGridModelChangeResult = {
-	layout: DashboardWidget[];
-	gridSettings: WidgetGridSettings;
-} | null;
-
-/**
- * Computes the staged layout and grid settings after a layout-model change.
- *
- * @param {ComputeGridModelChangeProps} params Layout, current settings, and target model.
- * @return {ComputeGridModelChangeResult} Migrated layout and settings, or `null` when the model is unchanged.
- */
-export function computeGridModelChange( {
-	layout,
-	gridSettings,
-	targetModel,
-}: ComputeGridModelChangeProps ): ComputeGridModelChangeResult {
-	const currentModel = getGridModel( gridSettings );
-
-	if ( currentModel === targetModel ) {
-		return null;
-	}
-
-	return {
-		layout: migrateLayout( layout, currentModel, targetModel, {
-			columns: WIDGET_DASHBOARD_COLUMN_COUNT,
-		} ),
-		gridSettings: {
-			...gridSettings,
-			model: targetModel,
-		} as WidgetGridSettings,
-	};
-}

package/src/utils/grid-model-change/index.ts

@@ -1 +0,0 @@
-export { computeGridModelChange, getGridModel } from './grid-model-change';

package/src/utils/migrate-layout/index.ts

@@ -1 +0,0 @@
-export { migrateLayout } from './migrate-layout';