@elementor/editor-controls 4.3.0-965 → 4.3.0-966

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.3.0-965",
+  "version": "4.3.0-966",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.3.0-965",
-    "@elementor/editor-elements": "4.3.0-965",
-    "@elementor/editor-props": "4.3.0-965",
-    "@elementor/editor-responsive": "4.3.0-965",
-    "@elementor/editor-ui": "4.3.0-965",
-    "@elementor/editor-v1-adapters": "4.3.0-965",
-    "@elementor/env": "4.3.0-965",
-    "@elementor/events": "4.3.0-965",
-    "@elementor/http-client": "4.3.0-965",
+    "@elementor/editor-current-user": "4.3.0-966",
+    "@elementor/editor-elements": "4.3.0-966",
+    "@elementor/editor-props": "4.3.0-966",
+    "@elementor/editor-responsive": "4.3.0-966",
+    "@elementor/editor-ui": "4.3.0-966",
+    "@elementor/editor-v1-adapters": "4.3.0-966",
+    "@elementor/env": "4.3.0-966",
+    "@elementor/events": "4.3.0-966",
+    "@elementor/http-client": "4.3.0-966",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.3.0-965",
-    "@elementor/query": "4.3.0-965",
-    "@elementor/schema": "4.3.0-965",
-    "@elementor/session": "4.3.0-965",
+    "@elementor/locations": "4.3.0-966",
+    "@elementor/query": "4.3.0-966",
+    "@elementor/schema": "4.3.0-966",
+    "@elementor/session": "4.3.0-966",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-965",
-    "@elementor/wp-media": "4.3.0-965",
+    "@elementor/utils": "4.3.0-966",
+    "@elementor/wp-media": "4.3.0-966",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

package/src/components/size-control/size-input.tsx

@@ -4,19 +4,19 @@ import { Box, InputAdornment, type PopupState } from '@elementor/ui';
 
 import ControlActions from '../../control-actions/control-actions';
 import { useTypingBuffer } from '../../hooks/use-typing-buffer';
