@elementor/editor-components 3.35.0-401 → 3.35.0-403

package/dist/index.mjs

@@ -339,15 +339,44 @@ import { __useSelector as useSelector2 } from "@elementor/store";
 
 // src/utils/switch-to-component.ts
 import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
-function switchToComponent(componentId, componentInstanceId) {
+function switchToComponent(componentId, componentInstanceId, element) {
+  const selector = getSelector(element, componentInstanceId);
   runCommand("editor/documents/switch", {
     id: componentId,
-    selector: componentInstanceId ? `[data-id="${componentInstanceId}"]` : void 0,
+    selector,
     mode: "autosave",
     setAsInitial: false,
     shouldScroll: false
   });
 }
+function getSelector(element, componentInstanceId) {
+  if (element) {
+    return buildUniqueSelector(element);
+  }
+  if (componentInstanceId) {
+    return `[data-id="${componentInstanceId}"]`;
+  }
+  return void 0;
+}
+function buildUniqueSelector(element) {
+  const selectors = [];
+  let current = element.closest("[data-id]");
+  while (current) {
+    const dataId = current.dataset.id;
+    const isComponentInstance2 = current.hasAttribute("data-elementor-id");
+    if (isComponentInstance2) {
+      selectors.unshift(`[data-id="${dataId}"]`);
+    }
+    current = current.parentElement?.closest("[data-id]") ?? null;
+  }
+  if (selectors.length === 0) {
+    const closestElement = element.closest("[data-id]");
+    if (closestElement?.dataset?.id) {
+      return `[data-id="${closestElement.dataset.id}"]`;
+    }
+  }
+  return selectors.join(" ");
+}
 
 // src/hooks/use-navigate-back.ts
 function useNavigateBack() {
@@ -732,14 +761,14 @@ function useOverridableProps2(componentId) {
 import * as React2 from "react";
 import { useState } from "react";
 import { ComponentPropListIcon } from "@elementor/icons";
-import { Link, Stack as Stack2, Typography as Typography2 } from "@elementor/ui";
+import { Link as Link2, Stack as Stack2, Typography as Typography2 } from "@elementor/ui";
 import { __ as __3 } from "@wordpress/i18n";
 
 // src/components/components-tab/component-introduction.tsx
 import * as React from "react";
 import { PopoverContent } from "@elementor/editor-controls";
 import { PopoverHeader } from "@elementor/editor-ui";
-import { Box, Button, Image, Popover, Stack, Typography } from "@elementor/ui";
+import { Box, Button, Image, Link, Popover, Stack, Typography } from "@elementor/ui";
 import { __ as __2 } from "@wordpress/i18n";
 var ComponentIntroduction = ({
   anchorRef,
@@ -771,13 +800,23 @@ var ComponentIntroduction = ({
         src: "https://assets.elementor.com/packages/v1/images/components-properties-intro.png",
         alt: ""
       }
-    ), /* @__PURE__ */ React.createElement(PopoverContent, null, /* @__PURE__ */ React.createElement(Stack, { gap: 1, sx: { p: 2 } }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __2("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __2(
+    ), /* @__PURE__ */ React.createElement(PopoverContent, null, /* @__PURE__ */ React.createElement(Stack, { sx: { p: 2 } }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __2("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __2(
       "Click next to any setting you want users to customize - like text, images, or links.",
       "elementor"
-    )), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __2(
+    )), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", sx: { mt: 2 } }, __2(
       "Your properties will appear in the Properties panel, where you can organize and manage them anytime.",
       "elementor"
-    )), /* @__PURE__ */ React.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end" }, /* @__PURE__ */ React.createElement(Button, { size: "medium", variant: "contained", onClick: onClose }, __2("Got it", "elementor"))))))
+    )), /* @__PURE__ */ React.createElement(
+      Link,
+      {
+        href: "http://go.elementor.com/components-guide",
+        target: "_blank",
+        sx: { mt: 2 },
+        color: "info.main",
+        variant: "body2"
+      },
+      __2("Learn more", "elementor")
+    ), /* @__PURE__ */ React.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", sx: { pt: 1 } }, /* @__PURE__ */ React.createElement(Button, { size: "medium", variant: "contained", onClick: onClose }, __2("Got it", "elementor"))))))
   );
 };
 
@@ -799,7 +838,7 @@ function PropertiesEmptyState({ introductionRef }) {
     /* @__PURE__ */ React2.createElement(Typography2, { align: "center", variant: "caption" }, __3("Make instances flexible while keeping design synced.", "elementor")),
     /* @__PURE__ */ React2.createElement(Typography2, { align: "center", variant: "caption" }, __3("Select any element, then click + next to a setting to expose it.", "elementor")),
     /* @__PURE__ */ React2.createElement(
-      Link,
+      Link2,
       {
         variant: "caption",
         color: "secondary",
@@ -1596,7 +1635,7 @@ var ComponentSearch = () => {
 // src/components/components-tab/components-list.tsx
 import * as React15 from "react";
 import { ComponentsIcon as ComponentsIcon2, EyeIcon } from "@elementor/icons";
-import { Box as Box11, Divider as Divider3, Icon, Link as Link2, List as List3, Stack as Stack10, Typography as Typography8 } from "@elementor/ui";
+import { Box as Box11, Divider as Divider3, Icon, Link as Link3, List as List3, Stack as Stack10, Typography as Typography8 } from "@elementor/ui";
 import { __ as __15 } from "@wordpress/i18n";
 
 // src/hooks/use-components.ts
@@ -1786,7 +1825,7 @@ function createComponentView(options) {
       if (!isAllowedToSwitchDocument) {
         options.showLockedByModal?.(lockedBy || "");
       } else {
-        switchToComponent(this.getComponentId(), this.model.get("id"));
+        switchToComponent(this.getComponentId(), this.model.get("id"), this.el);
       }
     }
     editComponent({ trigger, location, secondaryLocation }) {
@@ -2245,7 +2284,7 @@ var EmptySearchResult = () => {
       )
     ),
     /* @__PURE__ */ React15.createElement(Typography8, { align: "center", variant: "caption", color: "inherit" }, __15("Try something else.", "elementor")),
-    /* @__PURE__ */ React15.createElement(Typography8, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React15.createElement(Link2, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, __15("Clear & try again", "elementor")))
+    /* @__PURE__ */ React15.createElement(Typography8, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React15.createElement(Link3, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, __15("Clear & try again", "elementor")))
   );
 };
 var useFilteredComponents = () => {