@elementor/editor-controls 4.0.0-573 → 4.0.0-597

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "4.0.0-573",
+  "version": "4.0.0-597",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.0.0-573",
-    "@elementor/editor-elements": "4.0.0-573",
-    "@elementor/editor-props": "4.0.0-573",
-    "@elementor/editor-responsive": "4.0.0-573",
-    "@elementor/editor-ui": "4.0.0-573",
-    "@elementor/editor-v1-adapters": "4.0.0-573",
-    "@elementor/env": "4.0.0-573",
-    "@elementor/http-client": "4.0.0-573",
+    "@elementor/editor-current-user": "4.0.0-597",
+    "@elementor/editor-elements": "4.0.0-597",
+    "@elementor/editor-props": "4.0.0-597",
+    "@elementor/editor-responsive": "4.0.0-597",
+    "@elementor/editor-ui": "4.0.0-597",
+    "@elementor/editor-v1-adapters": "4.0.0-597",
+    "@elementor/env": "4.0.0-597",
+    "@elementor/http-client": "4.0.0-597",
     "@elementor/icons": "^1.63.0",
-    "@elementor/locations": "4.0.0-573",
-    "@elementor/events": "4.0.0-573",
-    "@elementor/query": "4.0.0-573",
-    "@elementor/session": "4.0.0-573",
+    "@elementor/locations": "4.0.0-597",
+    "@elementor/events": "4.0.0-597",
+    "@elementor/query": "4.0.0-597",
+    "@elementor/session": "4.0.0-597",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-573",
-    "@elementor/wp-media": "4.0.0-573",
+    "@elementor/utils": "4.0.0-597",
+    "@elementor/wp-media": "4.0.0-597",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/components/size/unstable-size-field.tsx

@@ -8,32 +8,26 @@ import { UnitSelect } from './unit-select';
 import { UnstableSizeInput } from './unstable-size-input';
 
 type Props< TValue > = {
-	units: Unit[];
 	value: TValue;
-	defaultValue?: Partial< TValue >;
+	units: Unit[];
+	defaultUnit?: Unit;
 	onChange: ( value: TValue ) => void;
 	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
 	disabled?: boolean;
 	InputProps?: TextFieldProps[ 'InputProps' ];
-};
-
-const DEFAULT_VALUE: SizePropValue[ 'value' ] = {
-	unit: 'px',
-	size: 0,
+	startIcon?: React.ReactNode;
 };
 
 export const UnstableSizeField = < T extends SizePropValue[ 'value' ] >( {
 	value,
 	InputProps,
-	defaultValue,
 	onChange,
 	onBlur,
 	units,
+	defaultUnit,
+	startIcon,
 }: Props< T > ) => {
-	const { size, unit, setSize, setUnit } = useSizeValue< T >( value, onChange, {
-		...DEFAULT_VALUE,
-		...defaultValue,
-	} as T );
+	const { size, unit, setSize, setUnit } = useSizeValue< T >( value, onChange, defaultUnit );
 
 	const shouldHighlightUnit = () => {
 		return hasValue( size );
@@ -47,6 +41,7 @@ export const UnstableSizeField = < T extends SizePropValue[ 'value' ] >( {
 			onChange={ ( event ) => setSize( event.target.value ) }
 			InputProps={ {
 				...InputProps,
+				startAdornment: startIcon && <InputAdornment position="start">{ startIcon }</InputAdornment>,
 				endAdornment: (
 					<InputAdornment position="end">
 						<UnitSelect

package/src/controls/inline-editing-control.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type ComponentProps, useCallback, useEffect, useMemo } from 'react';
-import { htmlV2PropTypeUtil, parseHtmlChildren } from '@elementor/editor-props';
+import { htmlV3PropTypeUtil, parseHtmlChildren, stringPropTypeUtil } from '@elementor/editor-props';
 import { Box, type SxProps, type Theme } from '@elementor/ui';
 import { debounce } from '@elementor/utils';
 
@@ -21,8 +21,8 @@ export const InlineEditingControl = createControl(
 		attributes?: Record< string, string >;
 		props?: ComponentProps< 'div' >;
 	} ) => {
-		const { value, setValue } = useBoundProp( htmlV2PropTypeUtil );
-		const content = value?.content ?? '';
+		const { value, setValue } = useBoundProp( htmlV3PropTypeUtil );
+		const content = stringPropTypeUtil.extract( value?.content ?? null ) ?? '';
 
 		const debouncedParse = useMemo(
 			() =>
@@ -30,7 +30,7 @@ export const InlineEditingControl = createControl(
 					const parsed = parseHtmlChildren( html );
 
 					setValue( {
-						content: parsed.content || null,
+						content: parsed.content ? stringPropTypeUtil.create( parsed.content ) : null,
 						children: parsed.children,
 					} );
 				}, CHILDREN_PARSE_DEBOUNCE_MS ),
@@ -42,7 +42,7 @@ export const InlineEditingControl = createControl(
 				const html = ( newValue ?? '' ) as string;
 
 				setValue( {
-					content: html || null,
+					content: html ? stringPropTypeUtil.create( html ) : null,
 					children: value?.children ?? [],
 				} );
 

package/src/hooks/use-size-value.ts

@@ -1,11 +1,16 @@
+import type { Unit } from '@elementor/editor-controls';
 import { type SizePropValue } from '@elementor/editor-props';
 
 import { useSyncExternalState } from '../hooks/use-sync-external-state';
 
+const DEFAULT_UNIT = 'px';
+
+const DEFAULT_SIZE = '';
+
 export const useSizeValue = < T extends SizePropValue[ 'value' ] >(
 	externalValue: T,
 	onChange: ( value: T ) => void,
-	defaultValue: T
+	defaultUnit?: Unit
 ) => {
 	const [ sizeValue, setSizeValue ] = useSyncExternalState< T >( {
 		external: externalValue,
@@ -15,7 +20,7 @@ export const useSizeValue = < T extends SizePropValue[ 'value' ] >(
 			}
 		},
 		persistWhen: ( newState ) => differsFromExternal( newState as T, externalValue ),
-		fallback: () => defaultValue,
+		fallback: () => ( { size: DEFAULT_SIZE, unit: defaultUnit ?? DEFAULT_UNIT } ) as unknown as T,
 	} );
 
 	const setSize = ( value: string ) => {
@@ -44,6 +49,6 @@ export const useSizeValue = < T extends SizePropValue[ 'value' ] >(
 	};
 };
 
-const differsFromExternal = ( newState: SizePropValue[ 'value' ], externalState: SizePropValue[ 'value' ] ) => {
-	return newState.size !== externalState.size || newState.unit !== externalState.unit;
+const differsFromExternal = ( newState?: SizePropValue[ 'value' ], externalState?: SizePropValue[ 'value' ] ) => {
+	return newState?.size !== externalState?.size || newState?.unit !== externalState?.unit;
 };

package/src/index.ts

@@ -56,6 +56,7 @@ export { PopoverGridContainer } from './components/popover-grid-container';
 export { InlineEditor } from './components/inline-editor';
 export { InlineEditorToolbar } from './components/inline-editor-toolbar';
 export { UnstableSizeField } from './components/size/unstable-size-field';
+export { NumberInput } from './components/number-input';
 
 // types
 export type { ControlComponent } from './create-control';