@elementor/editor-editing-panel 3.33.0-237 → 3.33.0-239

package/dist/index.js

@@ -5275,7 +5275,7 @@ var EditingPanelHooks = () => {
 var React91 = __toESM(require("react"));
 var import_editor_controls53 = require("@elementor/editor-controls");
 var import_editor_elements17 = require("@elementor/editor-elements");
-var import_editor_props17 = require("@elementor/editor-props");
+var import_editor_props16 = require("@elementor/editor-props");
 var import_icons25 = require("@elementor/icons");
 var import_ui46 = require("@elementor/ui");
 var import_i18n63 = require("@wordpress/i18n");
@@ -5299,40 +5299,23 @@ var getElementByType = (elementId, type) => {
 
 // src/controls-registry/element-controls/tabs-control/actions.ts
 var import_editor_elements16 = require("@elementor/editor-elements");
-var import_editor_props16 = require("@elementor/editor-props");
 var import_i18n62 = require("@wordpress/i18n");
 var TAB_ELEMENT_TYPE = "e-tab";
 var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
-var duplicateItem = ({ items: items3 }) => {
-  items3.forEach(({ item }) => {
+var duplicateItem = ({
+  items: items3,
+  tabContentAreaId
+}) => {
+  items3.forEach(({ item, index }) => {
     const tabId = item.id;
-    const { value: tabContentId } = (0, import_editor_elements16.getElementSetting)(tabId, "tab-content-id") ?? {};
+    const tabContentAreaContainer = (0, import_editor_elements16.getContainer)(tabContentAreaId);
+    const tabContentId = tabContentAreaContainer?.children?.[index]?.id;
     if (!tabContentId) {
       throw new Error("Original content ID is required for duplication");
     }
     (0, import_editor_elements16.duplicateElements)({
       elementIds: [tabId, tabContentId],
-      title: (0, import_i18n62.__)("Duplicate Tab", "elementor"),
-      onCreate: (duplicatedElements) => {
-        const tab = duplicatedElements.find((element) => element.originalElementId === tabId);
-        const tabContent = duplicatedElements.find((element) => element.originalElementId === tabContentId);
-        if (tabContent && tab) {
-          (0, import_editor_elements16.updateElementSettings)({
-            withHistory: false,
-            id: tab.id,
-            props: {
-              "tab-content-id": import_editor_props16.stringPropTypeUtil.create(tabContent.id)
-            }
-          });
-          (0, import_editor_elements16.updateElementSettings)({
-            withHistory: false,
-            id: tabContent.id,
-            props: {
-              "tab-id": import_editor_props16.stringPropTypeUtil.create(tab.id)
-            }
-          });
-        }
-      }
+      title: (0, import_i18n62.__)("Duplicate Tab", "elementor")
     });
   });
 };
@@ -5340,11 +5323,13 @@ var moveItem = ({
   toIndex,
   tabsMenuId,
   tabContentAreaId,
-  movedElementId
+  movedElementId,
+  movedElementIndex
 }) => {
-  const { value: tabContentId } = (0, import_editor_elements16.getElementSetting)(movedElementId, "tab-content-id") ?? {};
+  const tabContentContainer = (0, import_editor_elements16.getContainer)(tabContentAreaId);
+  const tabContentId = tabContentContainer?.children?.[movedElementIndex]?.id;
   if (!tabContentId) {
-    throw new Error("Required tab elements not found for reordering");
+    throw new Error("Content ID is required");
   }
   (0, import_editor_elements16.moveElements)({
     title: (0, import_i18n62.__)("Reorder Tabs", "elementor"),
@@ -5362,12 +5347,16 @@ var moveItem = ({
     ]
   });
 };
-var removeItem = ({ items: items3 }) => {
+var removeItem = ({
+  items: items3,
+  tabContentAreaId
+}) => {
   (0, import_editor_elements16.removeElements)({
     title: (0, import_i18n62.__)("Tabs", "elementor"),
-    elementIds: items3.flatMap(({ item }) => {
+    elementIds: items3.flatMap(({ item, index }) => {
       const tabId = item.id;
-      const { value: tabContentId } = (0, import_editor_elements16.getElementSetting)(tabId, "tab-content-id") ?? {};
+      const tabContentContainer = (0, import_editor_elements16.getContainer)(tabContentAreaId);
+      const tabContentId = tabContentContainer?.children?.[index]?.id;
       if (!tabContentId) {
         throw new Error("Content ID is required");
       }
@@ -5380,32 +5369,21 @@ var addItem = ({
   tabsMenuId,
   items: items3
 }) => {
-  items3.forEach(({ item, index }) => {
-    const newTabContentId = (0, import_editor_elements16.generateElementId)();
-    const newTabId = (0, import_editor_elements16.generateElementId)();
+  items3.forEach(({ index }) => {
     (0, import_editor_elements16.createElements)({
       title: (0, import_i18n62.__)("Tabs", "elementor"),
       elements: [
         {
           containerId: tabContentAreaId,
           model: {
-            id: newTabContentId,
             elType: TAB_CONTENT_ELEMENT_TYPE,
-            settings: {
-              "tab-id": import_editor_props16.stringPropTypeUtil.create(newTabId)
-            },
             editor_settings: { title: `Tab ${index + 1} content` }
           }
         },
         {
           containerId: tabsMenuId,
           model: {
-            id: newTabId,
             elType: TAB_ELEMENT_TYPE,
-            settings: {
-              ...item,
-              "tab-content-id": import_editor_props16.stringPropTypeUtil.create(newTabContentId)
-            },
             editor_settings: { title: `Tab ${index + 1} trigger` }
           }
         }
@@ -5425,11 +5403,12 @@ var TabsControl = ({ label }) => {
   ]);
   const tabList = getElementByType(element.id, TAB_MENU_ELEMENT_TYPE);
   const tabContentArea = getElementByType(element.id, TAB_CONTENT_AREA_ELEMENT_TYPE);
-  const repeaterValues = tabLinks.map((tabLink) => {
+  const repeaterValues = tabLinks.map((tabLink, index) => {
     const { title: titleSetting } = (0, import_editor_elements17.getElementEditorSettings)(tabLink.id) ?? {};
     return {
       id: tabLink.id,
-      title: titleSetting
+      title: titleSetting,
+      index
     };
   });
   const setValue = (_newValues, _options, meta) => {
@@ -5439,11 +5418,11 @@ var TabsControl = ({ label }) => {
     }
     if (meta?.action?.type === "remove") {
       const items3 = meta.action.payload;
-      return removeItem({ items: items3 });
+      return removeItem({ items: items3, tabContentAreaId: tabContentArea.id });
     }
     if (meta?.action?.type === "duplicate") {
       const items3 = meta.action.payload;
-      return duplicateItem({ items: items3 });
+      return duplicateItem({ items: items3, tabContentAreaId: tabContentArea.id });
     }
     if (meta?.action?.type === "reorder") {
       const { from, to } = meta.action.payload;
@@ -5451,7 +5430,8 @@ var TabsControl = ({ label }) => {
         toIndex: to,
         tabsMenuId: tabList.id,
         tabContentAreaId: tabContentArea.id,
-        movedElementId: tabLinks[from].id
+        movedElementId: tabLinks[from].id,
+        movedElementIndex: from
       });
     }
   };
@@ -5473,30 +5453,29 @@ var TabsControl = ({ label }) => {
     }
   );
 };
-var ItemLabel = ({ value }) => {
+var ItemLabel = ({ value, index }) => {
   const id = value.id ?? "";
   const editorSettings = (0, import_editor_elements17.useElementEditorSettings)(id);
   const elementTitle = editorSettings?.title;
-  return /* @__PURE__ */ React91.createElement(import_ui46.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React91.createElement("span", null, elementTitle), /* @__PURE__ */ React91.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n63.__)("Tabs", "elementor") }, /* @__PURE__ */ React91.createElement(ItemDefaultTab, { value })));
+  return /* @__PURE__ */ React91.createElement(import_ui46.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React91.createElement("span", null, elementTitle), /* @__PURE__ */ React91.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n63.__)("Tabs", "elementor") }, /* @__PURE__ */ React91.createElement(ItemDefaultTab, { index })));
 };
-var ItemDefaultTab = ({ value }) => {
-  const id = value.id ?? "";
-  const { value: defaultItem } = (0, import_editor_controls53.useBoundProp)(import_editor_props17.stringPropTypeUtil);
-  const isDefault = defaultItem === id;
+var ItemDefaultTab = ({ index }) => {
+  const { value: defaultItem } = (0, import_editor_controls53.useBoundProp)(import_editor_props16.numberPropTypeUtil);
+  const isDefault = defaultItem === index;
   if (!isDefault) {
     return null;
   }
   return /* @__PURE__ */ React91.createElement(import_ui46.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n63.__)("Default", "elementor") });
 };
-var ItemContent = ({ value }) => {
+var ItemContent = ({ value, index }) => {
   if (!value.id) {
     return null;
   }
-  return /* @__PURE__ */ React91.createElement(import_ui46.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React91.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React91.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n63.__)("Tabs", "elementor") }, /* @__PURE__ */ React91.createElement(DefaultTabControl, { elementId: value.id })));
+  return /* @__PURE__ */ React91.createElement(import_ui46.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React91.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React91.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n63.__)("Tabs", "elementor") }, /* @__PURE__ */ React91.createElement(DefaultTabControl, { tabIndex: index })));
 };
-var DefaultTabControl = ({ elementId }) => {
-  const { value, setValue } = (0, import_editor_controls53.useBoundProp)(import_editor_props17.stringPropTypeUtil);
-  const isDefault = value === elementId;
+var DefaultTabControl = ({ tabIndex }) => {
+  const { value, setValue } = (0, import_editor_controls53.useBoundProp)(import_editor_props16.numberPropTypeUtil);
+  const isDefault = value === tabIndex;
   return /* @__PURE__ */ React91.createElement(import_ui46.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React91.createElement(import_editor_controls53.ControlFormLabel, null, (0, import_i18n63.__)("Set as default tab", "elementor")), /* @__PURE__ */ React91.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React91.createElement(
     import_ui46.Switch,
     {
@@ -5504,7 +5483,7 @@ var DefaultTabControl = ({ elementId }) => {
       checked: isDefault,
       disabled: isDefault,
       onChange: ({ target }) => {
-        setValue(target.checked ? elementId : null);
+        setValue(target.checked ? tabIndex : null);
       },
       inputProps: {
         ...isDefault ? { style: { opacity: 0, cursor: "not-allowed" } } : {}
@@ -5574,7 +5553,7 @@ var import_editor_controls60 = require("@elementor/editor-controls");
 // src/dynamics/components/background-control-dynamic-tag.tsx
 var React92 = __toESM(require("react"));
 var import_editor_controls55 = require("@elementor/editor-controls");
-var import_editor_props19 = require("@elementor/editor-props");
+var import_editor_props18 = require("@elementor/editor-props");
 var import_icons26 = require("@elementor/icons");
 
 // src/dynamics/hooks/use-dynamic-tag.ts
@@ -5603,7 +5582,7 @@ var getAtomicDynamicTags = () => {
 };
 
 // src/dynamics/utils.ts
-var import_editor_props18 = require("@elementor/editor-props");
+var import_editor_props17 = require("@elementor/editor-props");
 var import_schema = require("@elementor/schema");
 var DYNAMIC_PROP_TYPE_KEY = "dynamic";
 var isDynamicPropType = (prop) => prop.key === DYNAMIC_PROP_TYPE_KEY;
@@ -5612,12 +5591,12 @@ var getDynamicPropType = (propType) => {
   return dynamicPropType && isDynamicPropType(dynamicPropType) ? dynamicPropType : null;
 };
 var isDynamicPropValue = (prop) => {
-  return (0, import_editor_props18.isTransformable)(prop) && prop.$$type === DYNAMIC_PROP_TYPE_KEY;
+  return (0, import_editor_props17.isTransformable)(prop) && prop.$$type === DYNAMIC_PROP_TYPE_KEY;
 };
 var supportsDynamic = (propType) => {
   return !!getDynamicPropType(propType);
 };
-var dynamicPropTypeUtil = (0, import_editor_props18.createPropUtils)(
+var dynamicPropTypeUtil = (0, import_editor_props17.createPropUtils)(
   DYNAMIC_PROP_TYPE_KEY,
   import_schema.z.strictObject({
     name: import_schema.z.string(),
@@ -5669,7 +5648,7 @@ var useDynamicTag = (tagName) => {
 // src/dynamics/components/background-control-dynamic-tag.tsx
 var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React92.createElement(import_icons26.DatabaseIcon, { fontSize: "tiny" });
 var BackgroundControlDynamicTagLabel = ({ value }) => {
-  const context = (0, import_editor_controls55.useBoundProp)(import_editor_props19.backgroundImageOverlayPropTypeUtil);
+  const context = (0, import_editor_controls55.useBoundProp)(import_editor_props18.backgroundImageOverlayPropTypeUtil);
   return /* @__PURE__ */ React92.createElement(import_editor_controls55.PropProvider, { ...context, value: value.value }, /* @__PURE__ */ React92.createElement(import_editor_controls55.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React92.createElement(Wrapper, { rawValue: value.value })));
 };
 var Wrapper = ({ rawValue }) => {
@@ -5705,7 +5684,7 @@ var import_editor_controls56 = require("@elementor/editor-controls");
 
 // src/dynamics/components/dynamic-conditional-control.tsx
 var React93 = __toESM(require("react"));
-var import_editor_props20 = require("@elementor/editor-props");
+var import_editor_props19 = require("@elementor/editor-props");
 var DynamicConditionalControl = ({
   children,
   propType,
@@ -5747,7 +5726,7 @@ var DynamicConditionalControl = ({
   if (!propType?.dependencies?.terms.length) {
     return /* @__PURE__ */ React93.createElement(React93.Fragment, null, children);
   }
-  const isHidden = !(0, import_editor_props20.isDependencyMet)(propType?.dependencies, effectiveSettings).isMet;
+  const isHidden = !(0, import_editor_props19.isDependencyMet)(propType?.dependencies, effectiveSettings).isMet;
   return isHidden ? null : /* @__PURE__ */ React93.createElement(React93.Fragment, null, children);
 };
 
@@ -6060,7 +6039,7 @@ function ControlsItemsStack({ items: items3 }) {
 
 // src/dynamics/dynamic-transformer.ts
 var import_editor_canvas4 = require("@elementor/editor-canvas");
-var import_editor_props21 = require("@elementor/editor-props");
+var import_editor_props20 = require("@elementor/editor-props");
 
 // src/dynamics/errors.ts
 var import_utils10 = require("@elementor/utils");
@@ -6078,7 +6057,7 @@ var dynamicTransformer = (0, import_editor_canvas4.createTransformer)((value) =>
 });
 function simpleTransform(props) {
   const transformed = Object.entries(props).map(([settingKey, settingValue]) => {
-    const value = (0, import_editor_props21.isTransformable)(settingValue) ? settingValue.value : settingValue;
+    const value = (0, import_editor_props20.isTransformable)(settingValue) ? settingValue.value : settingValue;
     return [settingKey, value];
   });
   return Object.fromEntries(transformed);