@elementor/editor-editing-panel 4.2.0-878 → 4.2.0-879

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.2.0-878",
+  "version": "4.2.0-879",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,31 +39,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-878",
-    "@elementor/editor-canvas": "4.2.0-878",
-    "@elementor/editor-controls": "4.2.0-878",
-    "@elementor/editor-documents": "4.2.0-878",
-    "@elementor/editor-elements": "4.2.0-878",
-    "@elementor/editor-interactions": "4.2.0-878",
-    "@elementor/editor-notifications": "4.2.0-878",
-    "@elementor/editor-panels": "4.2.0-878",
-    "@elementor/editor-props": "4.2.0-878",
-    "@elementor/editor-responsive": "4.2.0-878",
-    "@elementor/editor-styles": "4.2.0-878",
-    "@elementor/editor-styles-repository": "4.2.0-878",
-    "@elementor/editor-ui": "4.2.0-878",
-    "@elementor/editor-v1-adapters": "4.2.0-878",
-    "@elementor/http-client": "4.2.0-878",
+    "@elementor/editor": "4.2.0-879",
+    "@elementor/editor-canvas": "4.2.0-879",
+    "@elementor/editor-controls": "4.2.0-879",
+    "@elementor/editor-documents": "4.2.0-879",
+    "@elementor/editor-elements": "4.2.0-879",
+    "@elementor/editor-interactions": "4.2.0-879",
+    "@elementor/editor-notifications": "4.2.0-879",
+    "@elementor/editor-panels": "4.2.0-879",
+    "@elementor/editor-props": "4.2.0-879",
+    "@elementor/editor-responsive": "4.2.0-879",
+    "@elementor/editor-styles": "4.2.0-879",
+    "@elementor/editor-styles-repository": "4.2.0-879",
+    "@elementor/editor-ui": "4.2.0-879",
+    "@elementor/editor-v1-adapters": "4.2.0-879",
+    "@elementor/http-client": "4.2.0-879",
     "@elementor/icons": "~1.75.1",
-    "@elementor/editor-variables": "4.2.0-878",
-    "@elementor/locations": "4.2.0-878",
-    "@elementor/menus": "4.2.0-878",
-    "@elementor/query": "4.2.0-878",
-    "@elementor/schema": "4.2.0-878",
-    "@elementor/session": "4.2.0-878",
+    "@elementor/editor-variables": "4.2.0-879",
+    "@elementor/locations": "4.2.0-879",
+    "@elementor/menus": "4.2.0-879",
+    "@elementor/query": "4.2.0-879",
+    "@elementor/schema": "4.2.0-879",
+    "@elementor/session": "4.2.0-879",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-878",
-    "@elementor/wp-media": "4.2.0-878",
+    "@elementor/utils": "4.2.0-879",
+    "@elementor/wp-media": "4.2.0-879",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/style-sections/layout-section/grid-size-field.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRef } from 'react';
-import { SizeComponent, useBoundProp } from '@elementor/editor-controls';
-import { stringPropTypeUtil, type StringPropValue } from '@elementor/editor-props';
+import { ControlActions, createControl, SizeComponent, useBoundProp } from '@elementor/editor-controls';
+import { type PropValue } from '@elementor/editor-props';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -9,87 +9,18 @@ import { StylesField } from '../../../controls-registry/styles-field';
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { StylesFieldLayout } from '../../styles-field-layout';
-
-type GridTrackUnit = 'fr' | 'custom';
-
-type GridTrackValue = { kind: 'empty' } | { kind: 'fr'; count: number } | { kind: 'custom'; raw: string };
-
-const FR = 'fr' as const;
-const CUSTOM = 'custom' as const;
-const UNITS: GridTrackUnit[] = [ FR, CUSTOM ];
-
-const EMPTY: GridTrackValue = { kind: 'empty' };
-
-const REPEAT_FR_PATTERN = /^repeat\(\s*(\d+)\s*,\s*1fr\s*\)$/;
-
-const parseCss = ( css: string | null ): GridTrackValue => {
-	if ( ! css ) {
-		return EMPTY;
-	}
-	const match = css.match( REPEAT_FR_PATTERN );
-	if ( match ) {
-		const count = parseInt( match[ 1 ], 10 );
-		return count >= 1 ? { kind: 'fr', count } : EMPTY;
-	}
-	return { kind: 'custom', raw: css };
-};
-
-const fromSizeInput = ( v: { size: number | string; unit: GridTrackUnit } ): GridTrackValue => {
-	if ( v.size === '' || Number.isNaN( v.size ) ) {
-		return EMPTY;
-	}
-	if ( v.unit === FR ) {
-		const n = Number( v.size );
-		return Number.isFinite( n ) && n >= 1 ? { kind: 'fr', count: Math.trunc( n ) } : EMPTY;
-	}
-	return { kind: 'custom', raw: String( v.size ) };
-};
-
-const toCss = ( v: GridTrackValue ): string | null => {
-	switch ( v.kind ) {
-		case 'empty':
-			return null;
-		case 'fr':
-			return `repeat(${ v.count }, 1fr)`;
-		case 'custom':
-			return v.raw;
-	}
-};
-
-const toSizeInput = (
-	v: GridTrackValue,
-	fallbackUnit: GridTrackUnit = FR
-): { size: number | string; unit: GridTrackUnit } => {
-	switch ( v.kind ) {
-		case 'empty':
-			return { size: '', unit: fallbackUnit };
-		case 'fr':
-			return { size: v.count, unit: FR };
-		case 'custom':
-			return { size: v.raw, unit: CUSTOM };
-	}
-};
-
-const toPlaceholder = ( v: GridTrackValue ): string | undefined => {
-	switch ( v.kind ) {
-		case 'empty':
-			return undefined;
-		case 'fr':
-			return String( v.count );
-		case 'custom':
-			return v.raw;
-	}
-};
-
-const unitOf = ( v: GridTrackValue, fallback: GridTrackUnit = FR ): GridTrackUnit => {
-	if ( v.kind === 'fr' ) {
-		return FR;
-	}
-	if ( v.kind === 'custom' ) {
-		return CUSTOM;
-	}
-	return fallback;
-};
+import {
+	EMPTY,
+	FR,
+	fromSizeInput,
+	type GridTrackUnit,
+	parseValue,
+	toPlaceholder,
+	toPropValue,
+	toSizeInput,
+	unitOf,
+	UNITS,
+} from './utils/grid-track-value';
 
 type GridTrackCssProp = 'grid-template-rows' | 'grid-template-columns';
 
