@wordpress/widget-dashboard 0.2.0 → 0.3.1-next.v.202607070741.0

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

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

@@ -1,156 +0,0 @@
-/**
- * Internal dependencies
- */
-import type {
-	DashboardWidget,
-	GridTilePlacement,
-	MasonryTilePlacement,
-	WidgetGridModel,
-} from '../../types';
-
-interface MigrationContext {
-	/**
-	 * Column count of the currently-mounted grid surface. Used to
-	 * resolve `'full'` widths to a concrete numeric span when going
-	 * from the 2D grid model to masonry. When the surface is in
-	 * responsive mode and the runtime column count is unknown,
-	 * callers should pass a sensible fallback (e.g., the default of
-	 * 6 used by `@wordpress/grid`).
-	 */
-	columns: number;
-}
-
-const FALLBACK_COLUMNS = 6;
-
-/**
- * Coerces a `'fill'`/`'full'`/numeric width into a concrete numeric
- * span when migrating from `'grid'` to `'masonry'`. `'fill'` collapses
- * to a single column; resolving it against per-row remainder would
- * require either DOM measurement or replicating CSS-Grid's auto-flow
- * placement, both of which were judged not worth the complexity for
- * a one-shot migration the user can correct visually in staging.
- *
- * @param width         Source width from a grid placement.
- * @param targetColumns Column count to use for `'full'` widths.
- */
-function gridWidthToMasonryWidth(
-	width: GridTilePlacement[ 'width' ],
-	targetColumns: number
-): number {
-	if ( width === 'full' ) {
-		return targetColumns;
-	}
-	if ( width === 'fill' || width === undefined ) {
-		return 1;
-	}
-	return width;
-}
-
-/**
- * Transforms a single placement from the 2D grid shape to the masonry
- * shape. Drops `height` (masonry derives heights from content),
- * preserves `order`, leaves `lane` unset so the auto-flow placer
- * arranges items by source order.
- *
- * @param placement Source grid placement.
- * @param context   Migration context (column count).
- */
-function migratePlacementGridToMasonry(
-	placement: GridTilePlacement | undefined,
-	context: MigrationContext
-): MasonryTilePlacement {
-	if ( ! placement ) {
-		return {};
-	}
-
-	const next: MasonryTilePlacement = {};
-	const width = gridWidthToMasonryWidth( placement.width, context.columns );
-	if ( width !== 1 ) {
-		next.width = width;
-	}
-	if ( placement.order !== undefined ) {
-		next.order = placement.order;
-	}
-	return next;
-}
-
-/**
- * Transforms a single placement from the masonry shape to the 2D grid
- * shape. Preserves the numeric width, drops `lane` (the 2D grid
- * auto-packs and has no pin-to-column concept), and seeds `height: 1`
- * since masonry never persisted a height. The user is expected to
- * resize tiles vertically after the migration.
- *
- * @param placement Source masonry placement.
- */
-function migratePlacementMasonryToGrid(
-	placement: MasonryTilePlacement | undefined
-): GridTilePlacement {
-	if ( ! placement ) {
-		return { height: 1 };
-	}
-
-	const next: GridTilePlacement = { height: 1 };
-	if ( placement.width !== undefined ) {
-		next.width = placement.width;
-	}
-	if ( placement.order !== undefined ) {
-		next.order = placement.order;
-	}
-	return next;
-}
-
-/**
- * Migrates every widget's `placement` between grid models.
- *
- * The two storage shapes overlap on `width` and `order` but diverge
- * on the rest: 2D grid carries `height` and discriminated string
- * widths (`'fill'`/`'full'`), lanes carries `lane` and only numeric
- * widths. Each conversion loses information that the target model
- * cannot represent. The caller is responsible for surfacing the
- * result to the user in a way that lets them correct visually.
- *
- * When `from === to`, the input is returned unchanged.
- *
- * @param widgets Widgets to migrate.
- * @param from    Source model. `undefined` is treated as `'grid'`.
- * @param to      Target model.
- * @param context Information that depends on the live render (today
- *                only `columns`).
- */
-export function migrateLayout(
-	widgets: DashboardWidget[],
-	from: WidgetGridModel | undefined,
-	to: WidgetGridModel,
-	context: Partial< MigrationContext > = {}
-): DashboardWidget[] {
-	const resolvedFrom: WidgetGridModel = from ?? 'grid';
-	if ( resolvedFrom === to ) {
-		return widgets;
-	}
-
-	const resolvedContext: MigrationContext = {
-		columns: context.columns ?? FALLBACK_COLUMNS,
-	};
-
-	if ( resolvedFrom === 'grid' && to === 'masonry' ) {
-		return widgets.map( ( widget ) => ( {
-			...widget,
-			placement: migratePlacementGridToMasonry(
-				widget.placement as GridTilePlacement | undefined,
-				resolvedContext
-			),
-		} ) );
-	}
-
-	if ( resolvedFrom === 'masonry' && to === 'grid' ) {
-		return widgets.map( ( widget ) => ( {
-			...widget,
-			placement: migratePlacementMasonryToGrid(
-				widget.placement as MasonryTilePlacement | undefined
-			),
-		} ) );
-	}
-
-	return widgets;
-}

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

