@elementor/editor-variables 4.0.0-650 → 4.0.0-660

package/dist/index.mjs

@@ -5,9 +5,13 @@ import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { isTransformable as isTransformable2 } from "@elementor/editor-props";
 import { controlActionsMenu } from "@elementor/menus";
 
-// src/components/open-panel-from-url.tsx
-import { useEffect as useEffect4, useRef as useRef7 } from "react";
-import { __privateListenTo as listenTo, routeOpenEvent } from "@elementor/editor-v1-adapters";
+// src/components/open-panel-from-event.tsx
+import { useEffect as useEffect4, useRef as useRef7, useState as useState7 } from "react";
+import {
+  __privateListenTo as listenTo,
+  __privateOpenRoute as openRoute,
+  routeOpenEvent
+} from "@elementor/editor-v1-adapters";
 
 // src/components/variables-manager/variables-manager-panel.tsx
 import * as React14 from "react";
@@ -2174,20 +2178,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 = useRef7(false);
+  const [readyToOpen, setReadyToOpen] = useState7(false);
+  useEffect4(() => {
+    if (readyToOpen) {
+      setReadyToOpen(false);
+      open();
+    }
+  }, [readyToOpen, open]);
+  useEffect4(() => {
+    return listenTo(routeOpenEvent(DEFAULT_PANEL_ROUTE), () => {
+      if (pendingRef.current) {
+        pendingRef.current = false;
+        setReadyToOpen(true);
+      }
+    });
+  }, []);
+  useEffect4(() => {
+    const handler = () => {
+      pendingRef.current = true;
+      openRoute(DEFAULT_PANEL_ROUTE);
+    };
+    window.addEventListener(EVENT_NAME, handler);
+    return () => window.removeEventListener(EVENT_NAME, handler);
+  }, []);
+  return null;
+}
+
 // src/components/open-panel-from-url.tsx
