@elementor/editor-components 3.35.0-333 → 3.35.0-334

package/dist/index.js

@@ -37,7 +37,7 @@ module.exports = __toCommonJS(index_exports);
 // src/init.ts
 var import_editor = require("@elementor/editor");
 var import_editor_canvas6 = require("@elementor/editor-canvas");
-var import_editor_documents11 = require("@elementor/editor-documents");
+var import_editor_documents10 = require("@elementor/editor-documents");
 var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
@@ -1661,7 +1661,7 @@ var EditModeDialog = ({ lockedBy }) => {
 };
 
 // src/components/overridable-props/overridable-prop-control.tsx
-var React13 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 var import_editor_controls = require("@elementor/editor-controls");
 var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 var import_store29 = require("@elementor/store");
@@ -1680,6 +1680,15 @@ var componentOverridablePropTypeUtil = (0, import_editor_props.createPropUtils)(
   })
 );
 
+// src/provider/overridable-prop-context.tsx
+var React13 = __toESM(require("react"));
+var import_react9 = require("react");
+var OverridablePropContext = (0, import_react9.createContext)(null);
+function OverridablePropProvider({ children, ...props }) {
+  return /* @__PURE__ */ React13.createElement(OverridablePropContext.Provider, { value: props }, children);
+}
+var useOverridablePropValue = () => (0, import_react9.useContext)(OverridablePropContext)?.value;
+
 // src/store/actions/update-overridable-prop-origin-value.ts
 var import_store27 = require("@elementor/store");
 function updateOverridablePropOriginValue(componentId, propValue) {
@@ -1737,7 +1746,7 @@ function OverridablePropControl({
     }
   });
   const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React14.createElement(
     import_editor_controls.PropProvider,
     {
       ...propContext,
@@ -1746,14 +1755,13 @@ function OverridablePropControl({
       value: { [bind]: value.origin_value },
       placeholder: objectPlaceholder
     },
-    /* @__PURE__ */ React13.createElement(import_editor_controls.PropKeyProvider, { bind }, /* @__PURE__ */ React13.createElement(import_editor_controls.ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React13.createElement(OriginalControl, { ...props })))
-  );
+    /* @__PURE__ */ React14.createElement(import_editor_controls.PropKeyProvider, { bind }, /* @__PURE__ */ React14.createElement(import_editor_controls.ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React14.createElement(OriginalControl, { ...props })))
+  ));
 }
 
 // src/components/overridable-props/overridable-prop-indicator.tsx
-var React16 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var import_editor_controls2 = require("@elementor/editor-controls");
-var import_editor_documents9 = require("@elementor/editor-documents");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_elements5 = require("@elementor/editor-elements");
 var import_store35 = require("@elementor/store");
