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

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

@@ -5789,6 +5789,7 @@ var import_react50 = require("react");
 var import_editor_props50 = require("@elementor/editor-props");
 var import_icons33 = require("@elementor/icons");
 var import_ui84 = require("@elementor/ui");
+var import_utils7 = require("@elementor/utils");
 var import_i18n50 = require("@wordpress/i18n");
 
 // src/controls/selection-size-control.tsx
@@ -5842,9 +5843,9 @@ var MIN_PRO_VERSION = "3.35";
 var getIsSiteRtl = () => {
   return !!window.elementorFrontend?.config?.is_rtl;
 };
-var shouldExtendTransitionProperties = () => {
+var shouldShowAllTransitionProperties = () => {
   if (!(0, import_utils6.hasProInstalled)()) {
-    return false;
+    return true;
   }
   const proVersion = window.elementorPro?.config?.version;
   if (!proVersion) {
@@ -5981,7 +5982,7 @@ var createTransitionPropertiesList = () => {
       ]
     }
   ];
-  return shouldExtendTransitionProperties() ? baseProperties : [baseProperties[0]];
+  return shouldShowAllTransitionProperties() ? baseProperties : [baseProperties[0]];
 };
 var transitionProperties = createTransitionPropertiesList();
 var transitionsItemsList = transitionProperties.map((category) => ({
@@ -6330,6 +6331,7 @@ var TransitionRepeaterControl = createControl(
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
     const [recentlyUsedList, setRecentlyUsedList] = (0, import_react50.useState)([]);
+    const proInstalled = (0, import_utils7.hasProInstalled)();
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
     const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react50.useMemo)(
       () => getDisabledItemLabels(value),
@@ -6338,10 +6340,14 @@ var TransitionRepeaterControl = createControl(
     const allowedTransitionSet = (0, import_react50.useMemo)(() => {
       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]);
     (0, import_react50.useEffect)(() => {
       if (!value || value.length === 0) {
         return;
@@ -6466,7 +6472,7 @@ var React101 = __toESM(require("react"));
 var import_react53 = require("react");
 var import_editor_props53 = require("@elementor/editor-props");
 var import_ui87 = require("@elementor/ui");
-var import_utils7 = require("@elementor/utils");
+var import_utils8 = require("@elementor/utils");
 
 // src/components/inline-editor.tsx
 var React100 = __toESM(require("react"));
@@ -6649,7 +6655,7 @@ var InlineEditingControl = createControl(
     const { value, setValue } = useBoundProp(import_editor_props53.htmlV3PropTypeUtil);
     const content = import_editor_props53.stringPropTypeUtil.extract(value?.content ?? null) ?? "";
     const debouncedParse = (0, import_react53.useMemo)(
-      () => (0, import_utils7.debounce)((html) => {
+      () => (0, import_utils8.debounce)((html) => {
         const parsed = (0, import_editor_props53.parseHtmlChildren)(html);
         setValue({
           content: parsed.content ? import_editor_props53.stringPropTypeUtil.create(parsed.content) : null,
@@ -7024,7 +7030,7 @@ var menuItemContentStyles = {
 };
 var UnitSelector = ({
   value,
-  isActive,
+  isUnitHighlighted,
   onSelect,
   options,
   disabled,
@@ -7039,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,
@@ -7060,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" })
@@ -7132,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
           }
@@ -7142,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"));
@@ -7215,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;
@@ -7260,8 +7274,7 @@ var SizeComponent = ({
         onClick: handleSizeFieldClick
       },
       unitSelectorProps: {
-        menuItemsAttributes: hasCustomUnitOption ? { custom: popupAttributes } : void 0,
-        isActive: isUnitActive
+        menuItemsAttributes: hasCustomUnitOption ? { custom: popupAttributes } : void 0
       },
       ...sizeFieldProps
     }
@@ -7289,7 +7302,6 @@ var resolveBoundPropValue = (value, boundPropPlaceholder, propPlaceholder) => {
   }
   return {
     sizeValue,
-    isUnitHighlighted: shouldHighlightUnit(value),
     placeholder: resolvePlaceholder(propPlaceholder, boundPropPlaceholder)
   };
 };
@@ -7313,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) => {
@@ -7369,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 = () => {
@@ -7404,7 +7403,6 @@ var UnstableSizeControl = createControl(
         anchorRef,
         placeholder,
         defaultUnit,
-        isUnitActive: isUnitHighlighted,
         onBlur: handleBlur,
         setValue: handleChange,
         SizeFieldWrapper: ControlActions,