@elementor/editor-components 3.35.0-360 → 3.35.0-361

package/dist/index.js

@@ -42,7 +42,7 @@ var import_editor_editing_panel5 = 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");
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
-var import_store50 = require("@elementor/store");
+var import_store48 = require("@elementor/store");
 var import_i18n17 = require("@wordpress/i18n");
 
 // src/component-instance-transformer.ts
@@ -245,6 +245,9 @@ var selectCurrentComponentId = (0, import_store2.__createSelector)(
   getCurrentComponentId,
   (currentComponentId) => currentComponentId
 );
+var useCurrentComponentId = () => {
+  return (0, import_store2.__useSelector)(selectCurrentComponentId);
+};
 var selectArchivedComponents = (0, import_store2.__createSelector)(
   selectArchivedData,
   (archivedData) => archivedData
@@ -339,7 +342,6 @@ var componentOverrideTransformer = (0, import_editor_canvas3.createTransformer)(
 var React2 = __toESM(require("react"));
 var import_editor_documents3 = require("@elementor/editor-documents");
 var import_icons2 = require("@elementor/icons");
-var import_store9 = require("@elementor/store");
 var import_ui2 = require("@elementor/ui");
 var import_i18n2 = require("@wordpress/i18n");
 
@@ -438,7 +440,7 @@ function useOverridableProps(componentId) {
 
 // src/components/component-panel-header/component-panel-header.tsx
 var ComponentPanelHeader = () => {
-  const currentComponentId = (0, import_store9.__useSelector)(selectCurrentComponentId);
+  const currentComponentId = useCurrentComponentId();
   const overridableProps = useOverridableProps(currentComponentId);
   const onBack = useNavigateBack();
   const componentName = getComponentName();
@@ -523,10 +525,10 @@ var import_ui6 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
 
 // src/hooks/use-components.ts
-var import_store11 = require("@elementor/store");
+var import_store10 = require("@elementor/store");
 var useComponents = () => {
-  const components = (0, import_store11.__useSelector)(selectComponents);
-  const isLoading = (0, import_store11.__useSelector)(selectLoadIsPending);
+  const components = (0, import_store10.__useSelector)(selectComponents);
+  const isLoading = (0, import_store10.__useSelector)(selectLoadIsPending);
   return { components, isLoading };
 };
 
@@ -541,9 +543,9 @@ var import_i18n5 = require("@wordpress/i18n");
 
 // src/store/actions/archive-component.ts
 var import_editor_documents4 = require("@elementor/editor-documents");
-var import_store13 = require("@elementor/store");
+var import_store12 = require("@elementor/store");
 var archiveComponent = (componentId) => {
-  const store = (0, import_store13.__getStore)();
+  const store = (0, import_store12.__getStore)();
   const dispatch9 = store?.dispatch;
   if (!dispatch9) {
     return;
@@ -562,7 +564,7 @@ var import_i18n4 = require("@wordpress/i18n");
 
 // src/utils/tracking.ts
 var import_mixpanel = require("@elementor/mixpanel");
-var import_store15 = require("@elementor/store");
+var import_store14 = require("@elementor/store");
 var trackComponentEvent = ({ action, ...data }) => {
   const { dispatchEvent, config } = (0, import_mixpanel.getMixpanel)();
   if (!config?.names?.components?.[action]) {
@@ -579,7 +581,7 @@ var onElementDrop = (_args, element) => {
   const componentName = editorSettings?.title;
   const componentUID = editorSettings?.component_uid;
   const instanceId = element.id;
-  const createdThisSession = selectCreatedThisSession((0, import_store15.__getState)());
+  const createdThisSession = selectCreatedThisSession((0, import_store14.__getState)());
   const isSameSessionReuse = componentUID && createdThisSession.includes(componentUID);
   const eventsManagerConfig = window.elementorCommon.eventsManager.config;
   const { locations, secondaryLocations } = eventsManagerConfig;
@@ -773,7 +775,7 @@ var getComponentIds = async (elements) => {
 };
 
 // src/store/actions/load-components-overridable-props.ts
-var import_store17 = require("@elementor/store");
+var import_store16 = require("@elementor/store");
 function loadComponentsOverridableProps(componentIds) {
   if (!componentIds.length) {
     return;
@@ -781,7 +783,7 @@ function loadComponentsOverridableProps(componentIds) {
   componentIds.forEach(loadComponentOverrides);
 }
 async function loadComponentOverrides(componentId) {
-  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded((0, import_store17.__getState)(), componentId);
+  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded((0, import_store16.__getState)(), componentId);
   if (isOverridablePropsLoaded) {
     return;
   }
@@ -789,7 +791,7 @@ async function loadComponentOverrides(componentId) {
   if (!overridableProps) {
     return;
   }
-  (0, import_store17.__dispatch)(
+  (0, import_store16.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps
@@ -798,12 +800,12 @@ async function loadComponentOverrides(componentId) {
 }
 
 // src/store/actions/load-components-styles.ts
-var import_store19 = require("@elementor/store");
+var import_store18 = require("@elementor/store");
 async function loadComponentsStyles(componentIds) {
   if (!componentIds.length) {
     return;
   }
-  const knownComponents = selectStyles((0, import_store19.__getState)());
+  const knownComponents = selectStyles((0, import_store18.__getState)());
   const unknownComponentIds = componentIds.filter((id) => !knownComponents[id]);
   if (!unknownComponentIds.length) {
     return;
@@ -821,7 +823,7 @@ function addStyles(data) {
   const styles = Object.fromEntries(
     data.map(([componentId, componentData]) => [componentId, extractStyles(componentData)])
   );
-  (0, import_store19.__dispatch)(slice.actions.addStyles(styles));
+  (0, import_store18.__dispatch)(slice.actions.addStyles(styles));
 }
 function extractStyles(element) {
   return [...Object.values(element.styles ?? {}), ...(element.elements ?? []).flatMap(extractStyles)];
@@ -1176,18 +1178,18 @@ var import_i18n8 = require("@wordpress/i18n");
 
 // src/store/actions/create-unpublished-component.ts
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-var import_store21 = require("@elementor/store");
+var import_store20 = require("@elementor/store");
 var import_utils2 = require("@elementor/utils");
 function createUnpublishedComponent(name, element, eventData, overridableProps, uid) {
   const generatedUid = uid ?? (0, import_utils2.generateUniqueId)("component");
   const componentBase = { uid: generatedUid, name, overridableProps };
-  (0, import_store21.__dispatch)(
+  (0, import_store20.__dispatch)(
     slice.actions.addUnpublished({
       ...componentBase,
       elements: [element]
     })
   );
-  (0, import_store21.__dispatch)(slice.actions.addCreatedThisSession(generatedUid));
+  (0, import_store20.__dispatch)(slice.actions.addCreatedThisSession(generatedUid));
   replaceElementWithComponent(element, componentBase);
   trackComponentEvent({
     action: "created",
@@ -1447,16 +1449,17 @@ var React11 = __toESM(require("react"));
 var import_react8 = require("react");
 var import_editor_documents8 = require("@elementor/editor-documents");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
-var import_store25 = require("@elementor/store");
+var import_store24 = require("@elementor/store");
+var import_utils4 = require("@elementor/utils");
 
 // src/store/actions/update-current-component.ts
 var import_editor_documents7 = require("@elementor/editor-documents");
-var import_store23 = require("@elementor/store");
+var import_store22 = require("@elementor/store");
 function updateCurrentComponent({
   path,
   currentComponentId
 }) {
-  const dispatch9 = (0, import_store23.__getStore)()?.dispatch;
+  const dispatch9 = (0, import_store22.__getStore)()?.dispatch;
   if (!dispatch9) {
     return;
   }
@@ -1645,21 +1648,22 @@ function BlockEditPage() {
 
 // src/components/edit-component/edit-component.tsx
 function EditComponent() {
-  const currentComponentId = (0, import_store25.__useSelector)(selectCurrentComponentId);
+  const currentComponentId = useCurrentComponentId();
   useHandleDocumentSwitches();
-  const onBack = useNavigateBack();
+  const navigateBack = useNavigateBack();
+  const onClose = (0, import_utils4.throttle)(navigateBack, 100);
   const elementDom = getComponentDOMElement(currentComponentId ?? void 0);
   if (!elementDom) {
     return null;
   }
-  return /* @__PURE__ */ React11.createElement(ComponentModal, { element: elementDom, onClose: onBack });
+  return /* @__PURE__ */ React11.createElement(ComponentModal, { element: elementDom, onClose });
 }
 function useHandleDocumentSwitches() {
   const documentsManager = (0, import_editor_documents8.getV1DocumentsManager)();
-  const currentComponentId = (0, import_store25.__useSelector)(selectCurrentComponentId);
-  const path = (0, import_store25.__useSelector)(selectPath);
+  const currentComponentId = useCurrentComponentId();
+  const path = (0, import_store24.__useSelector)(selectPath);
   (0, import_react8.useEffect)(() => {
-    return (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.commandEndEvent)("editor/documents/attach-preview"), () => {
+    return (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.commandEndEvent)("editor/documents/open"), () => {
       const nextDocument = documentsManager.getCurrent();
       if (nextDocument.id === currentComponentId) {
         return;
@@ -1729,7 +1733,7 @@ var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_elements5 = require("@elementor/editor-elements");
 var import_editor_panels = require("@elementor/editor-panels");
 var import_icons9 = require("@elementor/icons");
-var import_store27 = require("@elementor/store");
+var import_store26 = require("@elementor/store");
 var import_ui11 = require("@elementor/ui");
 var import_i18n12 = require("@wordpress/i18n");
 
@@ -1842,8 +1846,8 @@ function InstanceEditingPanel() {
   const { element } = (0, import_editor_editing_panel2.useElement)();
   const settings = (0, import_editor_elements5.useElementSetting)(element.id, "component_instance");
   const componentId = (componentInstancePropTypeUtil.extract(settings)?.component_id).value;
-  const component = componentId ? selectComponent((0, import_store27.__getState)(), componentId) : null;
-  const overridableProps = componentId ? selectOverridableProps((0, import_store27.__getState)(), componentId) : null;
+  const component = componentId ? selectComponent((0, import_store26.__getState)(), componentId) : null;
+  const overridableProps = componentId ? selectOverridableProps((0, import_store26.__getState)(), componentId) : null;
   const componentInstanceId = (0, import_editor_elements5.useSelectedElement)()?.element?.id ?? null;
   if (!componentId || !overridableProps || !component) {
     return null;
@@ -1861,7 +1865,6 @@ function InstanceEditingPanel() {
 var React17 = __toESM(require("react"));
 var import_editor_controls = require("@elementor/editor-controls");
 var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
-var import_store31 = require("@elementor/store");
 
 // src/prop-types/component-overridable-prop-type.ts
 var import_editor_props4 = require("@elementor/editor-props");
@@ -1887,9 +1890,9 @@ function OverridablePropProvider({ children, ...props }) {
 var useOverridablePropValue = () => (0, import_react10.useContext)(OverridablePropContext)?.value;
 
 // src/store/actions/update-overridable-prop-origin-value.ts
-var import_store29 = require("@elementor/store");
+var import_store28 = require("@elementor/store");
 function updateOverridablePropOriginValue(componentId, propValue) {
-  const overridableProps = selectOverridableProps((0, import_store29.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store28.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -1907,7 +1910,7 @@ function updateOverridablePropOriginValue(componentId, propValue) {
       }
     }
   };
-  (0, import_store29.__dispatch)(
+  (0, import_store28.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: newOverridableProps
@@ -1922,9 +1925,9 @@ function OverridablePropControl({
 }) {
   const { elementType } = (0, import_editor_editing_panel3.useElement)();
   const { value, bind, setValue, placeholder, ...propContext } = (0, import_editor_controls.useBoundProp)(componentOverridablePropTypeUtil);
-  const componentId = selectCurrentComponentId((0, import_store31.__getState)());
+  const componentId = useCurrentComponentId();
   if (!componentId) {
-    throw new Error("Component ID is required");
+    return null;
   }
   if (!value?.override_key) {
     throw new Error("Override key is required");
@@ -1961,13 +1964,13 @@ var React20 = __toESM(require("react"));
 var import_editor_controls2 = require("@elementor/editor-controls");
 var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
 var import_editor_elements6 = require("@elementor/editor-elements");
-var import_store37 = require("@elementor/store");
+var import_store35 = require("@elementor/store");
 var import_ui14 = require("@elementor/ui");
 var import_i18n16 = require("@wordpress/i18n");
 
 // src/store/actions/set-overridable-prop.ts
-var import_store33 = require("@elementor/store");
-var import_utils4 = require("@elementor/utils");
+var import_store31 = require("@elementor/store");
+var import_utils5 = require("@elementor/utils");
 var import_i18n13 = require("@wordpress/i18n");
 function setOverridableProp({
   componentId,
@@ -1980,7 +1983,7 @@ function setOverridableProp({
   widgetType,
   originValue
 }) {
-  const overridableProps = selectOverridableProps((0, import_store33.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store31.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -1994,7 +1997,7 @@ function setOverridableProp({
     groupId || existingOverridableProp?.groupId
   );
   const overridableProp = {
-    overrideKey: existingOverridableProp?.overrideKey || (0, import_utils4.generateUniqueId)("prop"),
+    overrideKey: existingOverridableProp?.overrideKey || (0, import_utils5.generateUniqueId)("prop"),
     label,
     elementId,
     propKey,
@@ -2027,7 +2030,7 @@ function setOverridableProp({
       overridableProp
     );
   }
-  (0, import_store33.__dispatch)(
+  (0, import_store31.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -2051,7 +2054,7 @@ function getUpdatedGroups(groups, groupId) {
   return { groups, currentGroupId: groupId };
 }
 function addNewGroup(groups, groupId) {
-  const currentGroupId = groupId || (0, import_utils4.generateUniqueId)("group");
+  const currentGroupId = groupId || (0, import_utils5.generateUniqueId)("group");
   const updatedGroups = {
     ...groups,
     items: {
@@ -2235,12 +2238,12 @@ function OverridablePropForm({ onSubmit, groups, currentValue }) {
 }
 
 // src/components/overridable-props/utils/get-overridable-prop.ts
-var import_store35 = require("@elementor/store");
+var import_store33 = require("@elementor/store");
 function getOverridableProp({
   componentId,
   overrideKey
 }) {
-  const overridableProps = selectOverridableProps((0, import_store35.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store33.__getState)(), componentId);
   if (!overridableProps) {
     return void 0;
   }
@@ -2251,11 +2254,11 @@ function getOverridableProp({
 var FORBIDDEN_KEYS = ["_cssid", "attributes"];
 function OverridablePropIndicator() {
   const { bind } = (0, import_editor_controls2.useBoundProp)();
-  const componentId = selectCurrentComponentId((0, import_store37.__getState)());
+  const componentId = useCurrentComponentId();
   if (!isPropAllowed(bind) || !componentId) {
     return null;
   }
-  const overridableProps = selectOverridableProps((0, import_store37.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store35.__getState)(), componentId);
   return /* @__PURE__ */ React20.createElement(Content2, { componentId, overridableProps });
 }
 function Content2({ componentId, overridableProps }) {
@@ -2340,7 +2343,7 @@ var import_editor_elements7 = require("@elementor/editor-elements");
 var import_editor_mcp = require("@elementor/editor-mcp");
 var import_http_client2 = require("@elementor/http-client");
 var import_schema6 = require("@elementor/schema");
-var import_utils5 = require("@elementor/utils");
+var import_utils6 = require("@elementor/utils");
 var InputSchema = {
   element_id: import_schema6.z.string().describe(
     'The unique identifier of the element to save as a component. Use the "list-elements" tool to find available element IDs in the current document.'
@@ -2387,7 +2390,7 @@ var handleSaveAsComponent = async (params) => {
   if (overridableProps) {
     updateElementDataWithOverridableProps(element, overridableProps);
   }
-  const uid = (0, import_utils5.generateUniqueId)("component");
+  const uid = (0, import_utils6.generateUniqueId)("component");
   try {
     await apiClient.validate({
       items: [
@@ -2409,7 +2412,7 @@ var handleSaveAsComponent = async (params) => {
 };
 function enrichOverridableProps(input, rootElement) {
   const enrichedProps = {};
-  const defaultGroupId = (0, import_utils5.generateUniqueId)("group");
+  const defaultGroupId = (0, import_utils6.generateUniqueId)("group");
   Object.entries(input.props).forEach(([, prop]) => {
     const { elementId, propKey } = prop;
     const element = findElementById(rootElement, elementId);
@@ -2430,7 +2433,7 @@ function enrichOverridableProps(input, rootElement) {
         `Property "${propKey}" does not exist in element "${elementId}" (type: ${widgetType}). Available properties: ${availableProps}`
       );
     }
-    const overrideKey = (0, import_utils5.generateUniqueId)("prop");
+    const overrideKey = (0, import_utils6.generateUniqueId)("prop");
     const originValue = element.settings?.[propKey] ? element.settings[propKey] : elementType.propsSchema[propKey].default ?? null;
     const label = generateLabel(propKey);
     enrichedProps[overrideKey] = {
@@ -2488,7 +2491,7 @@ function findElementById(root, targetId) {
   return null;
 }
 function generateLabel(propKey) {
-  const uniqueId = (0, import_utils5.generateUniqueId)("prop");
+  const uniqueId = (0, import_utils6.generateUniqueId)("prop");
   return `${uniqueId} - ${propKey}`;
 }
 function getValidElementTypes() {
@@ -2665,28 +2668,28 @@ function initMcp() {
 
 // src/populate-store.ts
 var import_react13 = require("react");
-var import_store39 = require("@elementor/store");
+var import_store37 = require("@elementor/store");
 function PopulateStore() {
   (0, import_react13.useEffect)(() => {
-    (0, import_store39.__dispatch)(loadComponents());
+    (0, import_store37.__dispatch)(loadComponents());
   }, []);
   return null;
 }
 
 // src/store/actions/remove-component-styles.ts
-var import_store40 = require("@elementor/store");
+var import_store38 = require("@elementor/store");
 function removeComponentStyles(id) {
   apiClient.invalidateComponentConfigCache(id);
-  (0, import_store40.__dispatch)(slice.actions.removeStyles({ id }));
+  (0, import_store38.__dispatch)(slice.actions.removeStyles({ id }));
 }
 
 // src/store/components-styles-provider.ts
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store42 = require("@elementor/store");
+var import_store40 = require("@elementor/store");
 var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
   key: "components-styles",
   priority: 100,
-  subscribe: (cb) => (0, import_store42.__subscribeWithSelector)(
+  subscribe: (cb) => (0, import_store40.__subscribeWithSelector)(
     (state) => state[SLICE_NAME],
     () => {
       cb();
@@ -2694,29 +2697,29 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
   ),
   actions: {
     all: () => {
-      return selectFlatStyles((0, import_store42.__getState)());
+      return selectFlatStyles((0, import_store40.__getState)());
     },
     get: (id) => {
-      return selectFlatStyles((0, import_store42.__getState)()).find((style) => style.id === id) ?? null;
+      return selectFlatStyles((0, import_store40.__getState)()).find((style) => style.id === id) ?? null;
     }
   }
 });
 
 // src/sync/create-components-before-save.ts
 var import_editor_elements8 = require("@elementor/editor-elements");
-var import_store44 = require("@elementor/store");
+var import_store42 = require("@elementor/store");
 async function createComponentsBeforeSave({
   elements,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents((0, import_store44.__getState)());
+  const unpublishedComponents = selectUnpublishedComponents((0, import_store42.__getState)());
   if (!unpublishedComponents.length) {
     return;
   }
   try {
     const uidToComponentId = await createComponents(unpublishedComponents, status);
     updateComponentInstances(elements, uidToComponentId);
-    (0, import_store44.__dispatch)(
+    (0, import_store42.__dispatch)(
       slice.actions.add(
         unpublishedComponents.map((component) => ({
           id: uidToComponentId.get(component.uid),
@@ -2726,7 +2729,7 @@ async function createComponentsBeforeSave({
         }))
       )
     );
-    (0, import_store44.__dispatch)(slice.actions.resetUnpublished());
+    (0, import_store42.__dispatch)(slice.actions.resetUnpublished());
   } catch (error) {
     throw new Error(`Failed to publish components and update component instances: ${error}`);
   }
@@ -2783,7 +2786,7 @@ function updateElementComponentId(elementId, componentId) {
 }
 
 // src/sync/set-component-overridable-props-settings-before-save.ts
-var import_store46 = require("@elementor/store");
+var import_store44 = require("@elementor/store");
 var setComponentOverridablePropsSettingsBeforeSave = ({
   container
 }) => {
@@ -2791,7 +2794,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
   if (!currentDocument || currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE) {
     return;
   }
-  const overridableProps = selectOverridableProps((0, import_store46.__getState)(), currentDocument.id);
+  const overridableProps = selectOverridableProps((0, import_store44.__getState)(), currentDocument.id);
   if (overridableProps) {
     container.settings.set("overridable_props", overridableProps);
   }
@@ -2799,7 +2802,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
 
 // src/sync/update-archived-component-before-save.ts
 var import_editor_notifications = require("@elementor/editor-notifications");
-var import_store48 = require("@elementor/store");
+var import_store46 = require("@elementor/store");
 var failedNotification = (message) => ({
   type: "error",
   message: `Failed to archive components: ${message}`,
@@ -2812,7 +2815,7 @@ var successNotification = (message) => ({
 });
 var updateArchivedComponentBeforeSave = async () => {
   try {
-    const archivedComponents = selectArchivedComponents((0, import_store48.__getState)());
+    const archivedComponents = selectArchivedComponents((0, import_store46.__getState)());
     if (!archivedComponents.length) {
       return;
     }
@@ -2862,7 +2865,7 @@ var beforeSave = ({ container, status }) => {
 // src/init.ts
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
-  (0, import_store50.__registerSlice)(slice);
+  (0, import_store48.__registerSlice)(slice);
   (0, import_editor_canvas8.registerElementType)(
     TYPE,
     (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })