@elementor/editor-controls 4.1.0-725 → 4.1.0-726

package/dist/index.mjs

@@ -7009,7 +7009,7 @@ var menuItemContentStyles = {
 };
 var UnitSelector = ({
   value,
-  isActive,
+  isUnitHighlighted,
   onSelect,
   options,
   disabled,
@@ -7024,7 +7024,16 @@ var UnitSelector = ({
     onSelect(option);
     popupState.close();
   };
-  return /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(StyledButton2, { isActive, disabled, size: "small", ...bindTrigger6(popupState) }, optionLabelOverrides[value] ?? value), /* @__PURE__ */ React104.createElement(Menu3, { MenuListProps: { dense: true }, ...bindMenu2(popupState) }, options.map((option) => /* @__PURE__ */ React104.createElement(
+  return /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(
+    StyledButton2,
+    {
+      isHighlighted: isUnitHighlighted,
+      disabled,
+      size: "small",
+      ...bindTrigger6(popupState)
+    },
+    optionLabelOverrides[value] ?? value
+  ), /* @__PURE__ */ React104.createElement(Menu3, { MenuListProps: { dense: true }, ...bindMenu2(popupState) }, options.map((option) => /* @__PURE__ */ React104.createElement(
     MenuListItem7,
     {
       key: option,
@@ -7045,19 +7054,14 @@ var UnitSelector = ({
   ))));
 };
 var StyledButton2 = styled9(Button6, {
-  shouldForwardProp: (prop) => prop !== "isActive"
-})(({ isActive, theme }) => ({
-  color: isActive ? theme.palette.text.primary : theme.palette.text.tertiary,
+  shouldForwardProp: (prop) => prop !== "isHighlighted"
+})(({ isHighlighted, theme }) => ({
+  color: isHighlighted ? theme.palette.text.primary : theme.palette.text.tertiary,
   font: "inherit",
   minWidth: "initial",
   textTransform: "uppercase"
 }));
 
-// src/controls/size-control/utils/has-size-value.ts
-var hasSizeValue = (size) => {
-  return Boolean(size) || size === 0;
-};
-
 // src/controls/size-control/size-field.tsx
 var UNIT_DISPLAY_LABELS_OVERRIDES = {
   custom: /* @__PURE__ */ React105.createElement(MathFunctionIcon3, { fontSize: "tiny" })
@@ -7117,7 +7121,7 @@ var SizeField = ({
             options: units2,
             value: unit,
             onSelect: handleUnitChange,
-            isActive: unitSelectorProps?.isActive ?? hasSizeValue(size),
+            isUnitHighlighted: shouldHighlightUnit({ size, unit }),
             ...unitSelectorProps,
             optionLabelOverrides: UNIT_DISPLAY_LABELS_OVERRIDES
           }
@@ -7127,6 +7131,15 @@ var SizeField = ({
     }
   );
 };
+var shouldHighlightUnit = (value) => {
+  if (!value) {
+    return false;
+  }
+  if (value.unit === EXTENDED_UNITS.auto) {
+    return true;
+  }
+  return Boolean(value.size) || value.size === 0;
+};
 
 // src/controls/size-control/ui/text-field-popover.tsx
 import * as React106 from "react";
@@ -7200,12 +7213,7 @@ var TextFieldPopover2 = ({ popupState, anchorRef, value, onChange, onClose }) =>
 };
 
 // src/controls/size-control/size-component.tsx
-var SizeComponent = ({
-  anchorRef,
-  isUnitActive,
-  SizeFieldWrapper = React107.Fragment,
-  ...sizeFieldProps
-}) => {
+var SizeComponent = ({ anchorRef, SizeFieldWrapper = React107.Fragment, ...sizeFieldProps }) => {
   const popupState = usePopupState9({ variant: "popover" });
   const activeBreakpoint = useActiveBreakpoint4();
   const isCustomUnit = sizeFieldProps?.value?.unit === EXTENDED_UNITS.custom;
@@ -7245,8 +7253,7 @@ var SizeComponent = ({
         onClick: handleSizeFieldClick
       },
       unitSelectorProps: {
-        menuItemsAttributes: hasCustomUnitOption ? { custom: popupAttributes } : void 0,
-        isActive: isUnitActive
+        menuItemsAttributes: hasCustomUnitOption ? { custom: popupAttributes } : void 0
       },
       ...sizeFieldProps
     }
@@ -7274,7 +7281,6 @@ var resolveBoundPropValue = (value, boundPropPlaceholder, propPlaceholder) => {
   }
   return {
     sizeValue,
-    isUnitHighlighted: shouldHighlightUnit(value),
     placeholder: resolvePlaceholder(propPlaceholder, boundPropPlaceholder)
   };
 };
@@ -7298,15 +7304,6 @@ var resolvePlaceholder = (propPlaceholder, boundPropPlaceholder) => {
   }
   return size;
 };
-var shouldHighlightUnit = (value) => {
-  if (!value) {
-    return false;
-  }
-  if (value.unit === EXTENDED_UNITS.auto) {
-    return true;
-  }
-  return hasSizeValue(value.size);
-};
 
 // src/controls/size-control/utils/settings/get-prop-type-settings.ts
 var getPropTypeSettings = (propType) => {
@@ -7354,11 +7351,7 @@ var UnstableSizeControl = createControl(
       placeholder: boundPropPlaceholder,
       restoreValue
     } = useBoundProp(sizePropTypeUtil6);
-    const { sizeValue, isUnitHighlighted, placeholder } = resolveBoundPropValue(
-      value,
-      boundPropPlaceholder,
-      propPlaceholder
-    );
+    const { sizeValue, placeholder } = resolveBoundPropValue(value, boundPropPlaceholder, propPlaceholder);
     const units2 = getSizeUnits(propType, variant);
     const defaultUnit = getDefaultUnit(propType);
     const handleBlur = () => {
@@ -7389,7 +7382,6 @@ var UnstableSizeControl = createControl(
         anchorRef,
         placeholder,
         defaultUnit,
-        isUnitActive: isUnitHighlighted,
         onBlur: handleBlur,
         setValue: handleChange,
         SizeFieldWrapper: ControlActions,