@elementor/editor-controls 4.5.0-1154 → 4.5.0-1156

package/dist/index.js

@@ -1658,17 +1658,17 @@ var SizeControl = createControl(
     const actualUnits = resolveUnits(propType, enablePropTypeUnits, variant, units2, actualExtendedOptions);
     const popupState = (0, import_ui17.usePopupState)({ variant: "popover" });
     const memorizedExternalState = (0, import_react16.useMemo)(
-      () => createStateFromSizeProp(sizeValue, actualDefaultUnit),
+      () => sizeValue ? createStateFromSizeProp(sizeValue, actualDefaultUnit) : null,
       [sizeValue, actualDefaultUnit]
     );
     const [state, setState] = useSyncExternalState({
       external: memorizedExternalState,
       setExternal: (newState, options, meta) => setSizeValue(extractValueFromState(newState), options, meta),
       persistWhen: (newState) => !!extractValueFromState(newState),
-      fallback: (newState) => ({
-        unit: newState?.unit ?? actualDefaultUnit,
-        numeric: newState?.numeric ?? DEFAULT_SIZE,
-        custom: newState?.custom ?? ""
+      fallback: (prevState) => ({
+        unit: prevState?.unit && !isUnitExtendedOption(prevState.unit) ? prevState.unit : actualDefaultUnit,
+        numeric: DEFAULT_SIZE,
+        custom: ""
       })
     });
     const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = actualDefaultUnit } = extractValueFromState(state, true) || {};
@@ -3664,6 +3664,13 @@ var createDefaultSizeValue = (units2, defaultUnit) => {
   }
   return { size: DEFAULT_SIZE2, unit };
 };
+var createEmptySizeValue = (previousValue, units2, defaultUnit) => {
+  const previousUnit = previousValue?.unit;
+  if (!previousUnit || isExtendedUnit(previousUnit) || !units2.includes(previousUnit)) {
+    return createDefaultSizeValue(units2, defaultUnit);
+  }
+  return { size: DEFAULT_SIZE2, unit: previousUnit };
+};
 var resolveFallbackUnit = (unit, units2, defaultUnit) => {
   if (units2.includes(unit)) {
     return unit;
@@ -3718,7 +3725,7 @@ var useSizeValue = ({
       }
     },
     persistWhen: (next) => hasChanged(next, resolvedValue),
-    fallback: () => createDefaultSizeValue(units2, defaultUnit)
+    fallback: (previousValue) => createEmptySizeValue(previousValue, units2, defaultUnit)
   });
   const [unit, setUnit] = useUnitSync({
     sizeValue,
@@ -4154,16 +4161,19 @@ var UnstableSizeControl = createControl(
       restoreValue
     } = useBoundProp(import_editor_props21.sizePropTypeUtil);
     const lastNonAutoValue = (0, import_react40.useRef)(null);
-    const { sizeValue, placeholder } = resolveBoundPropValue(
+    const clearedUnit = (0, import_react40.useRef)(null);
+    const { sizeValue: resolvedSizeValue, placeholder } = resolveBoundPropValue(
       value ?? lastNonAutoValue.current,
       boundPropPlaceholder,
       propPlaceholder
     );
+    const sizeValue = applyClearedUnit(resolvedSizeValue, value, clearedUnit.current);
     const units2 = getSizeUnits(propType, variant);
     const defaultUnit = getDefaultUnit(propType);
     const handleBlur = () => {
       const isRequired = propType.settings.required;
       if (shouldNullifyValue(value) && !isRequired) {
+        clearedUnit.current = value?.unit ?? null;
         setValue(null);
       }
       if (isRequired) {
@@ -4171,6 +4181,7 @@ var UnstableSizeControl = createControl(
       }
     };
     const handleChange = (newValue, options, meta) => {
+      clearedUnit.current = null;
       if (isTransitioningFromExtendedUnit(newValue, value)) {
         lastNonAutoValue.current = newValue;
         setValue(null);
@@ -4204,6 +4215,12 @@ var UnstableSizeControl = createControl(
     );
   }
 );
+var applyClearedUnit = (resolvedValue, boundValue, clearedUnit) => {
+  if (boundValue || !resolvedValue || !clearedUnit) {
+    return resolvedValue;
+  }
+  return { ...resolvedValue, unit: clearedUnit };
+};
 var isTransitioningFromExtendedUnit = (nextValue, previousValue) => {
   return !isExtendedUnit(nextValue.unit) && isExtendedUnit(previousValue?.unit) && nextValue.size === "";
 };