@elementor/editor-components 3.33.0-299 → 3.33.0-300

package/dist/index.mjs

@@ -4,12 +4,13 @@ import {
   registerElementType,
   settingsTransformersRegistry as settingsTransformersRegistry2
 } from "@elementor/editor-canvas";
-import { getV1CurrentDocument } from "@elementor/editor-documents";
+import { getV1CurrentDocument as getV1CurrentDocument2 } from "@elementor/editor-documents";
+import { FIELD_TYPE, registerFieldIndicator } from "@elementor/editor-editing-panel";
 import { injectTab } from "@elementor/editor-elements-panel";
 import { stylesRepository } from "@elementor/editor-styles-repository";
 import { __privateListenTo as listenTo2, commandStartEvent, registerDataHook } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
-import { __ as __8 } from "@wordpress/i18n";
+import { __ as __10 } from "@wordpress/i18n";
 
 // src/component-instance-transformer.ts
 import { createTransformer } from "@elementor/editor-canvas";
@@ -125,6 +126,7 @@ var selectLoadStatus = (state) => state[SLICE_NAME].loadStatus;
 var selectStylesDefinitions = (state) => state[SLICE_NAME].styles ?? {};
 var selectUnpublishedData = (state) => state[SLICE_NAME].unpublishedData;
 var getCreatedThisSession = (state) => state[SLICE_NAME].createdThisSession;
+var selectComponent = (state, componentId) => state[SLICE_NAME].data.find((component) => component.id === componentId);
 var selectComponents = createSelector(
   selectData,
   selectUnpublishedData,
@@ -145,6 +147,10 @@ var selectCreatedThisSession = createSelector(
   getCreatedThisSession,
   (createdThisSession) => createdThisSession
 );
+var selectOverridableProps = createSelector(
+  selectComponent,
+  (component) => component?.overridableProps
+);
 
 // src/utils/component-document-data.ts
 var getComponentDocumentData = async (id) => {
@@ -1198,13 +1204,172 @@ var EditModeDialog = ({ lockedBy }) => {
   )), /* @__PURE__ */ React10.createElement(DialogActions, null, /* @__PURE__ */ React10.createElement(Button2, { color: "secondary", variant: "contained", onClick: closeDialog }, __6("Close", "elementor"))))));
 };
 
+// src/components/overridable-props/overridable-prop-indicator.tsx
+import * as React12 from "react";
+import { useBoundProp } from "@elementor/editor-controls";
+import { getV1CurrentDocument } from "@elementor/editor-documents";
+import { useElement } from "@elementor/editor-editing-panel";
+import { __getState as getState4 } from "@elementor/store";
+import { bindPopover, bindTrigger, Popover as Popover2, Tooltip, usePopupState } from "@elementor/ui";
+import { __ as __8 } from "@wordpress/i18n";
+
+// src/prop-types/component-overridable-prop-type.ts
+import { createPropUtils } from "@elementor/editor-props";
+import { z as z2 } from "@elementor/schema";
+var componentOverridablePropTypeUtil = createPropUtils(
+  "overridable",
+  z2.object({
+    override_key: z2.string(),
+    default_value: z2.object({
+      $$type: z2.string(),
+      value: z2.unknown()
+    }).nullable()
+  })
+);
+
+// src/components/overridable-props/indicator.tsx
+import * as React11 from "react";
+import { forwardRef } from "react";
+import { CheckIcon, PlusIcon } from "@elementor/icons";
+import { Box as Box6, styled } from "@elementor/ui";
+import { __ as __7 } from "@wordpress/i18n";
+var SIZE = "tiny";
+var IconContainer = styled(Box6)`
+	pointer-events: none;
+	opacity: 0;
+	transition: opacity 0.2s ease-in-out;
+
+	& > svg {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate( -50%, -50% );
+		width: 10px;
+		height: 10px;
+		fill: ${({ theme }) => theme.palette.primary.contrastText};
+		stroke: ${({ theme }) => theme.palette.primary.contrastText};
+		stroke-width: 2px;
+	}
+`;
+var Content = styled(Box6)`
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	width: 16px;
+	height: 16px;
+	margin-inline: ${({ theme }) => theme.spacing(0.5)};
+
+	&:before {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate( -50%, -50% ) rotate( 45deg );
+		width: 5px;
+		height: 5px;
+		border-radius: 1px;
+		background-color: ${({ theme }) => theme.palette.primary.main};
+		transition: all 0.1s ease-in-out;
+	}
+
+	&:hover,
+	&.enlarged {
+		&:before {
+			width: 12px;
+			height: 12px;
+			border-radius: 2px;
+		}
+
+		.icon {
+			opacity: 1;
+		}
+	}
+`;
+var Indicator = forwardRef(({ triggerProps, isOpen, isOverridable }, ref) => /* @__PURE__ */ React11.createElement(Content, { ref, ...triggerProps, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React11.createElement(
+  IconContainer,
+  {
+    className: "icon",
+    "aria-label": isOverridable ? __7("Overridable property", "elementor") : __7("Make prop overridable", "elementor")
+  },
+  isOverridable ? /* @__PURE__ */ React11.createElement(CheckIcon, { fontSize: SIZE }) : /* @__PURE__ */ React11.createElement(PlusIcon, { fontSize: SIZE })
+)));
+
+// src/components/overridable-props/overridable-prop-indicator.tsx
+var FORBIDDEN_KEYS = ["_cssid", "attributes"];
+function OverridablePropIndicator() {
+  const { bind, value } = useBoundProp();
+  const currentDocument = getV1CurrentDocument();
+  if (currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE || !currentDocument.id) {
+    return null;
+  }
+  if (!isPropAllowed(bind)) {
+    return null;
+  }
+  const overridableProps = selectOverridableProps(getState4(), currentDocument.id);
+  const isOverridable = componentOverridablePropTypeUtil.isValid(value);
+  return /* @__PURE__ */ React12.createElement(
+    Content2,
+    {
+      componentId: currentDocument.id,
+      isOverridable,
+      overridableProps
+    }
+  );
+}
+function Content2({ isOverridable, overridableProps }) {
+  const {
+    element: { id: elementId }
+  } = useElement();
+  const { bind } = useBoundProp();
+  const popupState = usePopupState({
+    variant: "popover"
+  });
+  const triggerProps = bindTrigger(popupState);
+  const popoverProps = bindPopover(popupState);
+  const overridableConfig = Object.values(overridableProps?.props ?? {}).find(
+    (prop) => prop.elementId === elementId && prop.propKey === bind
+  );
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Tooltip, { placement: "top", title: __8("Override Property", "elementor") }, /* @__PURE__ */ React12.createElement(
+    Indicator,
+    {
+      triggerProps,
+      isOpen: !!popoverProps.open,
+      isOverridable
+    }
+  )), /* @__PURE__ */ React12.createElement(
+    Popover2,
+    {
+      disableScrollLock: true,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      PaperProps: {
+        sx: { my: 2.5 }
+      },
+      ...popoverProps
+    },
+    JSON.stringify(overridableConfig)
+  ));
+}
+function isPropAllowed(bind) {
+  return !FORBIDDEN_KEYS.includes(bind);
+}
+
 // src/create-component-type.ts
 import {
   createTemplatedElementView
 } from "@elementor/editor-canvas";
 import { getCurrentDocument } from "@elementor/editor-documents";
 import { __privateRunCommand as runCommand3 } from "@elementor/editor-v1-adapters";
