@elementor/editor-controls 3.35.0-487 → 3.35.0-488

package/dist/index.mjs

@@ -2907,7 +2907,9 @@ var ItemSelector = ({
   },
   icon,
   disabledItems,
-  id = "item-selector"
+  id = "item-selector",
+  footer,
+  categoryItemContentTemplate
 }) => {
   const [searchValue, setSearchValue] = useState9("");
   const filteredItemsList = useFilteredItemsList(itemsList, searchValue, disabledItems);
@@ -2927,7 +2929,7 @@ var ItemSelector = ({
       placeholder: __19("Search", "elementor"),
       id: id + "-search"
     }
-  ), /* @__PURE__ */ React58.createElement(Divider2, null), filteredItemsList.length > 0 ? /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React58.createElement(Divider2, null), /* @__PURE__ */ React58.createElement(Box8, { sx: { flex: 1, overflow: "auto", minHeight: 0 } }, filteredItemsList.length > 0 ? /* @__PURE__ */ React58.createElement(
     ItemList,
     {
       itemListItems: filteredItemsList,
@@ -2935,7 +2937,8 @@ var ItemSelector = ({
       handleClose,
       selectedItem,
       itemStyle,
-      onDebounce
+      onDebounce,
+      categoryItemContentTemplate
     }
   ) : /* @__PURE__ */ React58.createElement(
     Stack9,
@@ -2986,7 +2989,7 @@ var ItemSelector = ({
         __19("Clear & try again", "elementor")
       )
     )
-  ));
+  )), footer);
 };
 var ItemList = ({
   itemListItems,
@@ -2995,7 +2998,8 @@ var ItemList = ({
   selectedItem,
   itemStyle = () => ({}),
   onDebounce = () => {
-  }
+  },
+  categoryItemContentTemplate
 }) => {
   const selectedItemFound = itemListItems.find((item) => item.value === selectedItem);
   const debouncedVirtualizeChange = useDebounce((visibleItems) => {
@@ -3015,7 +3019,8 @@ var ItemList = ({
       onSelect: setSelectedItem,
       onClose: handleClose,
       itemStyle: memoizedItemStyle,
-      "data-testid": "item-list"
+      "data-testid": "item-list",
+      categoryItemContentTemplate
     }
   );
 };
@@ -5568,13 +5573,13 @@ var TransformBasePopoverTrigger = ({
 
 // src/controls/transition-control/transition-repeater-control.tsx
 import * as React97 from "react";
-import { useEffect as useEffect10, useMemo as useMemo13, useState as useState17 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo14, useState as useState17 } from "react";
 import {
   createArrayPropUtils as createArrayPropUtils2,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
 } from "@elementor/editor-props";
 import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
-import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box20, Typography as Typography7 } from "@elementor/ui";
+import { Alert as Alert3, AlertTitle as AlertTitle3, Box as Box20, Typography as Typography7 } from "@elementor/ui";
 import { __ as __49 } from "@wordpress/i18n";
 
 // src/controls/selection-size-control.tsx
@@ -5612,6 +5617,7 @@ var SelectionSizeControl = createControl(
 );
 
 // src/controls/transition-control/data.ts
+import { isVersionGreaterOrEqual } from "@elementor/utils";
 import { __ as __47 } from "@wordpress/i18n";
 var initialTransitionValue = {
   selection: {
@@ -5623,13 +5629,125 @@ var initialTransitionValue = {
   },
   size: { $$type: "size", value: { size: 200, unit: "ms" } }
 };
-var transitionProperties = [
-  {
-    label: __47("Default", "elementor"),
-    type: "category",
-    properties: [{ label: __47("All properties", "elementor"), value: "all" }]
+var MIN_PRO_VERSION = "3.35";
+var shouldExtendTransitionProperties = () => {
+  const hasProInstalled = !!window.elementorPro;
+  if (!hasProInstalled) {
+    return true;
   }
-];
+  const proVersion = window.elementorPro?.config?.version;
+  if (!proVersion) {
+    return false;
+  }
+  return isVersionGreaterOrEqual(proVersion, MIN_PRO_VERSION);
+};
+var createTransitionPropertiesList = () => {
+  const baseProperties = [
+    {
+      label: __47("Default", "elementor"),
+      type: "category",
+      properties: [{ label: __47("All properties", "elementor"), value: "all" }]
+    },
+    {
+      label: __47("Margin", "elementor"),
+      type: "category",
+      properties: [
+        { label: __47("Margin (all)", "elementor"), value: "margin", isDisabled: true },
+        { label: __47("Margin bottom", "elementor"), value: "margin-block-end", isDisabled: true },
+        { label: __47("Margin left", "elementor"), value: "margin-inline-start", isDisabled: true },
+        { label: __47("Margin right", "elementor"), value: "margin-inline-end", isDisabled: true },
+        { label: __47("Margin top", "elementor"), value: "margin-block-start", isDisabled: true }
+      ]
+    },
+    {
+      label: __47("Padding", "elementor"),
+      type: "category",
+      properties: [
+        { label: __47("Padding (all)", "elementor"), value: "padding", isDisabled: true },
+        { label: __47("Padding bottom", "elementor"), value: "padding-block-end", isDisabled: true },
+        { label: __47("Padding left", "elementor"), value: "padding-inline-start", isDisabled: true },
+        { label: __47("Padding right", "elementor"), value: "padding-inline-end", isDisabled: true },
+        { label: __47("Padding top", "elementor"), value: "padding-block-start", isDisabled: true }
+      ]
+    },
+    {
+      label: __47("Flex", "elementor"),
+      type: "category",
+      properties: [
+        { label: __47("Flex (all)", "elementor"), value: "flex", isDisabled: true },
+        { label: __47("Flex grow", "elementor"), value: "flex-grow", isDisabled: true },
+        { label: __47("Flex shrink", "elementor"), value: "flex-shrink", isDisabled: true },
+        { label: __47("Flex basis", "elementor"), value: "flex-basis", isDisabled: true }
+      ]
+    },
+    {
+      label: __47("Size", "elementor"),
+      type: "category",
+      properties: [
+        { label: __47("Width", "elementor"), value: "width", isDisabled: true },
+        { label: __47("Height", "elementor"), value: "height", isDisabled: true },
+        { label: __47("Max height", "elementor"), value: "max-height", isDisabled: true },
+        { label: __47("Max width", "elementor"), value: "max-width", isDisabled: true },
+        { label: __47("Min height", "elementor"), value: "min-height", isDisabled: true },
+        { label: __47("Min width", "elementor"), value: "min-width", isDisabled: true }
+      ]
+    },
+    {
+      label: __47("Position", "elementor"),
+      type: "category",
+      properties: [
+        { label: __47("Top", "elementor"), value: "inset-block-start", isDisabled: true },
+        { label: __47("Left", "elementor"), value: "inset-inline-start", isDisabled: true },
+        { label: __47("Right", "elementor"), value: "inset-inline-end", isDisabled: true },
+        { label: __47("Bottom", "elementor"), value: "inset-block-end", isDisabled: true },
+        { label: __47("Z-index", "elementor"), value: "z-index", isDisabled: true }
+      ]
+    },
+    {
+      label: __47("Typography", "elementor"),
+      type: "category",
+      properties: [
+        { label: __47("Font color", "elementor"), value: "color", isDisabled: true },
+        { label: __47("Font size", "elementor"), value: "font-size", isDisabled: true },
+        { label: __47("Line height", "elementor"), value: "line-height", isDisabled: true },
+        { label: __47("Letter spacing", "elementor"), value: "letter-spacing", isDisabled: true },
+        { label: __47("Word spacing", "elementor"), value: "word-spacing", isDisabled: true },
+        { label: __47("Font variations", "elementor"), value: "font-variation-settings", isDisabled: true },
+        { label: __47("Text stroke color", "elementor"), value: "-webkit-text-stroke-color", isDisabled: true }
+      ]
+    },
+    {
+      label: __47("Background", "elementor"),
+      type: "category",
+      properties: [
+        { label: __47("Background color", "elementor"), value: "background-color", isDisabled: true },
+        { label: __47("Background position", "elementor"), value: "background-position", isDisabled: true },
+        { label: __47("Box shadow", "elementor"), value: "box-shadow", isDisabled: true }
+      ]
+    },
+    {
+      label: __47("Border", "elementor"),
+      type: "category",
+      properties: [
+        { label: __47("Border (all)", "elementor"), value: "border", isDisabled: true },
+        { label: __47("Border radius", "elementor"), value: "border-radius", isDisabled: true },
+        { label: __47("Border color", "elementor"), value: "border-color", isDisabled: true },
+        { label: __47("Border width", "elementor"), value: "border-width", isDisabled: true }
+      ]
+    },
+    {
+      label: __47("Effects", "elementor"),
+      type: "category",
+      properties: [
+        { label: __47("Opacity", "elementor"), value: "opacity", isDisabled: true },
+        { label: __47("Transform (all)", "elementor"), value: "transform", isDisabled: true },
+        { label: __47("Filter (all)", "elementor"), value: "filter", isDisabled: true }
+      ]
+    }
+  ];
+  return shouldExtendTransitionProperties() ? baseProperties : [baseProperties[0]];
+};
+var transitionProperties = createTransitionPropertiesList();
 var transitionsItemsList = transitionProperties.map((category) => ({
   label: category.label,
   items: category.properties.map((property) => property.label)
@@ -5660,10 +5778,11 @@ function subscribeToTransitionEvent() {
 
 // src/controls/transition-control/transition-selector.tsx
 import * as React96 from "react";
-import { useRef as useRef23 } from "react";
+import { useMemo as useMemo13, useRef as useRef23 } from "react";
 import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
-import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
-import { bindPopover as bindPopover6, bindTrigger as bindTrigger5, Box as Box19, Popover as Popover6, UnstableTag as UnstableTag3, usePopupState as usePopupState7 } from "@elementor/ui";
+import { PromotionChip } from "@elementor/editor-ui";
+import { ChevronDownIcon as ChevronDownIcon3, CrownFilledIcon, VariationsIcon } from "@elementor/icons";
+import { Alert as Alert2, bindPopover as bindPopover6, bindTrigger as bindTrigger5, Box as Box19, Popover as Popover6, UnstableTag as UnstableTag3, usePopupState as usePopupState7 } from "@elementor/ui";
 import { __ as __48 } from "@wordpress/i18n";
 var toTransitionSelectorValue = (label) => {
   for (const category of transitionProperties) {
@@ -5695,9 +5814,11 @@ var includeCurrentValueInOptions = (value, disabledItems) => {
     return item !== value.key.value;
   });
 };
+var PRO_UPGRADE_URL = "https://go.elementor.com/go-pro-transitions-modal/";
 var TransitionSelector = ({
   recentlyUsedList = [],
-  disabledItems = []
+  disabledItems = [],
+  showPromotion = false
 }) => {
   const { value, setValue } = useBoundProp(keyValuePropTypeUtil2);
   const {
@@ -5705,6 +5826,11 @@ var TransitionSelector = ({
   } = value;
   const defaultRef = useRef23(null);
   const popoverState = usePopupState7({ variant: "popover" });
+  const disabledCategories = useMemo13(() => {
+    return new Set(
+      transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
+    );
+  }, []);
   const getItemList = () => {
     const recentItems = recentlyUsedList.map((item) => getTransitionPropertyByValue({ value: item, $$type: "string" })?.label).filter((item) => !!item);
     const filteredItems = transitionsItemsList.map((category) => {
@@ -5774,7 +5900,50 @@ var TransitionSelector = ({
         sectionWidth: 268,
         title: __48("Transition Property", "elementor"),
         icon: VariationsIcon,
-        disabledItems: includeCurrentValueInOptions(value, disabledItems)
+        disabledItems: includeCurrentValueInOptions(value, disabledItems),
+        categoryItemContentTemplate: (item) => /* @__PURE__ */ React96.createElement(
+          Box19,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              width: "100%"
+            }
+          },
+          /* @__PURE__ */ React96.createElement("span", null, item.value),
+          showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React96.createElement(PromotionChip, null)
+        ),
+        footer: showPromotion ? /* @__PURE__ */ React96.createElement(
+          Alert2,
+          {
+            variant: "standard",
+            color: "promotion",
+            icon: false,
+            role: "dialog",
+            "aria-label": "promotion-alert",
+            size: "small",
+            sx: { m: 1.5, mt: 0 }
+          },
+          __48("Upgrade to customize transition properties and control effects.", "elementor"),
+          /* @__PURE__ */ React96.createElement(
+            Box19,
+            {
+              component: "a",
+              href: PRO_UPGRADE_URL,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 0.5,
+                color: "promotion.main"
+              }
+            },
+            /* @__PURE__ */ React96.createElement(CrownFilledIcon, { fontSize: "tiny" }),
+            __48("Upgrade now", "elementor")
+          )
+        ) : null
       }
     )
   ));
@@ -5801,7 +5970,7 @@ var areAllPropertiesUsed = (value = []) => {
     });
   }) : false;
 };
-var getSelectionSizeProps = (recentlyUsedList, disabledItems) => {
+var getSelectionSizeProps = (recentlyUsedList, disabledItems, showPromotion) => {
   return {
     selectionLabel: __49("Type", "elementor"),
     sizeLabel: __49("Duration", "elementor"),
@@ -5809,7 +5978,8 @@ var getSelectionSizeProps = (recentlyUsedList, disabledItems) => {
       component: TransitionSelector,
       props: {
         recentlyUsedList,
-        disabledItems
+        disabledItems,
+        showPromotion
       }
     },
     sizeConfigMap: {
@@ -5829,11 +5999,11 @@ var isItemDisabled = (item) => {
   const property = getTransitionPropertyByValue(item.value.selection.value?.value);
   return !property ? false : !!property.isDisabled;
 };
-var getChildControlConfig = (recentlyUsedList, disabledItems) => {
+var getChildControlConfig = (recentlyUsedList, disabledItems, showPromotion) => {
   return {
     propTypeUtil: selectionSizePropTypeUtil2,
     component: SelectionSizeControl,
-    props: getSelectionSizeProps(recentlyUsedList, disabledItems),
+    props: getSelectionSizeProps(recentlyUsedList, disabledItems, showPromotion),
     isItemDisabled
   };
 };
@@ -5843,14 +6013,18 @@ var isPropertyUsed = (value, property) => {
   });
 };
 var getDisabledItemLabels = (values = []) => {
-  const disabledLabels = (values || []).map(
+  const selectedLabels = (values || []).map(
     (item) => item.value?.selection?.value?.key?.value
   );
+  const proDisabledLabels = [];
   transitionProperties.forEach((category) => {
-    const disabledProperties = category.properties.filter((property) => property.isDisabled && !disabledLabels.includes(property.label)).map((property) => property.label);
-    disabledLabels.push(...disabledProperties);
+    const disabledProperties = category.properties.filter((property) => property.isDisabled && !selectedLabels.includes(property.label)).map((property) => property.label);
+    proDisabledLabels.push(...disabledProperties);
   });
-  return disabledLabels;
+  return {
+    allDisabled: [...selectedLabels, ...proDisabledLabels],
+    proDisabled: proDisabledLabels
+  };
 };
 var getInitialValue = (values = []) => {
   if (!values?.length) {
@@ -5876,7 +6050,7 @@ var getInitialValue = (values = []) => {
   return initialTransitionValue;
 };
 var disableAddItemTooltipContent = /* @__PURE__ */ React97.createElement(
-  Alert2,
+  Alert3,
   {
     sx: {
       width: 280,
@@ -5896,8 +6070,11 @@ var TransitionRepeaterControl = createControl(
     const currentStyleIsNormal = currentStyleState === null;
     const [recentlyUsedList, setRecentlyUsedList] = useState17([]);
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    const disabledItems = useMemo13(() => getDisabledItemLabels(value), [value]);
-    const allowedTransitionSet = useMemo13(() => {
+    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo14(
+      () => getDisabledItemLabels(value),
+      [value]
+    );
+    const allowedTransitionSet = useMemo14(() => {
       const set = /* @__PURE__ */ new Set();
       transitionProperties.forEach((category) => {
         category.properties.forEach((prop) => set.add(prop.value));
@@ -5919,7 +6096,7 @@ var TransitionRepeaterControl = createControl(
     useEffect10(() => {
       recentlyUsedListGetter().then(setRecentlyUsedList);
     }, [recentlyUsedListGetter]);
-    const allPropertiesUsed = useMemo13(() => areAllPropertiesUsed(value), [value]);
+    const allPropertiesUsed = useMemo14(() => areAllPropertiesUsed(value), [value]);
     const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
     return /* @__PURE__ */ React97.createElement(
       RepeatableControl,
@@ -5931,7 +6108,11 @@ var TransitionRepeaterControl = createControl(
         showDuplicate: false,
         showToggle: true,
         initialValues: getInitialValue(value),
-        childControlConfig: getChildControlConfig(recentlyUsedList, disabledItems),
+        childControlConfig: getChildControlConfig(
+          recentlyUsedList,
+          disabledItems,
+          proDisabledItems.length > 0
+        ),
         propKey: "transition",
         addItemTooltipProps: {
           disabled: isAddItemDisabled,
@@ -6059,7 +6240,7 @@ function isEmpty(value = "") {
 
 // src/components/inline-editor-toolbar.tsx
 import * as React100 from "react";
-import { useMemo as useMemo14, useRef as useRef25, useState as useState18 } from "react";
+import { useMemo as useMemo15, useRef as useRef25, useState as useState18 } from "react";
 import { getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
@@ -6225,7 +6406,7 @@ var InlineEditorToolbar = ({ editor, elementId }) => {
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = useMemo14(() => {
+  const formatButtonsList = useMemo15(() => {
     const buttons = Object.values(formatButtons);
     if (hasLinkOnElement) {
       return buttons.filter((button) => button.action !== "link");