@@ -1903,8 +1911,8 @@ function removeProps({
 }
 
 // src/components/overridable-props/indicator.tsx
-var React14 = __toESM(require("react"));
-var import_react9 = require("react");
+var React15 = __toESM(require("react"));
+var import_react10 = require("react");
 var import_icons8 = require("@elementor/icons");
 var import_ui9 = require("@elementor/ui");
 var import_i18n12 = require("@wordpress/i18n");
@@ -1963,32 +1971,32 @@ var Content = (0, import_ui9.styled)(import_ui9.Box)`
 		}
 	}
 `;
-var Indicator = (0, import_react9.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React14.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React14.createElement(
+var Indicator = (0, import_react10.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React15.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React15.createElement(
   IconContainer,
   {
     className: "icon",
     "aria-label": isOverridable ? (0, import_i18n12.__)("Overridable property", "elementor") : (0, import_i18n12.__)("Make prop overridable", "elementor")
   },
-  isOverridable ? /* @__PURE__ */ React14.createElement(import_icons8.CheckIcon, { fontSize: SIZE }) : /* @__PURE__ */ React14.createElement(import_icons8.PlusIcon, { fontSize: SIZE })
+  isOverridable ? /* @__PURE__ */ React15.createElement(import_icons8.CheckIcon, { fontSize: SIZE }) : /* @__PURE__ */ React15.createElement(import_icons8.PlusIcon, { fontSize: SIZE })
 )));
 
 // src/components/overridable-props/overridable-prop-form.tsx
-var React15 = __toESM(require("react"));
-var import_react10 = require("react");
+var React16 = __toESM(require("react"));
+var import_react11 = require("react");
 var import_editor_ui5 = require("@elementor/editor-ui");
 var import_ui10 = require("@elementor/ui");
 var import_i18n13 = require("@wordpress/i18n");
 var SIZE2 = "tiny";
 var DEFAULT_GROUP = { value: null, label: (0, import_i18n13.__)("Default", "elementor") };
 function OverridablePropForm({ onSubmit, groups, currentValue }) {
-  const [propLabel, setPropLabel] = (0, import_react10.useState)(currentValue?.label ?? null);
-  const [group, setGroup] = (0, import_react10.useState)(currentValue?.groupId ?? groups?.[0]?.value ?? null);
+  const [propLabel, setPropLabel] = (0, import_react11.useState)(currentValue?.label ?? null);
+  const [group, setGroup] = (0, import_react11.useState)(currentValue?.groupId ?? groups?.[0]?.value ?? null);
   const name = (0, import_i18n13.__)("Name", "elementor");
   const groupName = (0, import_i18n13.__)("Group Name", "elementor");
   const isCreate = currentValue === void 0;
   const title = isCreate ? (0, import_i18n13.__)("Create new property", "elementor") : (0, import_i18n13.__)("Update property", "elementor");
   const ctaLabel = isCreate ? (0, import_i18n13.__)("Create", "elementor") : (0, import_i18n13.__)("Update", "elementor");
-  return /* @__PURE__ */ React15.createElement(import_editor_ui5.Form, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React15.createElement(import_ui10.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(import_editor_ui5.Form, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React16.createElement(import_ui10.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React16.createElement(
     import_ui10.Stack,
     {
       direction: "row",
@@ -1997,8 +2005,8 @@ function OverridablePropForm({ onSubmit, groups, currentValue }) {
       px: 1.5,
       sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%", mb: 1.5 }
     },
-    /* @__PURE__ */ React15.createElement(import_ui10.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
-  ), /* @__PURE__ */ React15.createElement(import_ui10.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React15.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React15.createElement(import_ui10.FormLabel, { size: "tiny" }, name)), /* @__PURE__ */ React15.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(import_ui10.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
+  ), /* @__PURE__ */ React16.createElement(import_ui10.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React16.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React16.createElement(import_ui10.FormLabel, { size: "tiny" }, name)), /* @__PURE__ */ React16.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React16.createElement(
     import_ui10.TextField,
     {
       name,
@@ -2008,7 +2016,7 @@ function OverridablePropForm({ onSubmit, groups, currentValue }) {
       value: propLabel ?? "",
       onChange: (e) => setPropLabel(e.target.value)
     }
-  ))), /* @__PURE__ */ React15.createElement(import_ui10.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React15.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React15.createElement(import_ui10.FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React15.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React15.createElement(
+  ))), /* @__PURE__ */ React16.createElement(import_ui10.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React16.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React16.createElement(import_ui10.FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React16.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React16.createElement(
     import_ui10.Select,
     {
       name: groupName,
@@ -2025,8 +2033,8 @@ function OverridablePropForm({ onSubmit, groups, currentValue }) {
         return groups?.find(({ value }) => value === selectedValue)?.label ?? selectedValue;
       }
     },
-    (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React15.createElement(import_editor_ui5.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
-  ))), /* @__PURE__ */ React15.createElement(import_ui10.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React15.createElement(import_ui10.Button, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
+    (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React16.createElement(import_editor_ui5.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
+  ))), /* @__PURE__ */ React16.createElement(import_ui10.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React16.createElement(import_ui10.Button, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
 }
 
 // src/components/overridable-props/utils/get-overridable-prop.ts
@@ -2046,15 +2054,12 @@ function getOverridableProp({
 var FORBIDDEN_KEYS = ["_cssid", "attributes"];
 function OverridablePropIndicator() {
   const { bind } = (0, import_editor_controls2.useBoundProp)();
-  const currentDocument = (0, import_editor_documents9.getV1CurrentDocument)();
-  if (currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE || !currentDocument.id) {
+  const componentId = selectCurrentComponentId((0, import_store35.__getState)());
+  if (!isPropAllowed(bind) || !componentId) {
     return null;
   }
-  if (!isPropAllowed(bind)) {
-    return null;
-  }
-  const overridableProps = selectOverridableProps((0, import_store35.__getState)(), currentDocument.id);
-  return /* @__PURE__ */ React16.createElement(Content2, { componentId: currentDocument.id, overridableProps });
+  const overridableProps = selectOverridableProps((0, import_store35.__getState)(), componentId);
+  return /* @__PURE__ */ React17.createElement(Content2, { componentId, overridableProps });
 }
 function Content2({ componentId, overridableProps }) {
   const {
@@ -2062,7 +2067,11 @@ function Content2({ componentId, overridableProps }) {
     elementType
   } = (0, import_editor_editing_panel2.useElement)();
   const { value, bind, propType } = (0, import_editor_controls2.useBoundProp)();
-  const { value: overridableValue, setValue: setOverridableValue } = (0, import_editor_controls2.useBoundProp)(componentOverridablePropTypeUtil);
+  const contextOverridableValue = useOverridablePropValue();
+  const { value: boundPropOverridableValue, setValue: setOverridableValue } = (0, import_editor_controls2.useBoundProp)(
+    componentOverridablePropTypeUtil
+  );
+  const overridableValue = boundPropOverridableValue ?? contextOverridableValue;
   const popupState = (0, import_ui11.usePopupState)({
     variant: "popover"
   });
@@ -2091,7 +2100,7 @@ function Content2({ componentId, overridableProps }) {
     popupState.close();
   };
   const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
-  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(import_ui11.Tooltip, { placement: "top", title: (0, import_i18n14.__)("Override Property", "elementor") }, /* @__PURE__ */ React16.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(import_ui11.Tooltip, { placement: "top", title: (0, import_i18n14.__)("Override Property", "elementor") }, /* @__PURE__ */ React17.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React17.createElement(
     import_ui11.Popover,
     {
       disableScrollLock: true,
@@ -2108,7 +2117,7 @@ function Content2({ componentId, overridableProps }) {
       },
       ...popoverProps
     },
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React17.createElement(
       OverridablePropForm,
       {
         onSubmit: handleSubmit,
@@ -2210,10 +2219,10 @@ function initMcp() {
 }
 
 // src/populate-store.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_store37 = require("@elementor/store");
 function PopulateStore() {
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     (0, import_store37.__dispatch)(loadComponents());
   }, []);
   return null;
@@ -2377,14 +2386,14 @@ var updateArchivedComponentBeforeSave = async () => {
 };
 
 // src/sync/update-components-before-save.ts
-var import_editor_documents10 = require("@elementor/editor-documents");
+var import_editor_documents9 = require("@elementor/editor-documents");
 async function updateComponentsBeforeSave({ status, elements }) {
   if (status !== "publish") {
     return;
   }
   const componentIds = await getComponentIds(elements);
   const componentDocumentData = await Promise.all(componentIds.map(getComponentDocumentData));
-  const draftIds = componentDocumentData.filter((document) => !!document).filter(import_editor_documents10.isDocumentDirty).map((document) => document.id);
+  const draftIds = componentDocumentData.filter((document) => !!document).filter(import_editor_documents9.isDocumentDirty).map((document) => document.id);
   if (draftIds.length === 0) {
     return;
   }
@@ -2412,7 +2421,7 @@ function init() {
     (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
   );
   (0, import_editor_v1_adapters7.registerDataHook)("dependency", "editor/documents/close", (args) => {
-    const document = (0, import_editor_documents11.getV1CurrentDocument)();
+    const document = (0, import_editor_documents10.getV1CurrentDocument)();
     if (document.config.type === COMPONENT_DOCUMENT_TYPE) {
       args.mode = "autosave";
     }
@@ -2442,7 +2451,7 @@ function init() {
     component: ComponentPanelHeader
   });
   (0, import_editor_v1_adapters7.registerDataHook)("after", "editor/documents/attach-preview", async () => {
-    const { id, config } = (0, import_editor_documents11.getV1CurrentDocument)();
+    const { id, config } = (0, import_editor_documents10.getV1CurrentDocument)();
     if (id) {
       removeComponentStyles(id);
     }