+import { useEffect as useEffect5, useRef as useRef8 } from "react";
+import { __privateListenTo as listenTo2, routeOpenEvent as routeOpenEvent2 } from "@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 = useRef7(false);
-  useEffect4(() => {
+  const hasOpened = useRef8(false);
+  useEffect5(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
     if (activePanel !== PANEL_ID) {
       return;
     }
-    const cleanup = listenTo(routeOpenEvent(DEFAULT_PANEL_ROUTE), () => {
+    const cleanup = listenTo2(routeOpenEvent2(DEFAULT_PANEL_ROUTE2), () => {
       if (hasOpened.current) {
         return;
       }
@@ -2206,7 +2244,7 @@ import * as React33 from "react";
 import { useBoundProp as useBoundProp11 } from "@elementor/editor-controls";
 
 // src/components/ui/variable/assigned-variable.tsx
-import { useId, useRef as useRef8 } from "react";
+import { useId, useRef as useRef9 } from "react";
 import * as React24 from "react";
 import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
 import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
@@ -2230,16 +2268,16 @@ function createUnlinkHandler(variable, propTypeKey, setValue) {
 
 // src/components/variable-selection-popover.tsx
 import * as React22 from "react";
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 import { isExperimentActive } from "@elementor/editor-v1-adapters";
 
 // src/context/variable-selection-popover.context.tsx
 import * as React15 from "react";
-import { createContext as createContext2, useContext as useContext2, useState as useState7 } from "react";
+import { createContext as createContext2, useContext as useContext2, useState as useState8 } from "react";
 import { Box as Box2 } from "@elementor/ui";
 var PopoverContentRefContext = createContext2(null);
 var PopoverContentRefContextProvider = ({ children }) => {
-  const [anchorRef, setAnchorRef] = useState7(null);
+  const [anchorRef, setAnchorRef] = useState8(null);
   return /* @__PURE__ */ React15.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React15.createElement(Box2, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
@@ -2248,7 +2286,7 @@ var usePopoverContentRef = () => {
 
 // src/components/variable-creation.tsx
 import * as React17 from "react";
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { PopoverContent, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import { PopoverHeader, SectionPopoverBody } from "@elementor/editor-ui";
 import { ArrowLeftIcon } from "@elementor/icons";
@@ -2309,11 +2347,11 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   const { setVariableValue: setVariable, path } = useVariableBoundProp();
   const { propType } = useBoundProp4();
   const initialValue = useInitialValue();
-  const [value, setValue] = useState8(initialValue);
-  const [label, setLabel] = useState8("");
-  const [errorMessage, setErrorMessage] = useState8("");
-  const [valueFieldError, setValueFieldError] = useState8("");
-  const [propTypeKey, setPropTypeKey] = useState8(propTypeUtil.key);
+  const [value, setValue] = useState9(initialValue);
+  const [label, setLabel] = useState9("");
+  const [errorMessage, setErrorMessage] = useState9("");
+  const [valueFieldError, setValueFieldError] = useState9("");
+  const [propTypeKey, setPropTypeKey] = useState9(propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const resetFields = () => {
     setValue("");
@@ -2433,7 +2471,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
 
 // src/components/variable-edit.tsx
 import * as React19 from "react";
-import { useEffect as useEffect5, useState as useState10 } from "react";
+import { useEffect as useEffect6, useState as useState11 } from "react";
 import { PopoverContent as PopoverContent2, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import { useSuppressedMessage as useSuppressedMessage2 } from "@elementor/editor-current-user";
 import { PopoverHeader as PopoverHeader2, SectionPopoverBody as SectionPopoverBody2 } from "@elementor/editor-ui";
@@ -2443,7 +2481,7 @@ import { __ as __13 } from "@wordpress/i18n";
 
 // src/components/ui/edit-confirmation-dialog.tsx
 import * as React18 from "react";
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { AlertTriangleFilledIcon as AlertTriangleFilledIcon3 } from "@elementor/icons";
 import {
   Button as Button4,
@@ -2463,7 +2501,7 @@ var EditConfirmationDialog = ({
   onConfirm,
   onSuppressMessage
 }) => {
-  const [dontShowAgain, setDontShowAgain] = useState9(false);
+  const [dontShowAgain, setDontShowAgain] = useState10(false);
   const handleSave = () => {
     if (dontShowAgain) {
       onSuppressMessage?.();
@@ -2497,20 +2535,20 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { setVariableValue: notifyBoundPropChange, variableId } = useVariableBoundProp();
   const { propType } = useBoundProp5();
   const [isMessageSuppressed, suppressMessage] = useSuppressedMessage2(EDIT_CONFIRMATION_DIALOG_ID);
-  const [deleteConfirmation, setDeleteConfirmation] = useState10(false);
-  const [editConfirmation, setEditConfirmation] = useState10(false);
-  const [errorMessage, setErrorMessage] = useState10("");
-  const [valueFieldError, setValueFieldError] = useState10("");
+  const [deleteConfirmation, setDeleteConfirmation] = useState11(false);
+  const [editConfirmation, setEditConfirmation] = useState11(false);
+  const [errorMessage, setErrorMessage] = useState11("");
+  const [valueFieldError, setValueFieldError] = useState11("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const variable = useVariable(editId);
-  const [propTypeKey, setPropTypeKey] = useState10(variable?.type ?? propTypeUtil.key);
+  const [propTypeKey, setPropTypeKey] = useState11(variable?.type ?? propTypeUtil.key);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
   const userPermissions = usePermissions();
-  const [value, setValue] = useState10(() => variable.value);
-  const [label, setLabel] = useState10(() => variable.label);
-  useEffect5(() => {
+  const [value, setValue] = useState11(() => variable.value);
+  const [label, setLabel] = useState11(() => variable.label);
+  useEffect6(() => {
     styleVariablesRepository.update({
       [editId]: {
         ...variable,
@@ -2674,7 +2712,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 import * as React21 from "react";
 import {
   PopoverHeader as PopoverHeader3,
@@ -2786,7 +2824,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] = useState11("");
+  const [searchValue, setSearchValue] = useState12("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
@@ -2958,8 +2996,8 @@ var VIEW_LIST = "list";
 var VIEW_ADD = "add";
 var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
-  const [currentView, setCurrentView] = useState12(VIEW_LIST);
-  const [editId, setEditId] = useState12("");
+  const [currentView, setCurrentView] = useState13(VIEW_LIST);
+  const [editId, setEditId] = useState13("");
   const { open } = usePanelActions();
   const onSettingsAvailable = isExperimentActive("e_variables_manager") ? () => {
     open();
@@ -3070,7 +3108,7 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
 var AssignedVariable = ({ variable, propTypeKey }) => {
   const { startIcon, propTypeUtil } = getVariableType(propTypeKey);
   const { setValue } = useBoundProp6();
-  const anchorRef = useRef8(null);
+  const anchorRef = useRef9(null);
   const popupId = useId();
   const popupState = usePopupState3({
     variant: "popover",
@@ -3111,14 +3149,14 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/deleted-variable.tsx
 import * as React28 from "react";
-import { useId as useId2, useRef as useRef9, useState as useState14 } from "react";
+import { useId as useId2, useRef as useRef10, useState as useState15 } from "react";
 import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
 import { Backdrop, bindPopover as bindPopover2, Box as Box7, Infotip as Infotip2, Popover as Popover2, usePopupState as usePopupState4 } from "@elementor/ui";
 import { __ as __19 } from "@wordpress/i18n";
 
 // src/components/variable-restore.tsx
 import * as React25 from "react";
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import { PopoverContent as PopoverContent3, useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
 import { PopoverHeader as PopoverHeader4, SectionPopoverBody as SectionPopoverBody4 } from "@elementor/editor-ui";
 import { Button as Button6, CardActions as CardActions3, Divider as Divider5, FormHelperText as FormHelperText4, Typography as Typography11 } from "@elementor/ui";
@@ -3132,11 +3170,11 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
-  const [errorMessage, setErrorMessage] = useState13("");
-  const [valueFieldError, setValueFieldError] = useState13("");
-  const [label, setLabel] = useState13(variable.label);
-  const [value, setValue] = useState13(variable.value);
-  const [propTypeKey, setPropTypeKey] = useState13(variable?.type ?? propTypeUtil.key);
+  const [errorMessage, setErrorMessage] = useState14("");
+  const [valueFieldError, setValueFieldError] = useState14("");
+  const [label, setLabel] = useState14(variable.label);
+  const [value, setValue] = useState14(variable.value);
+  const [propTypeKey, setPropTypeKey] = useState14(variable?.type ?? propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError({
     value: variable.label,
     message: ERROR_MESSAGES.DUPLICATED_LABEL
@@ -3292,10 +3330,10 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const { propTypeUtil } = getVariableType(propTypeKey);
   const boundProp = useBoundProp8();
   const userPermissions = usePermissions();
-  const [showInfotip, setShowInfotip] = useState14(false);
+  const [showInfotip, setShowInfotip] = useState15(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
-  const deletedChipAnchorRef = useRef9(null);
+  const deletedChipAnchorRef = useRef10(null);
   const popupId = useId2();
   const popupState = usePopupState4({
     variant: "popover",
@@ -3383,7 +3421,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/mismatch-variable.tsx
 import * as React30 from "react";
-import { useId as useId3, useRef as useRef10, useState as useState15 } from "react";
+import { useId as useId3, useRef as useRef11, useState as useState16 } from "react";
 import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
 import { Backdrop as Backdrop2, bindPopover as bindPopover3, Box as Box8, Infotip as Infotip3, Popover as Popover3, usePopupState as usePopupState5 } from "@elementor/ui";
 import { __ as __21 } from "@wordpress/i18n";
@@ -3421,13 +3459,13 @@ var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
 // src/components/ui/variable/mismatch-variable.tsx
 var MismatchVariable = ({ variable }) => {
   const { setValue, value } = useBoundProp9();
-  const anchorRef = useRef10(null);
+  const anchorRef = useRef11(null);
   const popupId = useId3();
   const popupState = usePopupState5({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
-  const [infotipVisible, setInfotipVisible] = useState15(false);
+  const [infotipVisible, setInfotipVisible] = useState16(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const triggerSelect = () => {
@@ -3500,7 +3538,7 @@ var MismatchVariable = ({ variable }) => {
 
 // src/components/ui/variable/missing-variable.tsx
 import * as React32 from "react";
-import { useState as useState16 } from "react";
+import { useState as useState17 } from "react";
 import { useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
 import { Backdrop as Backdrop3, Infotip as Infotip4 } from "@elementor/ui";
 import { __ as __23 } from "@wordpress/i18n";
@@ -3530,7 +3568,7 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
   const { setValue } = useBoundProp10();
-  const [infotipVisible, setInfotipVisible] = useState16(false);
+  const [infotipVisible, setInfotipVisible] = useState17(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
@@ -3749,12 +3787,12 @@ import { __ as __26 } from "@wordpress/i18n";
 
 // src/components/fields/color-field.tsx
 import * as React35 from "react";
-import { useRef as useRef11, useState as useState17 } from "react";
+import { useRef as useRef12, useState as useState18 } from "react";
 import { UnstableColorField } from "@elementor/ui";
 var ColorField = ({ value, onChange, onValidationChange }) => {
-  const [color, setColor] = useState17(value);
-  const [errorMessage, setErrorMessage] = useState17("");
-  const defaultRef = useRef11(null);
+  const [color, setColor] = useState18(value);
+  const [errorMessage, setErrorMessage] = useState18("");
+  const defaultRef = useRef12(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const handleChange = (newValue) => {
     setColor(newValue);
@@ -3793,15 +3831,15 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 
 // src/components/fields/font-field.tsx
 import * as React36 from "react";
-import { useId as useId4, useRef as useRef12, useState as useState18 } from "react";
+import { useId as useId4, useRef as useRef13, useState as useState19 } from "react";
 import { enqueueFont as enqueueFont2, ItemSelector, useFontFamilies } from "@elementor/editor-controls";
 import { useSectionWidth } from "@elementor/editor-ui";
 import { ChevronDownIcon, TextIcon } from "@elementor/icons";
 import { bindPopover as bindPopover4, bindTrigger as bindTrigger4, Popover as Popover4, UnstableTag, usePopupState as usePopupState6 } from "@elementor/ui";
 import { __ as __25 } from "@wordpress/i18n";
 var FontField = ({ value, onChange, onValidationChange }) => {
-  const [fontFamily, setFontFamily] = useState18(value);
-  const defaultRef = useRef12(null);
+  const [fontFamily, setFontFamily] = useState19(value);
+  const defaultRef = useRef13(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const fontPopoverState = usePopupState6({ variant: "popover" });
   const fontFamilies = useFontFamilies();
@@ -3938,7 +3976,7 @@ function registerVariableTypes() {
 
 // src/renderers/style-variables-renderer.tsx
 import * as React38 from "react";
-import { useEffect as useEffect6, useState as useState19 } from "react";
+import { useEffect as useEffect7, useState as useState20 } from "react";
 import {
   __privateUseListenTo as useListenTo,
   commandEndEvent,
@@ -3961,8 +3999,8 @@ function usePortalContainer() {
   return useListenTo(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = useState19({});
-  useEffect6(() => {
+  const [variables, setVariables] = useState20({});
+  useEffect7(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();
@@ -4064,6 +4102,10 @@ function init() {
     id: "variables-open-panel-from-url",
     component: OpenPanelFromUrl
   });
+  injectIntoLogic({
+    id: "variables-open-panel-from-event",
+    component: OpenPanelFromEvent
+  });
   registerPanel(panel);
 }
 function hasVariableAssigned(value) {