-import { type ExtendedOption, isUnitExtendedOption, type Unit } from '../../utils/size-control';
+import { isUnitExtendedOption, type SizeUnit } from '../../utils/size-control';
 import { SelectionEndAdornment, TextFieldInnerSelection } from '../size-control/text-field-inner-selection';
 
 type SizeInputProps = {
-	unit: Unit | ExtendedOption;
+	unit: SizeUnit;
 	size: number | string;
 	placeholder?: string;
 	startIcon?: React.ReactNode;
-	units: ( Unit | ExtendedOption )[];
+	units: SizeUnit[];
 	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
 	onFocus?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
 	onClick?: ( event: React.MouseEvent< HTMLInputElement > ) => void;
-	handleUnitChange: ( unit: Unit | ExtendedOption ) => void;
+	handleUnitChange: ( unit: SizeUnit ) => void;
 	handleSizeChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
 	popupState: PopupState;
 	disabled?: boolean;

package/src/controls/size-control/types.ts

@@ -1,17 +1,10 @@
 import type { CreateOptions } from '@elementor/editor-props';
 
 import { type SetValueMeta } from '../../bound-prop-context';
+import { type ExtendedOption } from '../../utils/size-control';
 
-type LengthUnit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh' | 'ch';
-type AngleUnit = 'deg' | 'rad' | 'grad' | 'turn';
-type TimeUnit = 's' | 'ms';
-
-type Unit = LengthUnit | AngleUnit | TimeUnit;
-
-export type ExtendedSizeOption = 'auto' | 'custom';
-
-export type SizeUnit = Unit | ExtendedSizeOption;
-
+export type ExtendedSizeOption = ExtendedOption;
+export type { SizeUnit } from '../../utils/size-control';
 export type SizeVariant = 'length' | 'angle' | 'time';
 
 export type SetSizeValue< T > = ( value: T, options?: CreateOptions, meta?: SetValueMeta ) => void;

package/src/controls/size-control.tsx

@@ -19,10 +19,12 @@ import {
 	isUnitExtendedOption,
 	type LengthUnit,
 	lengthUnits,
+	type SizeUnit,
 	type TimeUnit,
 	timeUnits,
 	type Unit,
 } from '../utils/size-control';
+import { getPropTypeSettings } from './size-control/utils/settings/get-prop-type-settings';
 
 type SizeValue = SizePropValue[ 'value' ];
 
@@ -65,7 +67,7 @@ export type SizeControlProps = LengthSizeControlProps | AngleSizeControlProps |
 type State = {
 	numeric: number;
 	custom: string;
-	unit: Unit | ExtendedOption;
+	unit: SizeUnit;
 };
 
 const defaultSelectedUnit: Record< SizeControlProps[ 'variant' ], Unit > = {
@@ -133,7 +135,7 @@ export const SizeControl = createControl(
 		const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = actualDefaultUnit } =
 			extractValueFromState( state, true ) || {};
 
-		const handleUnitChange = ( newUnit: Unit | ExtendedOption ) => {
+		const handleUnitChange = ( newUnit: SizeUnit ) => {
 			if ( newUnit === 'custom' ) {
 				popupState.open( anchorRef?.current );
 			}
@@ -217,17 +219,17 @@ function resolveUnits(
 	variant: SizeVariant,
 	externalUnits?: Unit[],
 	actualExtendedOptions?: ExtendedOption[]
-) {
+): SizeUnit[] {
 	const fallback = [ ...defaultUnits[ variant ] ];
 
 	if ( ! enablePropTypeUnits ) {
 		return [ ...( externalUnits ?? fallback ), ...( actualExtendedOptions || [] ) ];
 	}
 
-	return ( propType.settings?.available_units as Unit[] ) ?? fallback;
+	return getPropTypeSettings( propType )?.available_units ?? fallback;
 }
 
-function formatSize< TSize extends string | number >( size: TSize, unit: Unit | ExtendedOption ): TSize {
+function formatSize< TSize extends string | number >( size: TSize, unit: SizeUnit ): TSize {
 	if ( isUnitExtendedOption( unit ) ) {
 		return unit === 'auto' ? ( '' as TSize ) : ( String( size ?? '' ) as TSize );
 	}
@@ -237,7 +239,7 @@ function formatSize< TSize extends string | number >( size: TSize, unit: Unit |
 
 function createStateFromSizeProp(
 	sizeValue: SizeValue | null,
-	defaultUnit: Unit | ExtendedOption,
+	defaultUnit: SizeUnit,
 	defaultSize: string | number = '',
 	customState: string = ''
 ): State {

package/src/utils/size-control.ts

@@ -1,18 +1,23 @@
-export const lengthUnits = [ 'px', '%', 'em', 'rem', 'vw', 'vh', 'ch' ] as const;
-export const angleUnits = [ 'deg', 'rad', 'grad', 'turn' ] as const;
-export const timeUnits = [ 's', 'ms' ] as const;
-const defaultExtendedOptions = [ 'auto', 'custom' ] as const;
+import type { SizePropValue } from '@elementor/editor-props';
 
-export const DEFAULT_UNIT = 'px';
+export type SizeUnit = SizePropValue[ 'value' ][ 'unit' ];
+
+export type ExtendedOption = Extract< SizeUnit, 'auto' | 'custom' >;
+export type Unit = Exclude< SizeUnit, ExtendedOption >;
+
+export const lengthUnits = [ 'px', '%', 'em', 'rem', 'vw', 'vh', 'ch' ] as const satisfies readonly Unit[];
+export const angleUnits = [ 'deg', 'rad', 'grad', 'turn' ] as const satisfies readonly Unit[];
+export const timeUnits = [ 's', 'ms' ] as const satisfies readonly Unit[];
+
+export const DEFAULT_UNIT = 'px' satisfies Unit;
 export const DEFAULT_SIZE = NaN;
 
-export type LengthUnit = ( typeof lengthUnits )[ number ];
+export type LengthUnit = Extract< Unit, ( typeof lengthUnits )[ number ] | 'fr' >;
 export type AngleUnit = ( typeof angleUnits )[ number ];
 export type TimeUnit = ( typeof timeUnits )[ number ];
-export type ExtendedOption = ( typeof defaultExtendedOptions )[ number ];
 
-export type Unit = LengthUnit | AngleUnit | TimeUnit;
+const extendedOptions = [ 'auto', 'custom' ] as const satisfies readonly ExtendedOption[];
 
-export function isUnitExtendedOption( unit: Unit | ExtendedOption ): unit is ExtendedOption {
-	return defaultExtendedOptions.includes( unit as ExtendedOption );
+export function isUnitExtendedOption( unit: SizeUnit ): unit is ExtendedOption {
+	return extendedOptions.includes( unit as ExtendedOption );
 }