-import { __ as __7 } from "@wordpress/i18n";
+import { __ as __9 } from "@wordpress/i18n";
 var TYPE = "e-component";
 function createComponentType(options) {
   const legacyWindow = window;
@@ -1263,7 +1428,7 @@ function createComponentView(options) {
             {
               name: "edit component",
               icon: "eicon-edit",
-              title: () => __7("Edit Component", "elementor"),
+              title: () => __9("Edit Component", "elementor"),
               isEnabled: () => true,
               callback: (_, eventData) => this.editComponent(eventData)
             }
@@ -1350,7 +1515,7 @@ function PopulateStore() {
 
 // src/store/components-styles-provider.ts
 import { createStylesProvider } from "@elementor/editor-styles-repository";
-import { __getState as getState4, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
+import { __getState as getState5, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
 var componentsStylesProvider = createStylesProvider({
   key: "components-styles",
   priority: 100,
@@ -1362,10 +1527,10 @@ var componentsStylesProvider = createStylesProvider({
   ),
   actions: {
     all: () => {
-      return selectFlatStyles(getState4());
+      return selectFlatStyles(getState5());
     },
     get: (id) => {
-      return selectFlatStyles(getState4()).find((style) => style.id === id) ?? null;
+      return selectFlatStyles(getState5()).find((style) => style.id === id) ?? null;
     }
   }
 });
@@ -1379,12 +1544,12 @@ function removeComponentStyles(id) {
 
 // src/sync/create-components-before-save.ts
 import { updateElementSettings } from "@elementor/editor-elements";
-import { __dispatch as dispatch5, __getState as getState5 } from "@elementor/store";
+import { __dispatch as dispatch5, __getState as getState6 } from "@elementor/store";
 async function createComponentsBeforeSave({
   container,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents(getState5());
+  const unpublishedComponents = selectUnpublishedComponents(getState6());
   if (!unpublishedComponents.length) {
     return;
   }
@@ -1493,7 +1658,7 @@ function init() {
     (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
   );
   registerDataHook("dependency", "editor/documents/close", (args) => {
-    const document = getV1CurrentDocument();
+    const document = getV1CurrentDocument2();
     if (document.config.type === COMPONENT_DOCUMENT_TYPE2) {
       args.mode = "autosave";
     }
@@ -1503,7 +1668,7 @@ function init() {
   window.elementorCommon.__beforeSave = beforeSave;
   injectTab({
     id: "components",
-    label: __8("Components", "elementor"),
+    label: __10("Components", "elementor"),
     component: Components
   });
   injectIntoTop({
@@ -1519,12 +1684,18 @@ function init() {
     component: EditComponent
   });
   listenTo2(commandStartEvent("editor/documents/attach-preview"), () => {
-    const { id, config } = getV1CurrentDocument();
+    const { id, config } = getV1CurrentDocument2();
     if (id) {
       removeComponentStyles(id);
     }
     loadComponentsStyles(config?.elements ?? []);
   });
+  registerFieldIndicator({
+    fieldType: FIELD_TYPE.SETTINGS,
+    id: "component-overridable-prop",
+    priority: 1,
+    indicator: OverridablePropIndicator
+  });
   settingsTransformersRegistry2.register("component-instance", componentInstanceTransformer);
   settingsTransformersRegistry2.register("overridable", componentOverridableTransformer);
 }