@@ -1,114 +0,0 @@
-/**
- * Internal dependencies
- */
-import { migrateLayout } from '../migrate-layout';
-import type { DashboardWidget } from '../../../types';
-
-function widget( uuid: string, placement: object | undefined = undefined ) {
-	return {
-		uuid,
-		type: 'core/test' as const,
-		placement,
-	} as DashboardWidget;
-}
-
-describe( 'migrateLayout', () => {
-	it( 'returns input unchanged when source and target match', () => {
-		const layout: DashboardWidget[] = [
-			widget( 'a', { width: 2, height: 1 } ),
-		];
-		expect( migrateLayout( layout, 'grid', 'grid' ) ).toBe( layout );
-	} );
-
-	it( 'treats undefined source as grid', () => {
-		const layout: DashboardWidget[] = [
-			widget( 'a', { width: 'full', height: 1 } ),
-		];
-		const migrated = migrateLayout( layout, undefined, 'masonry', {
-			columns: 4,
-		} );
-		expect( migrated[ 0 ].placement ).toEqual( { width: 4 } );
-	} );
-
-	describe( 'grid to masonry', () => {
-		it( "expands 'full' to the target column count", () => {
-			const layout: DashboardWidget[] = [
-				widget( 'a', { width: 'full', height: 1 } ),
-			];
-			const migrated = migrateLayout( layout, 'grid', 'masonry', {
-				columns: 6,
-			} );
-			expect( migrated[ 0 ].placement ).toEqual( { width: 6 } );
-		} );
-
-		it( "collapses 'fill' to a single column", () => {
-			const layout: DashboardWidget[] = [
-				widget( 'a', { width: 'fill', height: 2 } ),
-			];
-			const migrated = migrateLayout( layout, 'grid', 'masonry', {
-				columns: 6,
-			} );
-			expect( migrated[ 0 ].placement ).toEqual( {} );
-		} );
-
-		it( 'preserves numeric width and drops height and explicit width=1', () => {
-			const layout: DashboardWidget[] = [
-				widget( 'a', { width: 3, height: 2, order: 5 } ),
-				widget( 'b', { width: 1, height: 1 } ),
-			];
-			const migrated = migrateLayout( layout, 'grid', 'masonry', {
-				columns: 6,
-			} );
-			expect( migrated[ 0 ].placement ).toEqual( {
-				width: 3,
-				order: 5,
-			} );
-			expect( migrated[ 1 ].placement ).toEqual( {} );
-		} );
-
-		it( 'falls back to a default column count when not provided', () => {
-			const layout: DashboardWidget[] = [
-				widget( 'a', { width: 'full', height: 1 } ),
-			];
-			const migrated = migrateLayout( layout, 'grid', 'masonry' );
-			expect( migrated[ 0 ].placement ).toEqual( { width: 6 } );
-		} );
-
-		it( 'handles widgets without a placement', () => {
-			const layout: DashboardWidget[] = [ widget( 'a' ) ];
-			const migrated = migrateLayout( layout, 'grid', 'masonry' );
-			expect( migrated[ 0 ].placement ).toEqual( {} );
-		} );
-	} );
-
-	describe( 'masonry to grid', () => {
-		it( 'seeds height=1 and preserves width and order', () => {
-			const layout: DashboardWidget[] = [
-				widget( 'a', { width: 2, order: 1 } ),
-			];
-			const migrated = migrateLayout( layout, 'masonry', 'grid' );
-			expect( migrated[ 0 ].placement ).toEqual( {
-				width: 2,
-				height: 1,
-				order: 1,
-			} );
-		} );
-
-		it( 'drops the lane field', () => {
-			const layout: DashboardWidget[] = [
-				widget( 'a', { width: 1, lane: 2 } ),
-			];
-			const migrated = migrateLayout( layout, 'masonry', 'grid' );
-			expect( migrated[ 0 ].placement ).toEqual( {
-				width: 1,
-				height: 1,
-			} );
-		} );
-
-		it( 'handles widgets without a placement', () => {
-			const layout: DashboardWidget[] = [ widget( 'a' ) ];
-			const migrated = migrateLayout( layout, 'masonry', 'grid' );
-			expect( migrated[ 0 ].placement ).toEqual( { height: 1 } );
-		} );
-	} );
-} );