@@ -98,24 +29,43 @@ type GridTrackFieldProps = {
 	label: string;
 };
 
-const GridTrackField = ( { cssProp, label }: GridTrackFieldProps ) => (
-	<UiProviders>
-		<StylesField bind={ cssProp } propDisplayName={ label }>
-			<GridTrackFieldContent cssProp={ cssProp } label={ label } />
-		</StylesField>
-	</UiProviders>
+type GridTrackSizeInputProps = {
+	value: { size: number | string; unit: GridTrackUnit };
+	placeholder?: string;
+	setValue: ( value: { size: number | string; unit: GridTrackUnit } ) => void;
+	anchorRef: React.RefObject< HTMLDivElement | null >;
+};
+
+type SizeComponentProps = Parameters< typeof SizeComponent >[ 0 ];
+
+const SizeFieldWrapper = ( { children }: { children: React.ReactNode } ) => (
+	<ControlActions>{ children as React.ReactElement }</ControlActions>
 );
 
+const GridTrackSizeInput = createControl( ( props: GridTrackSizeInputProps ) => (
+	<SizeComponent
+		units={ UNITS as unknown as SizeComponentProps[ 'units' ] }
+		value={ props.value as SizeComponentProps[ 'value' ] }
+		placeholder={ props.placeholder }
+		defaultUnit={ FR as SizeComponentProps[ 'defaultUnit' ] }
+		setValue={ props.setValue as SizeComponentProps[ 'setValue' ] }
+		onBlur={ () => {} }
+		min={ 1 }
+		anchorRef={ props.anchorRef }
+		SizeFieldWrapper={ SizeFieldWrapper }
+	/>
+) );
+
 const GridTrackFieldContent = ( { cssProp, label }: GridTrackFieldProps ) => {
-	const { value, setValue } = useStylesField< StringPropValue | null >( cssProp, {
+	const { value, setValue } = useStylesField< PropValue >( cssProp, {
 		history: { propDisplayName: label },
 	} );
 
 	const { placeholder: inheritedPlaceholder } = useBoundProp();
 	const anchorRef = useRef< HTMLDivElement >( null );
 
-	const local = parseCss( value?.value ?? null );
-	const inherited = parseCss( stringPropTypeUtil.extract( inheritedPlaceholder ) );
+	const local = parseValue( value );
+	const inherited = parseValue( inheritedPlaceholder );
 
 	const displayValue = local.kind !== 'empty' ? toSizeInput( local ) : toSizeInput( EMPTY, unitOf( inherited ) );
 	const placeholder = toPlaceholder( inherited );
@@ -127,21 +77,16 @@ const GridTrackFieldContent = ( { cssProp, label }: GridTrackFieldProps ) => {
 			return;
 		}
 
-		const css = toCss( next );
-		setValue( css === null ? null : { $$type: 'string', value: css } );
+		setValue( toPropValue( next ) );
 	};
 
 	return (
 		<StylesFieldLayout label={ label } direction="column">
 			<div ref={ anchorRef }>
-				<SizeComponent
-					units={ UNITS as unknown as Parameters< typeof SizeComponent >[ 0 ][ 'units' ] }
-					value={ displayValue as Parameters< typeof SizeComponent >[ 0 ][ 'value' ] }
+				<GridTrackSizeInput
+					value={ displayValue }
 					placeholder={ placeholder }
-					defaultUnit={ FR as Parameters< typeof SizeComponent >[ 0 ][ 'defaultUnit' ] }
-					setValue={ handleChange as Parameters< typeof SizeComponent >[ 0 ][ 'setValue' ] }
-					onBlur={ () => {} }
-					min={ 1 }
+					setValue={ handleChange }
 					anchorRef={ anchorRef }
 				/>
 			</div>
@@ -149,6 +94,14 @@ const GridTrackFieldContent = ( { cssProp, label }: GridTrackFieldProps ) => {
 	);
 };
 
+const GridTrackField = ( { cssProp, label }: GridTrackFieldProps ) => (
+	<UiProviders>
+		<StylesField bind={ cssProp } propDisplayName={ label }>
+			<GridTrackFieldContent cssProp={ cssProp } label={ label } />
+		</StylesField>
+	</UiProviders>
+);
+
 export const GridSizeFields = () => (
 	<Grid container gap={ 2 } flexWrap="nowrap">
 		<Grid item xs={ 6 }>

package/src/components/style-sections/layout-section/utils/grid-track-value.ts

@@ -0,0 +1,113 @@
+import {
+	gridTrackSizePropTypeUtil,
+	type GridTrackSizePropValue,
+	type PropValue,
+	stringPropTypeUtil,
+} from '@elementor/editor-props';
+
+export type GridTrackUnit = 'fr' | 'custom';
+
+export type GridTrackValue = { kind: 'empty' } | { kind: 'fr'; count: number } | { kind: 'custom'; raw: string };
+
+export const FR = 'fr' as const;
+export const CUSTOM = 'custom' as const;
+export const UNITS: GridTrackUnit[] = [ FR, CUSTOM ];
+
+export const EMPTY: GridTrackValue = { kind: 'empty' };
+
+// Backward-compat: legacy values were stored as `{$$type:'string', value:'repeat(N, 1fr)'}`.
+const REPEAT_FR_PATTERN = /^repeat\(\s*(\d+)\s*,\s*1fr\s*\)$/;
+
+const parseString = ( css: string | null ): GridTrackValue => {
+	if ( ! css ) {
+		return EMPTY;
+	}
+	const match = css.match( REPEAT_FR_PATTERN );
+	if ( match ) {
+		const count = parseInt( match[ 1 ], 10 );
+		return count >= 1 ? { kind: 'fr', count } : EMPTY;
+	}
+	return { kind: 'custom', raw: css };
+};
+
+const parseGridTrackSize = ( size: GridTrackSizePropValue[ 'value' ] | null ): GridTrackValue => {
+	if ( ! size ) {
+		return EMPTY;
+	}
+	if ( size.unit === FR ) {
+		const n = Number( size.size );
+		return Number.isFinite( n ) && n >= 1 ? { kind: 'fr', count: Math.trunc( n ) } : EMPTY;
+	}
+	const raw = String( size.size ?? '' );
+	return raw === '' ? EMPTY : { kind: 'custom', raw };
+};
+
+export const parseValue = ( value: PropValue | undefined | null ): GridTrackValue => {
+	if ( ! value ) {
+		return EMPTY;
+	}
+	if ( gridTrackSizePropTypeUtil.isValid( value ) ) {
+		return parseGridTrackSize( gridTrackSizePropTypeUtil.extract( value ) );
+	}
+	if ( stringPropTypeUtil.isValid( value ) ) {
+		return parseString( stringPropTypeUtil.extract( value ) );
+	}
+	return EMPTY;
+};
+
+export const fromSizeInput = ( v: { size: number | string; unit: GridTrackUnit } ): GridTrackValue => {
+	if ( v.size === '' || Number.isNaN( v.size ) ) {
+		return EMPTY;
+	}
+	if ( v.unit === FR ) {
+		const n = Number( v.size );
+		return Number.isFinite( n ) && n >= 1 ? { kind: 'fr', count: Math.trunc( n ) } : EMPTY;
+	}
+	return { kind: 'custom', raw: String( v.size ) };
+};
+
+export const toPropValue = ( v: GridTrackValue ): PropValue => {
+	switch ( v.kind ) {
+		case 'empty':
+			return null;
+		case 'fr':
+			return gridTrackSizePropTypeUtil.create( { size: v.count, unit: FR } );
+		case 'custom':
+			return gridTrackSizePropTypeUtil.create( { size: v.raw, unit: CUSTOM } );
+	}
+};
+
+export const toSizeInput = (
+	v: GridTrackValue,
+	fallbackUnit: GridTrackUnit = FR
+): { size: number | string; unit: GridTrackUnit } => {
+	switch ( v.kind ) {
+		case 'empty':
+			return { size: '', unit: fallbackUnit };
+		case 'fr':
+			return { size: v.count, unit: FR };
+		case 'custom':
+			return { size: v.raw, unit: CUSTOM };
+	}
+};
+
+export const toPlaceholder = ( v: GridTrackValue ): string | undefined => {
+	switch ( v.kind ) {
+		case 'empty':
+			return undefined;
+		case 'fr':
+			return String( v.count );
+		case 'custom':
+			return v.raw;
+	}
+};
+
+export const unitOf = ( v: GridTrackValue, fallback: GridTrackUnit = FR ): GridTrackUnit => {
+	if ( v.kind === 'fr' ) {
+		return FR;
+	}
+	if ( v.kind === 'custom' ) {
+		return CUSTOM;
+	}
+	return fallback;
+};