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

package/dist/index.d.mts

@@ -666,7 +666,7 @@ type UnitSelectorProps<T extends string> = {
     options: T[];
     value: T;
     onSelect: (value: T) => void;
-    isActive: boolean;
+    isUnitHighlighted: boolean;
     menuItemsAttributes?: {
         [key in T]?: Record<string, unknown>;
     };
@@ -698,12 +698,11 @@ type SizeValue = SizePropValue['value'];
 type SizeUnit = SizePropValue['value']['unit'];
 type Props$1 = SizeFieldProps<SizeValue, SizeUnit> & {
     anchorRef?: RefObject<HTMLDivElement | null>;
-    isUnitActive?: boolean;
     SizeFieldWrapper?: React$1.ComponentType<{
         children: React$1.ReactNode;
     }>;
 };
-declare const SizeComponent: ({ anchorRef, isUnitActive, SizeFieldWrapper, ...sizeFieldProps }: Props$1) => React$1.JSX.Element;
+declare const SizeComponent: ({ anchorRef, SizeFieldWrapper, ...sizeFieldProps }: Props$1) => React$1.JSX.Element;
 
 type AnyComponentType = ComponentType<any>;
 declare const brandSymbol: unique symbol;

package/dist/index.d.ts

@@ -666,7 +666,7 @@ type UnitSelectorProps<T extends string> = {
     options: T[];
     value: T;
     onSelect: (value: T) => void;
-    isActive: boolean;
+    isUnitHighlighted: boolean;
     menuItemsAttributes?: {
         [key in T]?: Record<string, unknown>;
     };
@@ -698,12 +698,11 @@ type SizeValue = SizePropValue['value'];
 type SizeUnit = SizePropValue['value']['unit'];
 type Props$1 = SizeFieldProps<SizeValue, SizeUnit> & {
     anchorRef?: RefObject<HTMLDivElement | null>;
-    isUnitActive?: boolean;
     SizeFieldWrapper?: React$1.ComponentType<{
         children: React$1.ReactNode;
     }>;
 };
-declare const SizeComponent: ({ anchorRef, isUnitActive, SizeFieldWrapper, ...sizeFieldProps }: Props$1) => React$1.JSX.Element;
+declare const SizeComponent: ({ anchorRef, SizeFieldWrapper, ...sizeFieldProps }: Props$1) => React$1.JSX.Element;
 
 type AnyComponentType = ComponentType<any>;
 declare const brandSymbol: unique symbol;

package/dist/index.js

@@ -7030,7 +7030,7 @@ var menuItemContentStyles = {
 };
 var UnitSelector = ({
   value,
-  isActive,
+  isUnitHighlighted,
   onSelect,
   options,
   disabled,
@@ -7045,7 +7045,16 @@ var UnitSelector = ({
     onSelect(option);
     popupState.close();
   };
-  return /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(StyledButton2, { isActive, disabled, size: "small", ...(0, import_ui89.bindTrigger)(popupState) }, optionLabelOverrides[value] ?? value), /* @__PURE__ */ React104.createElement(import_ui89.Menu, { MenuListProps: { dense: true }, ...(0, import_ui89.bindMenu)(popupState) }, options.map((option) => /* @__PURE__ */ React104.createElement(
+  return /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(
+    StyledButton2,
+    {
+      isHighlighted: isUnitHighlighted,
+      disabled,
+      size: "small",
+      ...(0, import_ui89.bindTrigger)(popupState)
+    },
+    optionLabelOverrides[value] ?? value
+  ), /* @__PURE__ */ React104.createElement(import_ui89.Menu, { MenuListProps: { dense: true }, ...(0, import_ui89.bindMenu)(popupState) }, options.map((option) => /* @__PURE__ */ React104.createElement(
     import_editor_ui14.MenuListItem,
     {
       key: option,
@@ -7066,19 +7075,14 @@ var UnitSelector = ({
   ))));
 };
 var StyledButton2 = (0, import_ui89.styled)(import_ui89.Button, {
-  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(import_icons34.MathFunctionIcon, { fontSize: "tiny" })
@@ -7138,7 +7142,7 @@ var SizeField = ({
             options: units2,
             value: unit,
             onSelect: handleUnitChange,
-            isActive: unitSelectorProps?.isActive ?? hasSizeValue(size),
+            isUnitHighlighted: shouldHighlightUnit({ size, unit }),
             ...unitSelectorProps,
             optionLabelOverrides: UNIT_DISPLAY_LABELS_OVERRIDES
           }
@@ -7148,6 +7152,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
 var React106 = __toESM(require("react"));
@@ -7221,12 +7234,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 = (0, import_ui92.usePopupState)({ variant: "popover" });
   const activeBreakpoint = (0, import_editor_responsive4.useActiveBreakpoint)();
   const isCustomUnit = sizeFieldProps?.value?.unit === EXTENDED_UNITS.custom;
@@ -7266,8 +7274,7 @@ var SizeComponent = ({
         onClick: handleSizeFieldClick
       },
       unitSelectorProps: {
-        menuItemsAttributes: hasCustomUnitOption ? { custom: popupAttributes } : void 0,
-        isActive: isUnitActive
+        menuItemsAttributes: hasCustomUnitOption ? { custom: popupAttributes } : void 0
       },
       ...sizeFieldProps
     }
@@ -7295,7 +7302,6 @@ var resolveBoundPropValue = (value, boundPropPlaceholder, propPlaceholder) => {
   }
   return {
     sizeValue,
-    isUnitHighlighted: shouldHighlightUnit(value),
     placeholder: resolvePlaceholder(propPlaceholder, boundPropPlaceholder)
   };
 };
@@ -7319,15 +7325,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) => {
@@ -7375,11 +7372,7 @@ var UnstableSizeControl = createControl(
       placeholder: boundPropPlaceholder,
       restoreValue
     } = useBoundProp(import_editor_props56.sizePropTypeUtil);
-    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 = () => {
@@ -7410,7 +7403,6 @@ var UnstableSizeControl = createControl(
         anchorRef,
         placeholder,
         defaultUnit,
-        isUnitActive: isUnitHighlighted,
         onBlur: handleBlur,
         setValue: handleChange,
         SizeFieldWrapper: ControlActions,