@elementor/editor-variables 4.0.0-659 → 4.0.0-661

package/dist/index.js

@@ -49,7 +49,7 @@ var import_editor_panels2 = require("@elementor/editor-panels");
 var import_editor_props7 = require("@elementor/editor-props");
 var import_menus = require("@elementor/menus");
 
-// src/components/open-panel-from-url.tsx
+// src/components/open-panel-from-event.tsx
 var import_react14 = require("react");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 
@@ -2190,20 +2190,54 @@ var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
   ));
 };
 
+// src/components/open-panel-from-event.tsx
+var EVENT_NAME = "elementor/open-variables-manager";
+var DEFAULT_PANEL_ROUTE = "panel/elements/categories";
+function OpenPanelFromEvent() {
+  const { open } = usePanelActions();
+  const pendingRef = (0, import_react14.useRef)(false);
+  const [readyToOpen, setReadyToOpen] = (0, import_react14.useState)(false);
+  (0, import_react14.useEffect)(() => {
+    if (readyToOpen) {
+      setReadyToOpen(false);
+      open();
+    }
+  }, [readyToOpen, open]);
+  (0, import_react14.useEffect)(() => {
+    return (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.routeOpenEvent)(DEFAULT_PANEL_ROUTE), () => {
+      if (pendingRef.current) {
+        pendingRef.current = false;
+        setReadyToOpen(true);
+      }
+    });
+  }, []);
+  (0, import_react14.useEffect)(() => {
+    const handler = () => {
+      pendingRef.current = true;
+      (0, import_editor_v1_adapters3.__privateOpenRoute)(DEFAULT_PANEL_ROUTE);
+    };
+    window.addEventListener(EVENT_NAME, handler);
+    return () => window.removeEventListener(EVENT_NAME, handler);
+  }, []);
+  return null;
+}
+
 // src/components/open-panel-from-url.tsx
+var import_react15 = require("react");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var ACTIVE_PANEL_PARAM = "active-panel";
 var PANEL_ID = "variables-manager";
