@elementor/editor-components 3.35.0-447 → 3.35.0-449

package/dist/index.js

@@ -1763,6 +1763,18 @@ var import_icons10 = require("@elementor/icons");
 var import_ui15 = require("@elementor/ui");
 var import_i18n20 = require("@wordpress/i18n");
 
+// src/hooks/use-components-permissions.ts
+var import_editor_current_user2 = require("@elementor/editor-current-user");
+var useComponentsPermissions = () => {
+  const { isAdmin } = (0, import_editor_current_user2.useCurrentUserCapabilities)();
+  return {
+    canCreate: isAdmin,
+    canEdit: isAdmin,
+    canDelete: isAdmin,
+    canRename: isAdmin
+  };
+};
+
 // src/store/actions/rename-component.ts
 var import_editor_documents7 = require("@elementor/editor-documents");
 var import_editor_elements5 = require("@elementor/editor-elements");
@@ -1842,9 +1854,9 @@ function createComponentType(options) {
   };
 }
 function createComponentView(options) {
+  const legacyWindow = window;
   return class extends (0, import_editor_canvas4.createTemplatedElementView)(options) {
-    legacyWindow = window;
-    eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
+    eventsManagerConfig = legacyWindow.elementorCommon.eventsManager.config;
     #componentRenderContext;
     isComponentCurrentlyEdited() {
       const currentDocument = (0, import_editor_documents6.getCurrentDocument)();
@@ -1880,9 +1892,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>";
       }
@@ -1916,9 +1926,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,
@@ -1963,6 +1971,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,
@@ -1996,6 +2008,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;
@@ -2370,6 +2386,8 @@ function DeleteConfirmationDialog({ open, onClose, onConfirm }) {
 var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
   const itemRef = (0, import_react8.useRef)(null);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = (0, import_react8.useState)(false);
+  const { canRename, canDelete } = useComponentsPermissions();
+  const shouldShowActions = canRename || canDelete;
   const {
     ref: editableRef,
     isEditing,
@@ -2394,8 +2412,8 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
     (0, import_editor_canvas5.endDragElementFromPanel)();
   };
   const handleDeleteClick = () => {
-    popupState.close();
     setIsDeleteDialogOpen(true);
+    popupState.close();
   };
   const handleDeleteConfirm = () => {
     if (!component.id) {
@@ -2464,9 +2482,9 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
           }
         )))
       ),
