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

package/dist/index.d.mts

@@ -223,8 +223,10 @@ type ItemSelectorProps = {
     }>;
     disabledItems?: string[];
     id?: string;
+    footer?: ReactNode;
+    categoryItemContentTemplate?: (item: SelectableItem) => ReactNode;
 };
-declare const ItemSelector: ({ itemsList, selectedItem, onItemChange, onClose, sectionWidth, title, itemStyle, onDebounce, icon, disabledItems, id, }: ItemSelectorProps) => React$1.JSX.Element;
+declare const ItemSelector: ({ itemsList, selectedItem, onItemChange, onClose, sectionWidth, title, itemStyle, onDebounce, icon, disabledItems, id, footer, categoryItemContentTemplate, }: ItemSelectorProps) => React$1.JSX.Element;
 
 declare const UrlControl: ControlComponent$1<({ placeholder, ariaLabel }: {
     placeholder?: string;

package/dist/index.d.ts

@@ -223,8 +223,10 @@ type ItemSelectorProps = {
     }>;
     disabledItems?: string[];
     id?: string;
+    footer?: ReactNode;
+    categoryItemContentTemplate?: (item: SelectableItem) => ReactNode;
 };
-declare const ItemSelector: ({ itemsList, selectedItem, onItemChange, onClose, sectionWidth, title, itemStyle, onDebounce, icon, disabledItems, id, }: ItemSelectorProps) => React$1.JSX.Element;
+declare const ItemSelector: ({ itemsList, selectedItem, onItemChange, onClose, sectionWidth, title, itemStyle, onDebounce, icon, disabledItems, id, footer, categoryItemContentTemplate, }: ItemSelectorProps) => React$1.JSX.Element;
 
 declare const UrlControl: ControlComponent$1<({ placeholder, ariaLabel }: {
     placeholder?: string;

package/dist/index.js

@@ -2971,7 +2971,9 @@ var ItemSelector = ({
   },
   icon,
   disabledItems,
-  id = "item-selector"
+  id = "item-selector",
+  footer,
+  categoryItemContentTemplate
 }) => {
   const [searchValue, setSearchValue] = (0, import_react30.useState)("");
   const filteredItemsList = useFilteredItemsList(itemsList, searchValue, disabledItems);
@@ -2991,7 +2993,7 @@ var ItemSelector = ({
       placeholder: (0, import_i18n19.__)("Search", "elementor"),
       id: id + "-search"
     }
-  ), /* @__PURE__ */ React58.createElement(import_ui43.Divider, null), filteredItemsList.length > 0 ? /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React58.createElement(import_ui43.Divider, null), /* @__PURE__ */ React58.createElement(import_ui43.Box, { sx: { flex: 1, overflow: "auto", minHeight: 0 } }, filteredItemsList.length > 0 ? /* @__PURE__ */ React58.createElement(
     ItemList,
     {
       itemListItems: filteredItemsList,
@@ -2999,7 +3001,8 @@ var ItemSelector = ({
       handleClose,
       selectedItem,
       itemStyle,
-      onDebounce
+      onDebounce,
+      categoryItemContentTemplate
     }
   ) : /* @__PURE__ */ React58.createElement(
     import_ui43.Stack,
@@ -3050,7 +3053,7 @@ var ItemSelector = ({
         (0, import_i18n19.__)("Clear & try again", "elementor")
       )
     )
-  ));
+  )), footer);
 };
 var ItemList = ({
   itemListItems,
@@ -3059,7 +3062,8 @@ var ItemList = ({
   selectedItem,
   itemStyle = () => ({}),
   onDebounce = () => {
-  }
+  },
+  categoryItemContentTemplate
 }) => {
   const selectedItemFound = itemListItems.find((item) => item.value === selectedItem);
   const debouncedVirtualizeChange = useDebounce((visibleItems) => {
@@ -3079,7 +3083,8 @@ var ItemList = ({
       onSelect: setSelectedItem,
       onClose: handleClose,
       itemStyle: memoizedItemStyle,
-      "data-testid": "item-list"
+      "data-testid": "item-list",
+      categoryItemContentTemplate
     }
   );
 };
@@ -5620,6 +5625,7 @@ var SelectionSizeControl = createControl(
 );
 
 // src/controls/transition-control/data.ts
+var import_utils6 = require("@elementor/utils");
 var import_i18n47 = require("@wordpress/i18n");
 var initialTransitionValue = {
   selection: {
@@ -5631,13 +5637,125 @@ var initialTransitionValue = {
   },
   size: { $$type: "size", value: { size: 200, unit: "ms" } }
 };
-var transitionProperties = [
-  {
-    label: (0, import_i18n47.__)("Default", "elementor"),
-    type: "category",
-    properties: [{ label: (0, import_i18n47.__)("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 (0, import_utils6.isVersionGreaterOrEqual)(proVersion, MIN_PRO_VERSION);
+};
+var createTransitionPropertiesList = () => {
+  const baseProperties = [
+    {
+      label: (0, import_i18n47.__)("Default", "elementor"),
+      type: "category",
+      properties: [{ label: (0, import_i18n47.__)("All properties", "elementor"), value: "all" }]
+    },
+    {
+      label: (0, import_i18n47.__)("Margin", "elementor"),
+      type: "category",
+      properties: [
+        { label: (0, import_i18n47.__)("Margin (all)", "elementor"), value: "margin", isDisabled: true },
+        { label: (0, import_i18n47.__)("Margin bottom", "elementor"), value: "margin-block-end", isDisabled: true },
+        { label: (0, import_i18n47.__)("Margin left", "elementor"), value: "margin-inline-start", isDisabled: true },
+        { label: (0, import_i18n47.__)("Margin right", "elementor"), value: "margin-inline-end", isDisabled: true },
+        { label: (0, import_i18n47.__)("Margin top", "elementor"), value: "margin-block-start", isDisabled: true }
+      ]
+    },
+    {
+      label: (0, import_i18n47.__)("Padding", "elementor"),
+      type: "category",
+      properties: [
+        { label: (0, import_i18n47.__)("Padding (all)", "elementor"), value: "padding", isDisabled: true },
+        { label: (0, import_i18n47.__)("Padding bottom", "elementor"), value: "padding-block-end", isDisabled: true },
+        { label: (0, import_i18n47.__)("Padding left", "elementor"), value: "padding-inline-start", isDisabled: true },
+        { label: (0, import_i18n47.__)("Padding right", "elementor"), value: "padding-inline-end", isDisabled: true },
+        { label: (0, import_i18n47.__)("Padding top", "elementor"), value: "padding-block-start", isDisabled: true }
+      ]
+    },
+    {
+      label: (0, import_i18n47.__)("Flex", "elementor"),
+      type: "category",
+      properties: [
+        { label: (0, import_i18n47.__)("Flex (all)", "elementor"), value: "flex", isDisabled: true },
+        { label: (0, import_i18n47.__)("Flex grow", "elementor"), value: "flex-grow", isDisabled: true },
+        { label: (0, import_i18n47.__)("Flex shrink", "elementor"), value: "flex-shrink", isDisabled: true },
+        { label: (0, import_i18n47.__)("Flex basis", "elementor"), value: "flex-basis", isDisabled: true }
+      ]
+    },
+    {
+      label: (0, import_i18n47.__)("Size", "elementor"),
+      type: "category",
+      properties: [
+        { label: (0, import_i18n47.__)("Width", "elementor"), value: "width", isDisabled: true },
+        { label: (0, import_i18n47.__)("Height", "elementor"), value: "height", isDisabled: true },
+        { label: (0, import_i18n47.__)("Max height", "elementor"), value: "max-height", isDisabled: true },
+        { label: (0, import_i18n47.__)("Max width", "elementor"), value: "max-width", isDisabled: true },
+        { label: (0, import_i18n47.__)("Min height", "elementor"), value: "min-height", isDisabled: true },
+        { label: (0, import_i18n47.__)("Min width", "elementor"), value: "min-width", isDisabled: true }
+      ]
+    },
+    {
+      label: (0, import_i18n47.__)("Position", "elementor"),
+      type: "category",
+      properties: [
+        { label: (0, import_i18n47.__)("Top", "elementor"), value: "inset-block-start", isDisabled: true },
+        { label: (0, import_i18n47.__)("Left", "elementor"), value: "inset-inline-start", isDisabled: true },
+        { label: (0, import_i18n47.__)("Right", "elementor"), value: "inset-inline-end", isDisabled: true },
+        { label: (0, import_i18n47.__)("Bottom", "elementor"), value: "inset-block-end", isDisabled: true },
+        { label: (0, import_i18n47.__)("Z-index", "elementor"), value: "z-index", isDisabled: true }
+      ]
+    },
+    {
+      label: (0, import_i18n47.__)("Typography", "elementor"),
+      type: "category",
+      properties: [
+        { label: (0, import_i18n47.__)("Font color", "elementor"), value: "color", isDisabled: true },
+        { label: (0, import_i18n47.__)("Font size", "elementor"), value: "font-size", isDisabled: true },
+        { label: (0, import_i18n47.__)("Line height", "elementor"), value: "line-height", isDisabled: true },
+        { label: (0, import_i18n47.__)("Letter spacing", "elementor"), value: "letter-spacing", isDisabled: true },
+        { label: (0, import_i18n47.__)("Word spacing", "elementor"), value: "word-spacing", isDisabled: true },
+        { label: (0, import_i18n47.__)("Font variations", "elementor"), value: "font-variation-settings", isDisabled: true },
+        { label: (0, import_i18n47.__)("Text stroke color", "elementor"), value: "-webkit-text-stroke-color", isDisabled: true }
+      ]
+    },
+    {
+      label: (0, import_i18n47.__)("Background", "elementor"),
+      type: "category",
+      properties: [
+        { label: (0, import_i18n47.__)("Background color", "elementor"), value: "background-color", isDisabled: true },
+        { label: (0, import_i18n47.__)("Background position", "elementor"), value: "background-position", isDisabled: true },
+        { label: (0, import_i18n47.__)("Box shadow", "elementor"), value: "box-shadow", isDisabled: true }
+      ]
+    },
+    {
+      label: (0, import_i18n47.__)("Border", "elementor"),
+      type: "category",
+      properties: [
+        { label: (0, import_i18n47.__)("Border (all)", "elementor"), value: "border", isDisabled: true },
+        { label: (0, import_i18n47.__)("Border radius", "elementor"), value: "border-radius", isDisabled: true },
+        { label: (0, import_i18n47.__)("Border color", "elementor"), value: "border-color", isDisabled: true },
+        { label: (0, import_i18n47.__)("Border width", "elementor"), value: "border-width", isDisabled: true }
+      ]
+    },
+    {
+      label: (0, import_i18n47.__)("Effects", "elementor"),
+      type: "category",
+      properties: [
+        { label: (0, import_i18n47.__)("Opacity", "elementor"), value: "opacity", isDisabled: true },
+        { label: (0, import_i18n47.__)("Transform (all)", "elementor"), value: "transform", isDisabled: true },
+        { label: (0, import_i18n47.__)("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)
@@ -5670,6 +5788,7 @@ function subscribeToTransitionEvent() {
 var React96 = __toESM(require("react"));
 var import_react51 = require("react");
 var import_editor_props47 = require("@elementor/editor-props");
+var import_editor_ui11 = require("@elementor/editor-ui");
 var import_icons31 = require("@elementor/icons");
 var import_ui82 = require("@elementor/ui");
 var import_i18n48 = require("@wordpress/i18n");
@@ -5703,9 +5822,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(import_editor_props47.keyValuePropTypeUtil);
   const {
@@ -5713,6 +5834,11 @@ var TransitionSelector = ({
   } = value;
   const defaultRef = (0, import_react51.useRef)(null);
   const popoverState = (0, import_ui82.usePopupState)({ variant: "popover" });
+  const disabledCategories = (0, import_react51.useMemo)(() => {
+    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) => {
@@ -5782,7 +5908,50 @@ var TransitionSelector = ({
         sectionWidth: 268,
         title: (0, import_i18n48.__)("Transition Property", "elementor"),
         icon: import_icons31.VariationsIcon,
-        disabledItems: includeCurrentValueInOptions(value, disabledItems)
+        disabledItems: includeCurrentValueInOptions(value, disabledItems),
+        categoryItemContentTemplate: (item) => /* @__PURE__ */ React96.createElement(
+          import_ui82.Box,
+          {
+            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(import_editor_ui11.PromotionChip, null)
+        ),
+        footer: showPromotion ? /* @__PURE__ */ React96.createElement(
+          import_ui82.Alert,
+          {
+            variant: "standard",
+            color: "promotion",
+            icon: false,
+            role: "dialog",
+            "aria-label": "promotion-alert",
+            size: "small",
+            sx: { m: 1.5, mt: 0 }
+          },
+          (0, import_i18n48.__)("Upgrade to customize transition properties and control effects.", "elementor"),
+          /* @__PURE__ */ React96.createElement(
+            import_ui82.Box,
+            {
+              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(import_icons31.CrownFilledIcon, { fontSize: "tiny" }),
+            (0, import_i18n48.__)("Upgrade now", "elementor")
+          )
+        ) : null
       }
     )
   ));
@@ -5809,7 +5978,7 @@ var areAllPropertiesUsed = (value = []) => {
     });
   }) : false;
 };
-var getSelectionSizeProps = (recentlyUsedList, disabledItems) => {
+var getSelectionSizeProps = (recentlyUsedList, disabledItems, showPromotion) => {
   return {
     selectionLabel: (0, import_i18n49.__)("Type", "elementor"),
     sizeLabel: (0, import_i18n49.__)("Duration", "elementor"),
@@ -5817,7 +5986,8 @@ var getSelectionSizeProps = (recentlyUsedList, disabledItems) => {
       component: TransitionSelector,
       props: {
         recentlyUsedList,
-        disabledItems
+        disabledItems,
+        showPromotion
       }
     },
     sizeConfigMap: {
@@ -5837,11 +6007,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: import_editor_props48.selectionSizePropTypeUtil,
     component: SelectionSizeControl,
-    props: getSelectionSizeProps(recentlyUsedList, disabledItems),
+    props: getSelectionSizeProps(recentlyUsedList, disabledItems, showPromotion),
     isItemDisabled
   };
 };
@@ -5851,14 +6021,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) {
@@ -5904,7 +6078,10 @@ var TransitionRepeaterControl = createControl(
     const currentStyleIsNormal = currentStyleState === null;
     const [recentlyUsedList, setRecentlyUsedList] = (0, import_react52.useState)([]);
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    const disabledItems = (0, import_react52.useMemo)(() => getDisabledItemLabels(value), [value]);
+    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react52.useMemo)(
+      () => getDisabledItemLabels(value),
+      [value]
+    );
     const allowedTransitionSet = (0, import_react52.useMemo)(() => {
       const set = /* @__PURE__ */ new Set();
       transitionProperties.forEach((category) => {
@@ -5939,7 +6116,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,