-var DEFAULT_PANEL_ROUTE = "panel/elements";
+var DEFAULT_PANEL_ROUTE2 = "panel/elements";
 function OpenPanelFromUrl() {
   const { open } = usePanelActions();
-  const hasOpened = (0, import_react14.useRef)(false);
-  (0, import_react14.useEffect)(() => {
+  const hasOpened = (0, import_react15.useRef)(false);
+  (0, import_react15.useEffect)(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
     if (activePanel !== PANEL_ID) {
       return;
     }
-    const cleanup = (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.routeOpenEvent)(DEFAULT_PANEL_ROUTE), () => {
+    const cleanup = (0, import_editor_v1_adapters4.__privateListenTo)((0, import_editor_v1_adapters4.routeOpenEvent)(DEFAULT_PANEL_ROUTE2), () => {
       if (hasOpened.current) {
         return;
       }
@@ -2222,7 +2256,7 @@ var React33 = __toESM(require("react"));
 var import_editor_controls11 = require("@elementor/editor-controls");
 
 // src/components/ui/variable/assigned-variable.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var React24 = __toESM(require("react"));
 var import_editor_controls6 = require("@elementor/editor-controls");
 var import_icons12 = require("@elementor/icons");
@@ -2246,25 +2280,25 @@ function createUnlinkHandler(variable, propTypeKey, setValue) {
 
 // src/components/variable-selection-popover.tsx
 var React22 = __toESM(require("react"));
-var import_react20 = require("react");
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_react21 = require("react");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 
 // src/context/variable-selection-popover.context.tsx
 var React15 = __toESM(require("react"));
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_ui15 = require("@elementor/ui");
-var PopoverContentRefContext = (0, import_react15.createContext)(null);
+var PopoverContentRefContext = (0, import_react16.createContext)(null);
 var PopoverContentRefContextProvider = ({ children }) => {
-  const [anchorRef, setAnchorRef] = (0, import_react15.useState)(null);
+  const [anchorRef, setAnchorRef] = (0, import_react16.useState)(null);
   return /* @__PURE__ */ React15.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React15.createElement(import_ui15.Box, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
-  return (0, import_react15.useContext)(PopoverContentRefContext);
+  return (0, import_react16.useContext)(PopoverContentRefContext);
 };
 
 // src/components/variable-creation.tsx
 var React17 = __toESM(require("react"));
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_editor_controls4 = require("@elementor/editor-controls");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons6 = require("@elementor/icons");
@@ -2325,11 +2359,11 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   const { setVariableValue: setVariable, path } = useVariableBoundProp();
   const { propType } = (0, import_editor_controls4.useBoundProp)();
   const initialValue = useInitialValue();
-  const [value, setValue] = (0, import_react16.useState)(initialValue);
-  const [label, setLabel] = (0, import_react16.useState)("");
-  const [errorMessage, setErrorMessage] = (0, import_react16.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react16.useState)("");
-  const [propTypeKey, setPropTypeKey] = (0, import_react16.useState)(propTypeUtil.key);
+  const [value, setValue] = (0, import_react17.useState)(initialValue);
+  const [label, setLabel] = (0, import_react17.useState)("");
+  const [errorMessage, setErrorMessage] = (0, import_react17.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react17.useState)("");
+  const [propTypeKey, setPropTypeKey] = (0, import_react17.useState)(propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const resetFields = () => {
     setValue("");
@@ -2449,7 +2483,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
 
 // src/components/variable-edit.tsx
 var React19 = __toESM(require("react"));
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_editor_controls5 = require("@elementor/editor-controls");
 var import_editor_current_user3 = require("@elementor/editor-current-user");
 var import_editor_ui7 = require("@elementor/editor-ui");
@@ -2459,7 +2493,7 @@ var import_i18n13 = require("@wordpress/i18n");
 
 // src/components/ui/edit-confirmation-dialog.tsx
 var React18 = __toESM(require("react"));
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_icons7 = require("@elementor/icons");
 var import_ui18 = require("@elementor/ui");
 var import_i18n12 = require("@wordpress/i18n");
@@ -2469,7 +2503,7 @@ var EditConfirmationDialog = ({
   onConfirm,
   onSuppressMessage
 }) => {
-  const [dontShowAgain, setDontShowAgain] = (0, import_react17.useState)(false);
+  const [dontShowAgain, setDontShowAgain] = (0, import_react18.useState)(false);
   const handleSave = () => {
     if (dontShowAgain) {
       onSuppressMessage?.();
@@ -2503,20 +2537,20 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { setVariableValue: notifyBoundPropChange, variableId } = useVariableBoundProp();
   const { propType } = (0, import_editor_controls5.useBoundProp)();
   const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user3.useSuppressedMessage)(EDIT_CONFIRMATION_DIALOG_ID);
-  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react18.useState)(false);
-  const [editConfirmation, setEditConfirmation] = (0, import_react18.useState)(false);
-  const [errorMessage, setErrorMessage] = (0, import_react18.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react18.useState)("");
+  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react19.useState)(false);
+  const [editConfirmation, setEditConfirmation] = (0, import_react19.useState)(false);
+  const [errorMessage, setErrorMessage] = (0, import_react19.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react19.useState)("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const variable = useVariable(editId);
-  const [propTypeKey, setPropTypeKey] = (0, import_react18.useState)(variable?.type ?? propTypeUtil.key);
+  const [propTypeKey, setPropTypeKey] = (0, import_react19.useState)(variable?.type ?? propTypeUtil.key);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
   const userPermissions = usePermissions();
-  const [value, setValue] = (0, import_react18.useState)(() => variable.value);
-  const [label, setLabel] = (0, import_react18.useState)(() => variable.label);
-  (0, import_react18.useEffect)(() => {
+  const [value, setValue] = (0, import_react19.useState)(() => variable.value);
+  const [label, setLabel] = (0, import_react19.useState)(() => variable.label);
+  (0, import_react19.useEffect)(() => {
     styleVariablesRepository.update({
       [editId]: {
         ...variable,
@@ -2680,7 +2714,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var React21 = __toESM(require("react"));
 var import_editor_ui9 = require("@elementor/editor-ui");
 var import_editor_ui10 = require("@elementor/editor-ui");
@@ -2787,7 +2821,7 @@ var getProUpgradeUrl = (variableType) => `https://go.elementor.com/renew-license
 var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled = false }) => {
   const { icon: VariableIcon, startIcon, variableType, propTypeUtil, emptyState } = useVariableType();
   const { value: variable, setValue: setVariable, path } = useVariableBoundProp();
-  const [searchValue, setSearchValue] = (0, import_react19.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react20.useState)("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
@@ -2959,10 +2993,10 @@ var VIEW_LIST = "list";
 var VIEW_ADD = "add";
 var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
-  const [currentView, setCurrentView] = (0, import_react20.useState)(VIEW_LIST);
-  const [editId, setEditId] = (0, import_react20.useState)("");
+  const [currentView, setCurrentView] = (0, import_react21.useState)(VIEW_LIST);
+  const [editId, setEditId] = (0, import_react21.useState)("");
   const { open } = usePanelActions();
-  const onSettingsAvailable = (0, import_editor_v1_adapters4.isExperimentActive)("e_variables_manager") ? () => {
+  const onSettingsAvailable = (0, import_editor_v1_adapters5.isExperimentActive)("e_variables_manager") ? () => {
     open();
   } : void 0;
   return /* @__PURE__ */ React22.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React22.createElement(PopoverContentRefContextProvider, null, RenderView({
@@ -3071,8 +3105,8 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
 var AssignedVariable = ({ variable, propTypeKey }) => {
   const { startIcon, propTypeUtil } = getVariableType(propTypeKey);
   const { setValue } = (0, import_editor_controls6.useBoundProp)();
-  const anchorRef = (0, import_react21.useRef)(null);
-  const popupId = (0, import_react21.useId)();
+  const anchorRef = (0, import_react22.useRef)(null);
+  const popupId = (0, import_react22.useId)();
   const popupState = (0, import_ui24.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
@@ -3112,14 +3146,14 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/deleted-variable.tsx
 var React28 = __toESM(require("react"));
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_editor_controls8 = require("@elementor/editor-controls");
 var import_ui28 = require("@elementor/ui");
 var import_i18n19 = require("@wordpress/i18n");
 
 // src/components/variable-restore.tsx
 var React25 = __toESM(require("react"));
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_editor_controls7 = require("@elementor/editor-controls");
 var import_editor_ui11 = require("@elementor/editor-ui");
 var import_ui25 = require("@elementor/ui");
@@ -3133,11 +3167,11 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
-  const [errorMessage, setErrorMessage] = (0, import_react22.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react22.useState)("");
-  const [label, setLabel] = (0, import_react22.useState)(variable.label);
-  const [value, setValue] = (0, import_react22.useState)(variable.value);
-  const [propTypeKey, setPropTypeKey] = (0, import_react22.useState)(variable?.type ?? propTypeUtil.key);
+  const [errorMessage, setErrorMessage] = (0, import_react23.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react23.useState)("");
+  const [label, setLabel] = (0, import_react23.useState)(variable.label);
+  const [value, setValue] = (0, import_react23.useState)(variable.value);
+  const [propTypeKey, setPropTypeKey] = (0, import_react23.useState)(variable?.type ?? propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError({
     value: variable.label,
     message: ERROR_MESSAGES.DUPLICATED_LABEL
@@ -3293,11 +3327,11 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const { propTypeUtil } = getVariableType(propTypeKey);
   const boundProp = (0, import_editor_controls8.useBoundProp)();
   const userPermissions = usePermissions();
-  const [showInfotip, setShowInfotip] = (0, import_react23.useState)(false);
+  const [showInfotip, setShowInfotip] = (0, import_react24.useState)(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
-  const deletedChipAnchorRef = (0, import_react23.useRef)(null);
-  const popupId = (0, import_react23.useId)();
+  const deletedChipAnchorRef = (0, import_react24.useRef)(null);
+  const popupId = (0, import_react24.useId)();
   const popupState = (0, import_ui28.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-restore-${popupId}`
@@ -3384,7 +3418,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/mismatch-variable.tsx
 var React30 = __toESM(require("react"));
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_editor_controls9 = require("@elementor/editor-controls");
 var import_ui30 = require("@elementor/ui");
 var import_i18n21 = require("@wordpress/i18n");
@@ -3422,13 +3456,13 @@ var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
 // src/components/ui/variable/mismatch-variable.tsx
 var MismatchVariable = ({ variable }) => {
   const { setValue, value } = (0, import_editor_controls9.useBoundProp)();
-  const anchorRef = (0, import_react24.useRef)(null);
-  const popupId = (0, import_react24.useId)();
+  const anchorRef = (0, import_react25.useRef)(null);
+  const popupId = (0, import_react25.useId)();
   const popupState = (0, import_ui30.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
-  const [infotipVisible, setInfotipVisible] = (0, import_react24.useState)(false);
+  const [infotipVisible, setInfotipVisible] = (0, import_react25.useState)(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const triggerSelect = () => {
@@ -3501,7 +3535,7 @@ var MismatchVariable = ({ variable }) => {
 
 // src/components/ui/variable/missing-variable.tsx
 var React32 = __toESM(require("react"));
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_editor_controls10 = require("@elementor/editor-controls");
 var import_ui32 = require("@elementor/ui");
 var import_i18n23 = require("@wordpress/i18n");
@@ -3531,7 +3565,7 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
   const { setValue } = (0, import_editor_controls10.useBoundProp)();
-  const [infotipVisible, setInfotipVisible] = (0, import_react25.useState)(false);
+  const [infotipVisible, setInfotipVisible] = (0, import_react26.useState)(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
@@ -3744,18 +3778,18 @@ function initMcp() {
 var React37 = __toESM(require("react"));
 var import_editor_props5 = require("@elementor/editor-props");
 var import_editor_ui13 = require("@elementor/editor-ui");
-var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 var import_icons16 = require("@elementor/icons");
 var import_i18n26 = require("@wordpress/i18n");
 
 // src/components/fields/color-field.tsx
 var React35 = __toESM(require("react"));
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_ui33 = require("@elementor/ui");
 var ColorField = ({ value, onChange, onValidationChange }) => {
-  const [color, setColor] = (0, import_react26.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react26.useState)("");
-  const defaultRef = (0, import_react26.useRef)(null);
+  const [color, setColor] = (0, import_react27.useState)(value);
+  const [errorMessage, setErrorMessage] = (0, import_react27.useState)("");
+  const defaultRef = (0, import_react27.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const handleChange = (newValue) => {
     setColor(newValue);
@@ -3794,15 +3828,15 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 
 // src/components/fields/font-field.tsx
 var React36 = __toESM(require("react"));
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_editor_controls13 = require("@elementor/editor-controls");
 var import_editor_ui12 = require("@elementor/editor-ui");
 var import_icons15 = require("@elementor/icons");
 var import_ui34 = require("@elementor/ui");
 var import_i18n25 = require("@wordpress/i18n");
 var FontField = ({ value, onChange, onValidationChange }) => {
-  const [fontFamily, setFontFamily] = (0, import_react27.useState)(value);
-  const defaultRef = (0, import_react27.useRef)(null);
+  const [fontFamily, setFontFamily] = (0, import_react28.useState)(value);
+  const defaultRef = (0, import_react28.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const fontPopoverState = (0, import_ui34.usePopupState)({ variant: "popover" });
   const fontFamilies = (0, import_editor_controls13.useFontFamilies)();
@@ -3823,7 +3857,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
     handleChange(newFontFamily);
     fontPopoverState.close();
   };
-  const id2 = (0, import_react27.useId)();
+  const id2 = (0, import_react28.useId)();
   return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
     import_ui34.UnstableTag,
     {
@@ -3886,7 +3920,7 @@ function registerVariableTypes() {
     defaultValue: "#ffffff",
     menuActionsFactory: ({ variable, variableId, handlers }) => {
       const actions = [];
-      if (!(0, import_editor_v1_adapters5.isExperimentActive)("e_design_system_sync")) {
+      if (!(0, import_editor_v1_adapters6.isExperimentActive)("e_design_system_sync")) {
         return [];
       }
       if (variable.sync_to_v3) {
@@ -3939,8 +3973,8 @@ function registerVariableTypes() {
 
 // src/renderers/style-variables-renderer.tsx
 var React38 = __toESM(require("react"));
-var import_react28 = require("react");
-var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_react29 = require("react");
+var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 var import_ui35 = require("@elementor/ui");
 var VARIABLES_WRAPPER = "body";
 function StyleVariablesRenderer() {
@@ -3955,11 +3989,11 @@ function StyleVariablesRenderer() {
   return /* @__PURE__ */ React38.createElement(import_ui35.Portal, { container }, /* @__PURE__ */ React38.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
-  return (0, import_editor_v1_adapters6.__privateUseListenTo)((0, import_editor_v1_adapters6.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters6.getCanvasIframeDocument)()?.head);
+  return (0, import_editor_v1_adapters7.__privateUseListenTo)((0, import_editor_v1_adapters7.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters7.getCanvasIframeDocument)()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = (0, import_react28.useState)({});
-  (0, import_react28.useEffect)(() => {
+  const [variables, setVariables] = (0, import_react29.useState)({});
+  (0, import_react29.useEffect)(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();
@@ -4061,6 +4095,10 @@ function init() {
     id: "variables-open-panel-from-url",
     component: OpenPanelFromUrl
   });
+  (0, import_editor.injectIntoLogic)({
+    id: "variables-open-panel-from-event",
+    component: OpenPanelFromEvent
+  });
   (0, import_editor_panels2.__registerPanel)(panel);
 }
 function hasVariableAssigned(value) {