-      /* @__PURE__ */ React15.createElement(import_ui13.IconButton, { size: "tiny", ...(0, import_ui13.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React15.createElement(import_icons9.DotsVerticalIcon, { fontSize: "tiny" }))
+      shouldShowActions && /* @__PURE__ */ React15.createElement(import_ui13.IconButton, { size: "tiny", ...(0, import_ui13.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React15.createElement(import_icons9.DotsVerticalIcon, { fontSize: "tiny" }))
     )
-  ), /* @__PURE__ */ React15.createElement(
+  ), shouldShowActions && /* @__PURE__ */ React15.createElement(
     import_ui13.Menu,
     {
       ...(0, import_ui13.bindMenu)(popupState),
@@ -2479,10 +2497,11 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
         horizontal: "right"
       }
     },
-    /* @__PURE__ */ React15.createElement(
+    canRename && /* @__PURE__ */ React15.createElement(
       import_editor_ui7.MenuListItem,
       {
         sx: { minWidth: "160px" },
+        primaryTypographyProps: { variant: "caption", color: "text.primary" },
         onClick: () => {
           popupState.close();
           openEditMode();
@@ -2490,7 +2509,15 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
       },
       (0, import_i18n19.__)("Rename", "elementor")
     ),
-    /* @__PURE__ */ React15.createElement(import_editor_ui7.MenuListItem, { sx: { minWidth: "160px" }, onClick: handleDeleteClick }, /* @__PURE__ */ React15.createElement(import_ui13.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n19.__)("Delete", "elementor")))
+    canDelete && /* @__PURE__ */ React15.createElement(
+      import_editor_ui7.MenuListItem,
+      {
+        sx: { minWidth: "160px" },
+        primaryTypographyProps: { variant: "caption", color: "error.light" },
+        onClick: handleDeleteClick
+      },
+      (0, import_i18n19.__)("Delete", "elementor")
+    )
   ), /* @__PURE__ */ React15.createElement(
     DeleteConfirmationDialog,
     {
@@ -2612,6 +2639,7 @@ function ComponentsList() {
 }
 var EmptyState = () => {
   const [isAngieModalOpen, setIsAngieModalOpen] = (0, import_react9.useState)(false);
+  const { canCreate } = useComponentsPermissions();
   const handleCreateWithAI = () => {
     const sdk = (0, import_editor_mcp.getAngieSdk)();
     if (sdk.isAngieReady()) {
@@ -2636,7 +2664,10 @@ var EmptyState = () => {
       gap: 2,
       overflow: "hidden"
     },
-    /* @__PURE__ */ React17.createElement(import_ui15.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React17.createElement(import_icons10.ComponentsIcon, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n20.__)("No components yet", "elementor")), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, (0, import_i18n20.__)("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React17.createElement("br", null), (0, import_i18n20.__)("Create once, use everywhere.", "elementor")), /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React17.createElement(import_ui15.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React17.createElement(import_icons10.ComponentsIcon, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n20.__)("No components yet", "elementor")), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, (0, import_i18n20.__)("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React17.createElement("br", null), canCreate ? (0, import_i18n20.__)("Create once, use everywhere.", "elementor") : (0, import_i18n20.__)(
+      "With your current role, you cannot create components. Contact an administrator to create one.",
+      "elementor"
+    )), /* @__PURE__ */ React17.createElement(
       import_ui15.Link,
       {
         href: LEARN_MORE_URL,
@@ -2647,8 +2678,16 @@ var EmptyState = () => {
       },
       (0, import_i18n20.__)("Learn more about components", "elementor")
     )),
-    /* @__PURE__ */ React17.createElement(import_ui15.Divider, { sx: { width: "100%" } }),
-    /* @__PURE__ */ React17.createElement(import_ui15.Stack, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n20.__)("Create your first one:", "elementor")), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 228 } }, (0, import_i18n20.__)(
+    canCreate && /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(import_ui15.Divider, { sx: { width: "100%" } }), /* @__PURE__ */ React17.createElement(import_ui15.Stack, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React17.createElement(
+      import_ui15.Typography,
+      {
+        align: "center",
+        variant: "subtitle2",
+        color: "text.secondary",
+        sx: SUBTITLE_OVERRIDE_SX
+      },
+      (0, import_i18n20.__)("Create your first one:", "elementor")
+    ), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 228 } }, (0, import_i18n20.__)(
       'Right-click any div-block or flexbox on your canvas or structure and select "Create component"',
       "elementor"
     )), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary" }, (0, import_i18n20.__)("Or", "elementor")), /* @__PURE__ */ React17.createElement(AngiePromotionModal, { open: isAngieModalOpen, onClose: () => setIsAngieModalOpen(false) }, /* @__PURE__ */ React17.createElement(
@@ -2661,7 +2700,7 @@ var EmptyState = () => {
         endIcon: /* @__PURE__ */ React17.createElement(import_icons10.AIIcon, null)
       },
       (0, import_i18n20.__)("Create component with AI", "elementor")
-    )))
+    ))))
   );
 };
 var EmptySearchResult = () => {
@@ -3494,6 +3533,14 @@ var import_icons13 = require("@elementor/icons");
 var import_ui18 = require("@elementor/ui");
 var import_i18n25 = require("@wordpress/i18n");
 var EmptyState2 = ({ onEditComponent }) => {
+  const { canEdit } = useComponentsPermissions();
+  const message = canEdit ? (0, import_i18n25.__)(
+    "Edit the component to add properties, manage them or update the design across all instances.",
+    "elementor"
+  ) : (0, import_i18n25.__)(
+    "With your current role, you cannot edit this component. Contact an administrator to add properties.",
+    "elementor"
+  );
   return /* @__PURE__ */ React23.createElement(
     import_ui18.Stack,
     {
@@ -3506,11 +3553,8 @@ var EmptyState2 = ({ onEditComponent }) => {
     },
     /* @__PURE__ */ React23.createElement(import_icons13.ComponentPropListIcon, { fontSize: "large" }),
     /* @__PURE__ */ React23.createElement(import_ui18.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n25.__)("No properties yet", "elementor")),
-    /* @__PURE__ */ React23.createElement(import_ui18.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, (0, import_i18n25.__)(
-      "Edit the component to add properties, manage them or update the design across all instances.",
-      "elementor"
-    )),
-    /* @__PURE__ */ React23.createElement(import_ui18.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React23.createElement(import_icons13.PencilIcon, { fontSize: "small" }), (0, import_i18n25.__)("Edit component", "elementor"))
+    /* @__PURE__ */ React23.createElement(import_ui18.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, message),
+    canEdit && /* @__PURE__ */ React23.createElement(import_ui18.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React23.createElement(import_icons13.PencilIcon, { fontSize: "small" }), (0, import_i18n25.__)("Edit component", "elementor"))
   );
 };
 
@@ -3874,6 +3918,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;
@@ -3888,7 +3933,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(import_editor_panels3.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React28.createElement(import_icons14.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React28.createElement(import_editor_ui12.EllipsisWithTooltip, { title: component.name, as: import_editor_panels3.PanelHeaderTitle }), /* @__PURE__ */ React28.createElement(import_ui22.Tooltip, { title: panelTitle, sx: { marginLeft: "auto" } }, /* @__PURE__ */ React28.createElement(import_ui22.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React28.createElement(import_icons14.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React28.createElement(import_editor_panels3.PanelBody, null, /* @__PURE__ */ React28.createElement(import_editor_controls4.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty ? /* @__PURE__ */ React28.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React28.createElement(import_ui22.Stack, { 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(import_editor_panels3.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React28.createElement(import_icons14.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React28.createElement(import_editor_ui12.EllipsisWithTooltip, { title: component.name, as: import_editor_panels3.PanelHeaderTitle }), canEdit && /* @__PURE__ */ React28.createElement(import_ui22.Tooltip, { title: panelTitle }, /* @__PURE__ */ React28.createElement(import_ui22.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React28.createElement(import_icons14.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React28.createElement(import_editor_panels3.PanelBody, null, /* @__PURE__ */ React28.createElement(import_editor_controls4.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty ? /* @__PURE__ */ React28.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React28.createElement(React28.Fragment, { key: group.id }, /* @__PURE__ */ React28.createElement(
     OverridePropsGroup,
     {
       group,