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

package/dist/index.mjs

@@ -5765,6 +5765,7 @@ import {
 } from "@elementor/editor-props";
 import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
 import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box20, Typography as Typography8 } from "@elementor/ui";
+import { hasProInstalled as hasProInstalled2 } from "@elementor/utils";
 import { __ as __50 } from "@wordpress/i18n";
 
 // src/controls/selection-size-control.tsx
@@ -5818,9 +5819,9 @@ var MIN_PRO_VERSION = "3.35";
 var getIsSiteRtl = () => {
   return !!window.elementorFrontend?.config?.is_rtl;
 };
-var shouldExtendTransitionProperties = () => {
+var shouldShowAllTransitionProperties = () => {
   if (!hasProInstalled()) {
-    return false;
+    return true;
   }
   const proVersion = window.elementorPro?.config?.version;
   if (!proVersion) {
@@ -5957,7 +5958,7 @@ var createTransitionPropertiesList = () => {
       ]
     }
   ];
-  return shouldExtendTransitionProperties() ? baseProperties : [baseProperties[0]];
+  return shouldShowAllTransitionProperties() ? baseProperties : [baseProperties[0]];
 };
 var transitionProperties = createTransitionPropertiesList();
 var transitionsItemsList = transitionProperties.map((category) => ({
@@ -6306,6 +6307,7 @@ var TransitionRepeaterControl = createControl(
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
     const [recentlyUsedList, setRecentlyUsedList] = useState16([]);
+    const proInstalled = hasProInstalled2();
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
     const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo13(
       () => getDisabledItemLabels(value),
@@ -6314,10 +6316,14 @@ var TransitionRepeaterControl = createControl(
     const allowedTransitionSet = useMemo13(() => {
       const set = /* @__PURE__ */ new Set();
       transitionProperties.forEach((category) => {
-        category.properties.forEach((prop) => set.add(prop.value));
+        category.properties.forEach((prop) => {
+          if (!prop.isDisabled || proInstalled) {
+            set.add(prop.value);
+          }
+        });
       });
       return set;
-    }, []);
+    }, [proInstalled]);
     useEffect11(() => {
       if (!value || value.length === 0) {
         return;
@@ -7003,7 +7009,7 @@ var menuItemContentStyles = {
 };
 var UnitSelector = ({
   value,
-  isActive,
+  isUnitHighlighted,
   onSelect,
   options,
   disabled,
@@ -7018,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,
@@ -7039,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" })
@@ -7111,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
           }
@@ -7121,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";
@@ -7194,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;
@@ -7239,8 +7253,7 @@ var SizeComponent = ({
         onClick: handleSizeFieldClick
       },
       unitSelectorProps: {
-        menuItemsAttributes: hasCustomUnitOption ? { custom: popupAttributes } : void 0,
-        isActive: isUnitActive
+        menuItemsAttributes: hasCustomUnitOption ? { custom: popupAttributes } : void 0
       },
       ...sizeFieldProps
     }
@@ -7268,7 +7281,6 @@ var resolveBoundPropValue = (value, boundPropPlaceholder, propPlaceholder) => {
   }
   return {
     sizeValue,
-    isUnitHighlighted: shouldHighlightUnit(value),
     placeholder: resolvePlaceholder(propPlaceholder, boundPropPlaceholder)
   };
 };
@@ -7292,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) => {
@@ -7348,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 = () => {
@@ -7383,7 +7382,6 @@ var UnstableSizeControl = createControl(
         anchorRef,
         placeholder,
         defaultUnit,
-        isUnitActive: isUnitHighlighted,
         onBlur: handleBlur,
         setValue: handleChange,
         SizeFieldWrapper: ControlActions,