@elementor/editor-components 3.35.0-448 → 3.35.0-450

package/dist/index.mjs

@@ -1756,6 +1756,18 @@ import { AIIcon, ComponentsIcon as ComponentsIcon2 } from "@elementor/icons";
 import { Box as Box11, Button as Button4, Divider as Divider3, Link as Link3, List as List3, Stack as Stack10, Typography as Typography9 } from "@elementor/ui";
 import { __ as __20 } from "@wordpress/i18n";
 
+// src/hooks/use-components-permissions.ts
+import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
+var useComponentsPermissions = () => {
+  const { isAdmin } = useCurrentUserCapabilities();
+  return {
+    canCreate: isAdmin,
+    canEdit: isAdmin,
+    canDelete: isAdmin,
+    canRename: isAdmin
+  };
+};
+
 // src/store/actions/rename-component.ts
 import { getV1DocumentsManager as getV1DocumentsManager4, setDocumentModifiedStatus as setDocumentModifiedStatus3 } from "@elementor/editor-documents";
 import { getAllDescendants } from "@elementor/editor-elements";
@@ -1837,9 +1849,9 @@ function createComponentType(options) {
   };
 }
 function createComponentView(options) {
+  const legacyWindow = window;
   return class extends createTemplatedElementView(options) {
-    legacyWindow = window;
-    eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
+    eventsManagerConfig = legacyWindow.elementorCommon.eventsManager.config;
     #componentRenderContext;
     isComponentCurrentlyEdited() {
       const currentDocument = getCurrentDocument();
@@ -1875,9 +1887,7 @@ function createComponentView(options) {
         this.#componentRenderContext = {
           overrides: componentInstance.overrides ?? {}
         };
-        this.collection = this.legacyWindow.elementor.createBackboneElementsCollection(
-          componentInstance.elements
-        );
+        this.collection = legacyWindow.elementor.createBackboneElementsCollection(componentInstance.elements);
         this.collection.models.forEach(setInactiveRecursively);
         settings.component_instance = "<template data-children-placeholder></template>";
       }
@@ -1911,9 +1921,7 @@ function createComponentView(options) {
       return newGroups;
     }
     _getContextMenuConfig() {
-      const legacyWindow = this.legacyWindow || window;
-      const elementorWithConfig = legacyWindow.elementor;
-      const isAdministrator = elementorWithConfig.config?.user?.is_administrator ?? false;
+      const isAdministrator = isUserAdministrator();
       const addedGroup = {
         general: {
           index: 1,
@@ -1958,6 +1966,10 @@ function createComponentView(options) {
     }
     handleDblClick(e) {
       e.stopPropagation();
+      const isAdministrator = isUserAdministrator();
+      if (!isAdministrator) {
+        return;
+      }
       const { triggers, locations, secondaryLocations } = this.eventsManagerConfig;
       this.editComponent({
         trigger: triggers.doubleClick,
@@ -1991,6 +2003,10 @@ function setInactiveRecursively(model) {
     });
   }
 }
+function isUserAdministrator() {
+  const legacyWindow = window;
+  return legacyWindow.elementor.config?.user?.is_administrator ?? false;
+}
 function createComponentModel() {
   const legacyWindow = window;
   const WidgetType = legacyWindow.elementor.modules.elements.types.Widget;
@@ -2392,6 +2408,8 @@ function DeleteConfirmationDialog({ open, onClose, onConfirm }) {
 var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
   const itemRef = useRef4(null);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState6(false);
+  const { canRename, canDelete } = useComponentsPermissions();
+  const shouldShowActions = canRename || canDelete;
   const {
     ref: editableRef,
     isEditing,
@@ -2416,8 +2434,8 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
     endDragElementFromPanel();
   };
   const handleDeleteClick = () => {
-    popupState.close();
     setIsDeleteDialogOpen(true);
+    popupState.close();
   };
   const handleDeleteConfirm = () => {
     if (!component.id) {
@@ -2486,9 +2504,9 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
           }
         )))
       ),
-      /* @__PURE__ */ React15.createElement(IconButton5, { size: "tiny", ...bindTrigger3(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React15.createElement(DotsVerticalIcon2, { fontSize: "tiny" }))
+      shouldShowActions && /* @__PURE__ */ React15.createElement(IconButton5, { size: "tiny", ...bindTrigger3(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React15.createElement(DotsVerticalIcon2, { fontSize: "tiny" }))
     )
-  ), /* @__PURE__ */ React15.createElement(
+  ), shouldShowActions && /* @__PURE__ */ React15.createElement(
     Menu2,
     {
       ...bindMenu2(popupState),
@@ -2501,10 +2519,11 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
         horizontal: "right"
       }
     },
-    /* @__PURE__ */ React15.createElement(
+    canRename && /* @__PURE__ */ React15.createElement(
       MenuListItem3,
       {
         sx: { minWidth: "160px" },
+        primaryTypographyProps: { variant: "caption", color: "text.primary" },
         onClick: () => {
           popupState.close();
           openEditMode();
@@ -2512,7 +2531,15 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
       },
       __19("Rename", "elementor")
     ),
-    /* @__PURE__ */ React15.createElement(MenuListItem3, { sx: { minWidth: "160px" }, onClick: handleDeleteClick }, /* @__PURE__ */ React15.createElement(Typography8, { variant: "caption", sx: { color: "error.light" } }, __19("Delete", "elementor")))
+    canDelete && /* @__PURE__ */ React15.createElement(
+      MenuListItem3,
+      {
+        sx: { minWidth: "160px" },
+        primaryTypographyProps: { variant: "caption", color: "error.light" },
+        onClick: handleDeleteClick
+      },
+      __19("Delete", "elementor")
+    )
   ), /* @__PURE__ */ React15.createElement(
     DeleteConfirmationDialog,
     {
@@ -2634,6 +2661,7 @@ function ComponentsList() {
 }
 var EmptyState = () => {
   const [isAngieModalOpen, setIsAngieModalOpen] = useState7(false);
+  const { canCreate } = useComponentsPermissions();
   const handleCreateWithAI = () => {
     const sdk = getAngieSdk();
     if (sdk.isAngieReady()) {
@@ -2658,7 +2686,10 @@ var EmptyState = () => {
       gap: 2,
       overflow: "hidden"
     },
-    /* @__PURE__ */ React17.createElement(Stack10, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React17.createElement(ComponentsIcon2, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, __20("No components yet", "elementor")), /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, __20("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React17.createElement("br", null), __20("Create once, use everywhere.", "elementor")), /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React17.createElement(Stack10, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React17.createElement(ComponentsIcon2, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, __20("No components yet", "elementor")), /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, __20("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React17.createElement("br", null), canCreate ? __20("Create once, use everywhere.", "elementor") : __20(
+      "With your current role, you cannot create components. Contact an administrator to create one.",
+      "elementor"
+    )), /* @__PURE__ */ React17.createElement(
       Link3,
       {
         href: LEARN_MORE_URL,
@@ -2669,8 +2700,16 @@ var EmptyState = () => {
       },
       __20("Learn more about components", "elementor")
     )),
-    /* @__PURE__ */ React17.createElement(Divider3, { sx: { width: "100%" } }),
-    /* @__PURE__ */ React17.createElement(Stack10, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, __20("Create your first one:", "elementor")), /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 228 } }, __20(
+    canCreate && /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(Divider3, { sx: { width: "100%" } }), /* @__PURE__ */ React17.createElement(Stack10, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React17.createElement(
+      Typography9,
+      {
+        align: "center",
+        variant: "subtitle2",
+        color: "text.secondary",
+        sx: SUBTITLE_OVERRIDE_SX
+      },
+      __20("Create your first one:", "elementor")
+    ), /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 228 } }, __20(
       'Right-click any div-block or flexbox on your canvas or structure and select "Create component"',
       "elementor"
     )), /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "caption", color: "secondary" }, __20("Or", "elementor")), /* @__PURE__ */ React17.createElement(AngiePromotionModal, { open: isAngieModalOpen, onClose: () => setIsAngieModalOpen(false) }, /* @__PURE__ */ React17.createElement(
@@ -2683,7 +2722,7 @@ var EmptyState = () => {
         endIcon: /* @__PURE__ */ React17.createElement(AIIcon, null)
       },
       __20("Create component with AI", "elementor")
-    )))
+    ))))
   );
 };
 var EmptySearchResult = () => {
@@ -3520,6 +3559,14 @@ import { ComponentPropListIcon as ComponentPropListIcon4, PencilIcon } from "@el
 import { Button as Button7, Stack as Stack13, Typography as Typography12 } from "@elementor/ui";
 import { __ as __25 } from "@wordpress/i18n";
 var EmptyState2 = ({ onEditComponent }) => {
+  const { canEdit } = useComponentsPermissions();
+  const message = canEdit ? __25(
+    "Edit the component to add properties, manage them or update the design across all instances.",
+    "elementor"
+  ) : __25(
+    "With your current role, you cannot edit this component. Contact an administrator to add properties.",
+    "elementor"
+  );
   return /* @__PURE__ */ React23.createElement(
     Stack13,
     {
@@ -3532,11 +3579,8 @@ var EmptyState2 = ({ onEditComponent }) => {
     },
     /* @__PURE__ */ React23.createElement(ComponentPropListIcon4, { fontSize: "large" }),
     /* @__PURE__ */ React23.createElement(Typography12, { align: "center", variant: "subtitle2" }, __25("No properties yet", "elementor")),
-    /* @__PURE__ */ React23.createElement(Typography12, { align: "center", variant: "caption", maxWidth: "170px" }, __25(
-      "Edit the component to add properties, manage them or update the design across all instances.",
-      "elementor"
-    )),
-    /* @__PURE__ */ React23.createElement(Button7, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React23.createElement(PencilIcon, { fontSize: "small" }), __25("Edit component", "elementor"))
+    /* @__PURE__ */ React23.createElement(Typography12, { align: "center", variant: "caption", maxWidth: "170px" }, message),
+    canEdit && /* @__PURE__ */ React23.createElement(Button7, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React23.createElement(PencilIcon, { fontSize: "small" }), __25("Edit component", "elementor"))
   );
 };
 
@@ -3908,6 +3952,7 @@ function OverridePropsGroup({ group, props, overrides }) {
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
 function InstanceEditingPanel() {
+  const { canEdit } = useComponentsPermissions();
   const settings = useComponentInstanceSettings();
   const componentId = settings?.component_id?.value;
   const overrides = settings?.overrides?.value;
@@ -3922,7 +3967,7 @@ function InstanceEditingPanel() {
   const isNonEmptyGroup = (group) => group !== null && group.props.length > 0;
   const groups = overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(isNonEmptyGroup);
   const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
-  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(PanelHeader2, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React28.createElement(Stack17, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React28.createElement(ComponentsIcon4, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React28.createElement(EllipsisWithTooltip2, { title: component.name, as: PanelHeaderTitle2 }), /* @__PURE__ */ React28.createElement(Tooltip4, { title: panelTitle, sx: { marginLeft: "auto" } }, /* @__PURE__ */ React28.createElement(IconButton6, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React28.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React28.createElement(PanelBody2, null, /* @__PURE__ */ React28.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? /* @__PURE__ */ React28.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React28.createElement(Stack17, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React28.createElement(React28.Fragment, { key: group.id }, /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(PanelHeader2, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React28.createElement(Stack17, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React28.createElement(ComponentsIcon4, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React28.createElement(EllipsisWithTooltip2, { title: component.name, as: PanelHeaderTitle2 }), canEdit && /* @__PURE__ */ React28.createElement(Tooltip4, { title: panelTitle }, /* @__PURE__ */ React28.createElement(IconButton6, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React28.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React28.createElement(PanelBody2, null, /* @__PURE__ */ React28.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? /* @__PURE__ */ React28.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React28.createElement(Stack17, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React28.createElement(React28.Fragment, { key: group.id }, /* @__PURE__ */ React28.createElement(
     OverridePropsGroup,
     {
       group,