@uniformdev/mesh-sdk-react 19.131.1-alpha.2 → 19.132.0

package/dist/index.d.mts

@@ -979,9 +979,10 @@ type VariableEditorCompleteEvent<TEditVariableCompletedContext, TEditVariableCan
     /**
      * Arbitrary object that was returned by the variables editor component's onCancel
      * Can be used to convey context data about the submit from custom editor components
-     * to their consumers. Always `null` using the default variables editor.
+     * to their consumers. Always `null` using the default variables editor. Can always be undefined
+     * if the editor is dismissed by the variables provider instead of user action.
      */
-    editorCancelledContext: TEditVariableCancelledContext;
+    editorCancelledContext?: TEditVariableCancelledContext;
 };
 type VariablesEvents<TEditVariableCompletedContext, TEditVariableCancelledContext> = {
     editCompleted: VariableEditorCompleteEvent<TEditVariableCompletedContext, TEditVariableCancelledContext>;
@@ -1007,6 +1008,12 @@ type VariablesContext<TEditVariableContext, TEditVariableCompletedContext, TEdit
     isEditing: boolean;
     /** Add event handles (don't forget to unhook) */
     events: Emitter<VariablesEvents<TEditVariableCompletedContext, TEditVariableCancelledContext>>;
+    /**
+     * Creates an exclusive, promise-based variable editing transaction that definitely returns a result.
+     * Only one edit can occur at a time; if another edit is started, the previous one will be resolved as cancelled.
+     * Note: this is an alternative to emitting editing events with dispatch directly that can be easier to consume when a result is required.
+     */
+    editVariableTxn: (variable: string, context?: TEditVariableContext) => Promise<VariableEditorCompleteEvent<TEditVariableCompletedContext, TEditVariableCancelledContext>>;
     /** Whether the context is backed by a provider, or is just a readonly fake */
     canDispatch: boolean;
     /**

package/dist/index.d.ts

@@ -979,9 +979,10 @@ type VariableEditorCompleteEvent<TEditVariableCompletedContext, TEditVariableCan
     /**
      * Arbitrary object that was returned by the variables editor component's onCancel
      * Can be used to convey context data about the submit from custom editor components
-     * to their consumers. Always `null` using the default variables editor.
+     * to their consumers. Always `null` using the default variables editor. Can always be undefined
+     * if the editor is dismissed by the variables provider instead of user action.
      */
-    editorCancelledContext: TEditVariableCancelledContext;
+    editorCancelledContext?: TEditVariableCancelledContext;
 };
 type VariablesEvents<TEditVariableCompletedContext, TEditVariableCancelledContext> = {
     editCompleted: VariableEditorCompleteEvent<TEditVariableCompletedContext, TEditVariableCancelledContext>;
@@ -1007,6 +1008,12 @@ type VariablesContext<TEditVariableContext, TEditVariableCompletedContext, TEdit
     isEditing: boolean;
     /** Add event handles (don't forget to unhook) */
     events: Emitter<VariablesEvents<TEditVariableCompletedContext, TEditVariableCancelledContext>>;
+    /**
+     * Creates an exclusive, promise-based variable editing transaction that definitely returns a result.
+     * Only one edit can occur at a time; if another edit is started, the previous one will be resolved as cancelled.
+     * Note: this is an alternative to emitting editing events with dispatch directly that can be easier to consume when a result is required.
+     */
+    editVariableTxn: (variable: string, context?: TEditVariableContext) => Promise<VariableEditorCompleteEvent<TEditVariableCompletedContext, TEditVariableCancelledContext>>;
     /** Whether the context is backed by a provider, or is just a readonly fake */
     canDispatch: boolean;
     /**

package/dist/index.esm.js

@@ -2933,9 +2933,9 @@ import { LoadingIndicator as LoadingIndicator2 } from "@uniformdev/design-system
 import {
   $getNearestNodeFromDOMNode,
   $getNodeByKey as $getNodeByKey2,
-  $getSelection,
+  $getSelection as $getSelection2,
   $isDecoratorNode,
-  $isNodeSelection,
+  $isNodeSelection as $isNodeSelection2,
   $isRangeSelection,
   COMMAND_PRIORITY_EDITOR,
   COMMAND_PRIORITY_LOW,
@@ -2945,7 +2945,7 @@ import {
   KEY_BACKSPACE_COMMAND,
   KEY_DELETE_COMMAND
 } from "lexical";
-import { useCallback as useCallback2, useEffect as useEffect8 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect8 } from "react";
 
 // src/components/Variables/util/prettifyBindExpression.tsx
 function prettifyBindExpression(bindExpression) {
@@ -3026,12 +3026,15 @@ import { dequal as dequal2 } from "dequal/lite";
 import {
   $createTextNode,
   $getNodeByKey,
+  $getSelection,
   $insertNodes,
+  $isNodeSelection,
   $nodesOfType as $nodesOfType2,
+  $setSelection,
   COMMAND_PRIORITY_NORMAL,
   createCommand
 } from "lexical";
-import { useCallback, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef10, useState as useState10 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef10, useState as useState10 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Variables/toolbox/SelectVariableMenu.styles.ts
@@ -3063,12 +3066,56 @@ var variablesTipText = css18`
   padding: 0 var(--spacing-sm);
 `;
 
-// src/components/Variables/useVariableEditor.ts
-import { useEffect as useEffect6, useState as useState9 } from "react";
-
 // src/components/Variables/VariablesProvider.tsx
 import mitt from "mitt";
-import { createContext as createContext3, useContext as useContext5, useMemo as useMemo7, useState as useState8 } from "react";
+import { createContext as createContext3, useContext as useContext5, useMemo as useMemo7, useState as useState9 } from "react";
+
+// src/components/Variables/util/useVariableEditTransaction.ts
+import { useCallback, useEffect as useEffect6, useState as useState8 } from "react";
+function useVariableEditTransaction({
+  events,
+  dispatch,
+  isEditing,
+  variables
+}) {
+  const [isEditingBinding, setIsEditingBinding] = useState8();
+  useEffect6(() => {
+    if (!isEditingBinding) {
+      return;
+    }
+    const fn = (e) => {
+      isEditingBinding.resolve(e);
+      setIsEditingBinding(void 0);
+    };
+    events.on("editCompleted", fn);
+    return () => events.off("editCompleted", fn);
+  }, [events, isEditingBinding, variables]);
+  useEffect6(() => {
+    if (!isEditing) {
+      if (isEditingBinding) {
+        isEditingBinding.resolve({ canceled: true });
+      }
+      setIsEditingBinding(void 0);
+    }
+  }, [isEditing, isEditingBinding]);
+  return useCallback(
+    async function editVariableTxn(variable, context) {
+      if (isEditingBinding) {
+        dispatch({ type: "cancelEdit" });
+      }
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          setIsEditingBinding({
+            resolve,
+            variable
+          });
+          dispatch({ type: "edit", variable, context });
+        });
+      });
+    },
+    [dispatch, isEditingBinding]
+  );
+}
 
 // src/components/Variables/VariableEditor.tsx
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -3220,8 +3267,8 @@ function VariablesProvider({
   children,
   knownUndefinedValues = {}
 }) {
-  const [editing, setEditing] = useState8();
-  const [editingContext, setEditingContext] = useState8();
+  const [editing, setEditing] = useState9();
+  const [editingContext, setEditingContext] = useState9();
   const events = useMemo7(
     () => mitt(),
     []
@@ -3268,16 +3315,23 @@ function VariablesProvider({
     }),
     [onChange, readOnly, value]
   );
+  const editVariableTxn = useVariableEditTransaction({
+    events,
+    dispatch: valueBasedContextValue.dispatch,
+    isEditing: typeof editing !== "undefined",
+    variables: value
+  });
   const contextValue = useMemo7(() => {
     return {
       ...valueBasedContextValue,
+      editVariableTxn,
       isEditing: typeof editing !== "undefined",
       events,
       canDispatch: true,
       knownUndefinedValues,
       isLoading: !!isLoading
     };
-  }, [editing, events, knownUndefinedValues, valueBasedContextValue, isLoading]);
+  }, [valueBasedContextValue, editVariableTxn, editing, events, knownUndefinedValues, isLoading]);
   return /* @__PURE__ */ jsxs17(VariablesContext.Provider, { value: contextValue, children: [
     children,
     typeof editing !== "undefined" ? /* @__PURE__ */ jsx32(
@@ -3316,6 +3370,9 @@ function useVariables(returnEmptyWithoutProvider = false) {
         dispatch: () => {
           throw new Error("No VariablesProvider present");
         },
+        editVariableTxn: async () => {
+          throw new Error("No VariablesProvider present");
+        },
         events: mitt(),
         isEditing: false,
         variables: {},
@@ -3338,39 +3395,13 @@ function flattenVariables(variables) {
 
 // src/components/Variables/useVariableEditor.ts
 function useVariableEditor() {
-  const { variables, events, canDispatch, dispatch, isEditing } = useVariables(true);
-  const [isEditingBinding, setIsEditingBinding] = useState9();
-  useEffect6(() => {
-    if (!canDispatch || !isEditingBinding) {
-      return;
-    }
-    const fn = (e) => {
-      isEditingBinding.resolve(e);
-      setIsEditingBinding(void 0);
-    };
-    events.on("editCompleted", fn);
-    return () => events.off("editCompleted", fn);
-  }, [canDispatch, events, isEditingBinding, variables]);
-  useEffect6(() => {
-    if (!isEditing) {
-      setIsEditingBinding(void 0);
-    }
-  }, [isEditing]);
+  const { editVariableTxn, canDispatch } = useVariables(true);
   return {
     async editVariable(variable, context) {
       if (!canDispatch) {
         throw new Error("Cannot edit variable. VariablesProvider is not mounted.");
       }
-      if (isEditingBinding) {
-        throw new Error("Cannot edit variable. Another variable is already being edited.");
-      }
-      return new Promise((resolve) => {
-        setIsEditingBinding({
-          resolve,
-          variable
-        });
-        dispatch({ type: "edit", variable, context });
-      });
+      return editVariableTxn(variable, context);
     }
   };
 }
@@ -3467,7 +3498,7 @@ function useVariablesMenu({
   getEditorContext
 }) {
   const { variables, canDispatch, readOnly } = useVariables(true);
-  const canEditVariable = useCallback(
+  const canEditVariable = useCallback2(
     (name, variable) => (
       // name === '' means new var. Add var perms computed by menu options.
       name === "" || canDispatch && enableEditingVariables && !readOnly && !(variable == null ? void 0 : variable.readOnly)
@@ -3497,7 +3528,7 @@ function useVariablesMenu({
     );
     return { menuOptions: menuOptions2, groupedVariables: groupedVariables2 };
   }, [variables, filterVariable, getEditorContext, canAddVariable, showAddVariableMenuOption]);
-  const onSelect = useCallback(
+  const onSelect = useCallback2(
     ({ queryString, value, nodeToReplace, editor, overwriteExistingValue }) => {
       if (value === ADD_VARIABLE_OPTION) {
         editor.update(() => {
@@ -3547,7 +3578,7 @@ function VariablesPlugin({
   const { variables, dispatch, isEditing, canDispatch, readOnly, knownUndefinedValues, isLoading } = useVariables(true);
   const variablesRef = useRef10({ variables, knownUndefinedValues, isLoading });
   variablesRef.current = { variables, knownUndefinedValues, isLoading };
-  const canEditVariable = useCallback(
+  const canEditVariable = useCallback2(
     (name, variable) => (
       // name === '' means new var. Add var perms computed by menu options.
       name === "" || canDispatch && enableEditingVariables && !readOnly && !(variable == null ? void 0 : variable.readOnly)
@@ -3581,7 +3612,7 @@ function VariablesPlugin({
       )
     };
   }, [queryString, groupedVariables, menuOptions]);
-  const onSelectOption = useCallback(
+  const onSelectOption = useCallback2(
     (selectedOption, nodeToReplace, closeMenu) => {
       onSelect({
         queryString: queryString != null ? queryString : void 0,
@@ -3608,6 +3639,15 @@ function VariablesPlugin({
                   editor.dispatchCommand(DISCONNECT_VARIABLE_COMMAND, { sourceKey });
                   return;
                 }
+                editor.update(() => {
+                  const selection = $getSelection();
+                  if ($isNodeSelection(selection)) {
+                    const selectedNodes = selection.getNodes();
+                    if (selectedNodes.every((node) => $isVariableNode(node))) {
+                      $setSelection(null);
+                    }
+                  }
+                });
                 return;
               }
               editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {
@@ -3715,7 +3755,7 @@ function VariablesPlugin({
     editVariable,
     replaceValueOnVariableInsert
   ]);
-  const updateExistingNodeIfChanged = useCallback(
+  const updateExistingNodeIfChanged = useCallback2(
     (variableNode) => {
       var _a, _b, _c;
       const targetVar = variablesRef.current.variables[variableNode.reference];
@@ -3914,9 +3954,9 @@ function VariableNodeComponent({
   const [editor] = useLexicalComposerContext3();
   const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
   const readOnly = !editor.isEditable();
-  const onDelete = useCallback2(
+  const onDelete = useCallback3(
     (event) => {
-      if (isSelected && $isNodeSelection($getSelection())) {
+      if (isSelected && $isNodeSelection2($getSelection2())) {
         event.preventDefault();
         const node = $getNodeByKey2(nodeKey);
         if ($isVariableNode(node)) {
@@ -3939,8 +3979,8 @@ function VariableNodeComponent({
       editor.registerCommand(
         KEY_ARROW_LEFT_COMMAND,
         (event) => {
-          const selection = $getSelection();
-          if ($isNodeSelection(selection)) {
+          const selection = $getSelection2();
+          if ($isNodeSelection2(selection)) {
             const nodes = selection.getNodes();
             if (nodes.length > 0) {
               event.preventDefault();
@@ -3966,8 +4006,8 @@ function VariableNodeComponent({
       editor.registerCommand(
         KEY_ARROW_RIGHT_COMMAND,
         (event) => {
-          const selection = $getSelection();
-          if ($isNodeSelection(selection) && !$isTargetWithinDecorator(event.target)) {
+          const selection = $getSelection2();
+          if ($isNodeSelection2(selection) && !$isTargetWithinDecorator(event.target)) {
             const nodes = selection.getNodes();
             if (nodes.length > 0) {
               event.preventDefault();
@@ -4036,7 +4076,7 @@ function EditorRefPlugin({
 // src/components/Variables/composer/PasteTransformerPlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister as mergeRegister3 } from "@lexical/utils";
-import { $getSelection as $getSelection2, $isRangeSelection as $isRangeSelection2, COMMAND_PRIORITY_HIGH, PASTE_COMMAND } from "lexical";
+import { $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection2, COMMAND_PRIORITY_HIGH, PASTE_COMMAND } from "lexical";
 import { useEffect as useEffect9 } from "react";
 function PasteTransformerPlugin({ transformPaste }) {
   const [editor] = useLexicalComposerContext5();
@@ -4046,7 +4086,7 @@ function PasteTransformerPlugin({ transformPaste }) {
         PASTE_COMMAND,
         (event) => {
           var _a;
-          const selection = $getSelection2();
+          const selection = $getSelection3();
           const pastedText = (_a = event.clipboardData) == null ? void 0 : _a.getData("text/plain");
           if (pastedText && transformPaste && $isRangeSelection2(selection)) {
             const result = transformPaste(pastedText);
@@ -4540,8 +4580,8 @@ import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
 import { mergeRegister as mergeRegister4, objectKlassEquals } from "@lexical/utils";
 import {
-  $getSelection as $getSelection3,
-  $isNodeSelection as $isNodeSelection2,
+  $getSelection as $getSelection4,
+  $isNodeSelection as $isNodeSelection3,
   $isRangeSelection as $isRangeSelection3,
   COMMAND_PRIORITY_HIGH as COMMAND_PRIORITY_HIGH2,
   COPY_COMMAND,
@@ -4591,10 +4631,10 @@ function RichishCopyAndPastePlugin() {
             objectKlassEquals(event, ClipboardEvent) ? event : null
           );
           editor.update(() => {
-            const selection = $getSelection3();
+            const selection = $getSelection4();
             if ($isRangeSelection3(selection)) {
               selection.removeText();
-            } else if ($isNodeSelection2(selection)) {
+            } else if ($isNodeSelection3(selection)) {
               selection.getNodes().forEach((node) => node.remove());
             }
           });
@@ -4605,12 +4645,12 @@ function RichishCopyAndPastePlugin() {
       editor.registerCommand(
         PASTE_COMMAND2,
         (event) => {
-          const selection = $getSelection3();
+          const selection = $getSelection4();
           if ($isRangeSelection3(selection)) {
             event.preventDefault();
             editor.update(
               () => {
-                const selection2 = $getSelection3();
+                const selection2 = $getSelection4();
                 const clipboardData = event instanceof InputEvent || event instanceof KeyboardEvent ? null : event.clipboardData;
                 if (clipboardData != null && $isRangeSelection3(selection2)) {
                   const lexicalString = clipboardData.getData("application/x-lexical-editor");
@@ -4933,7 +4973,7 @@ function ParameterConnectionIndicator({
 
 // src/components/Variables/ParameterOrSingleVariable.tsx
 import { HorizontalRhythm as HorizontalRhythm5 } from "@uniformdev/design-system";
-import { useCallback as useCallback3 } from "react";
+import { useCallback as useCallback4 } from "react";
 
 // src/components/Variables/composer/OnDisconnectPlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexical/react/LexicalComposerContext";
@@ -4992,7 +5032,7 @@ function ParameterOrSingleVariable(props) {
     hasVariablesInValue,
     setHadVariablesInValue
   } = useInputVariablesState(props);
-  const handleDisconnect = useCallback3(
+  const handleDisconnect = useCallback4(
     (variable) => {
       setHadVariablesInValue(false);
       if (onDisconnect) {
@@ -6197,7 +6237,7 @@ import { Callout as Callout5, Container, IconsProvider, ScrollableList, Vertical
 import { bindVariablesToObject as bindVariablesToObject2 } from "@uniformdev/canvas";
 import {
   createContext as createContext5,
-  useCallback as useCallback4,
+  useCallback as useCallback5,
   useContext as useContext7,
   useDeferredValue,
   useMemo as useMemo14,
@@ -6234,7 +6274,7 @@ var ObjectSearchProvider = ({
   const querySearchDeferred = useDeferredValue(query);
   const [selectedItems, setSelectedItems] = useState16(currentlySelectedItems != null ? currentlySelectedItems : []);
   const [list, setList] = useState16({});
-  const onSetQuery = useCallback4(
+  const onSetQuery = useCallback5(
     (value2) => {
       if (Array.isArray(value2.contentType) && value2.contentType.length > 0) {
         return setQuery({
@@ -6246,7 +6286,7 @@ var ObjectSearchProvider = ({
     },
     [setQuery]
   );
-  const onSelectItem = useCallback4(
+  const onSelectItem = useCallback5(
     (selectedResult) => {
       if (Array.isArray(selectedResult)) {
         setSelectedItems(selectedResult);
@@ -6260,10 +6300,10 @@ var ObjectSearchProvider = ({
     },
     [setSelectedItems, selectedItems]
   );
-  const onRemoveAllSelectedItems = useCallback4(() => {
+  const onRemoveAllSelectedItems = useCallback5(() => {
     setSelectedItems([]);
   }, [setSelectedItems]);
-  const onSetList = useCallback4(
+  const onSetList = useCallback5(
     (value2) => {
       setList(value2);
     },

package/dist/index.js

@@ -3242,23 +3242,67 @@ var variablesTipText = import_react33.css`
   padding: 0 var(--spacing-sm);
 `;
 
-// src/components/Variables/useVariableEditor.ts
-var import_react37 = require("react");
-
 // src/components/Variables/VariablesProvider.tsx
 var import_mitt = __toESM(require("mitt"));
-var import_react36 = require("react");
+var import_react37 = require("react");
+
+// src/components/Variables/util/useVariableEditTransaction.ts
+var import_react34 = require("react");
+function useVariableEditTransaction({
+  events,
+  dispatch,
+  isEditing,
+  variables
+}) {
+  const [isEditingBinding, setIsEditingBinding] = (0, import_react34.useState)();
+  (0, import_react34.useEffect)(() => {
+    if (!isEditingBinding) {
+      return;
+    }
+    const fn = (e) => {
+      isEditingBinding.resolve(e);
+      setIsEditingBinding(void 0);
+    };
+    events.on("editCompleted", fn);
+    return () => events.off("editCompleted", fn);
+  }, [events, isEditingBinding, variables]);
+  (0, import_react34.useEffect)(() => {
+    if (!isEditing) {
+      if (isEditingBinding) {
+        isEditingBinding.resolve({ canceled: true });
+      }
+      setIsEditingBinding(void 0);
+    }
+  }, [isEditing, isEditingBinding]);
+  return (0, import_react34.useCallback)(
+    async function editVariableTxn(variable, context) {
+      if (isEditingBinding) {
+        dispatch({ type: "cancelEdit" });
+      }
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          setIsEditingBinding({
+            resolve,
+            variable
+          });
+          dispatch({ type: "edit", variable, context });
+        });
+      });
+    },
+    [dispatch, isEditingBinding]
+  );
+}
 
 // src/components/Variables/VariableEditor.tsx
 var import_zod = require("@hookform/resolvers/zod");
 var import_design_system16 = require("@uniformdev/design-system");
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_react_hook_form = require("react-hook-form");
 var import_zod2 = require("zod");
 
 // src/components/Variables/styles/VariableEditor.styles.ts
-var import_react34 = require("@emotion/react");
-var variablesFormContainer = import_react34.css`
+var import_react35 = require("@emotion/react");
+var variablesFormContainer = import_react35.css`
   > * {
     margin: var(--spacing-base) 0 0;
   }
@@ -3311,9 +3355,9 @@ function VariableEditor({
     },
     activeWhenEditing: true
   });
-  const nameRef = (0, import_react35.useRef)(null);
+  const nameRef = (0, import_react36.useRef)(null);
   const { ref, ...nameRegister } = register("name");
-  (0, import_react35.useLayoutEffect)(() => {
+  (0, import_react36.useLayoutEffect)(() => {
     if (nameRef.current && !nameRef.current.value) {
       nameRef.current.focus();
     }
@@ -3389,7 +3433,7 @@ function VariableEditor({
 
 // src/components/Variables/VariablesProvider.tsx
 var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
-var VariablesContext = (0, import_react36.createContext)(null);
+var VariablesContext = (0, import_react37.createContext)(null);
 function VariablesProvider({
   value,
   onChange,
@@ -3399,9 +3443,9 @@ function VariablesProvider({
   children,
   knownUndefinedValues = {}
 }) {
-  const [editing, setEditing] = (0, import_react36.useState)();
-  const [editingContext, setEditingContext] = (0, import_react36.useState)();
-  const events = (0, import_react36.useMemo)(
+  const [editing, setEditing] = (0, import_react37.useState)();
+  const [editingContext, setEditingContext] = (0, import_react37.useState)();
+  const events = (0, import_react37.useMemo)(
     () => (0, import_mitt.default)(),
     []
   );
@@ -3409,7 +3453,7 @@ function VariablesProvider({
     throw new Error("onChange must be provided when readOnly is false");
   }
   const Editor = editVariableComponent != null ? editVariableComponent : VariableEditor;
-  const valueBasedContextValue = (0, import_react36.useMemo)(
+  const valueBasedContextValue = (0, import_react37.useMemo)(
     () => ({
       flatVariables: flattenVariables(value),
       dispatch: (event) => {
@@ -3447,16 +3491,23 @@ function VariablesProvider({
     }),
     [onChange, readOnly, value]
   );
-  const contextValue = (0, import_react36.useMemo)(() => {
+  const editVariableTxn = useVariableEditTransaction({
+    events,
+    dispatch: valueBasedContextValue.dispatch,
+    isEditing: typeof editing !== "undefined",
+    variables: value
+  });
+  const contextValue = (0, import_react37.useMemo)(() => {
     return {
       ...valueBasedContextValue,
+      editVariableTxn,
       isEditing: typeof editing !== "undefined",
       events,
       canDispatch: true,
       knownUndefinedValues,
       isLoading: !!isLoading
     };
-  }, [editing, events, knownUndefinedValues, valueBasedContextValue, isLoading]);
+  }, [valueBasedContextValue, editVariableTxn, editing, events, knownUndefinedValues, isLoading]);
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(VariablesContext.Provider, { value: contextValue, children: [
     children,
     typeof editing !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -3487,7 +3538,7 @@ function VariablesProvider({
   ] });
 }
 function useVariables(returnEmptyWithoutProvider = false) {
-  const context = (0, import_react36.useContext)(VariablesContext);
+  const context = (0, import_react37.useContext)(VariablesContext);
   if (!context) {
     if (returnEmptyWithoutProvider) {
       return {
@@ -3495,6 +3546,9 @@ function useVariables(returnEmptyWithoutProvider = false) {
         dispatch: () => {
           throw new Error("No VariablesProvider present");
         },
+        editVariableTxn: async () => {
+          throw new Error("No VariablesProvider present");
+        },
         events: (0, import_mitt.default)(),
         isEditing: false,
         variables: {},
@@ -3517,39 +3571,13 @@ function flattenVariables(variables) {
 
 // src/components/Variables/useVariableEditor.ts
 function useVariableEditor() {
-  const { variables, events, canDispatch, dispatch, isEditing } = useVariables(true);
-  const [isEditingBinding, setIsEditingBinding] = (0, import_react37.useState)();
-  (0, import_react37.useEffect)(() => {
-    if (!canDispatch || !isEditingBinding) {
-      return;
-    }
-    const fn = (e) => {
-      isEditingBinding.resolve(e);
-      setIsEditingBinding(void 0);
-    };
-    events.on("editCompleted", fn);
-    return () => events.off("editCompleted", fn);
-  }, [canDispatch, events, isEditingBinding, variables]);
-  (0, import_react37.useEffect)(() => {
-    if (!isEditing) {
-      setIsEditingBinding(void 0);
-    }
-  }, [isEditing]);
+  const { editVariableTxn, canDispatch } = useVariables(true);
   return {
     async editVariable(variable, context) {
       if (!canDispatch) {
         throw new Error("Cannot edit variable. VariablesProvider is not mounted.");
       }
-      if (isEditingBinding) {
-        throw new Error("Cannot edit variable. Another variable is already being edited.");
-      }
-      return new Promise((resolve) => {
-        setIsEditingBinding({
-          resolve,
-          variable
-        });
-        dispatch({ type: "edit", variable, context });
-      });
+      return editVariableTxn(variable, context);
     }
   };
 }
@@ -3787,6 +3815,15 @@ function VariablesPlugin({
                   editor.dispatchCommand(DISCONNECT_VARIABLE_COMMAND, { sourceKey });
                   return;
                 }
+                editor.update(() => {
+                  const selection = (0, import_lexical3.$getSelection)();
+                  if ((0, import_lexical3.$isNodeSelection)(selection)) {
+                    const selectedNodes = selection.getNodes();
+                    if (selectedNodes.every((node) => $isVariableNode(node))) {
+                      (0, import_lexical3.$setSelection)(null);
+                    }
+                  }
+                });
                 return;
               }
               editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {

package/dist/index.mjs

@@ -2933,9 +2933,9 @@ import { LoadingIndicator as LoadingIndicator2 } from "@uniformdev/design-system
 import {
   $getNearestNodeFromDOMNode,
   $getNodeByKey as $getNodeByKey2,
-  $getSelection,
+  $getSelection as $getSelection2,
   $isDecoratorNode,
-  $isNodeSelection,
+  $isNodeSelection as $isNodeSelection2,
   $isRangeSelection,
   COMMAND_PRIORITY_EDITOR,
   COMMAND_PRIORITY_LOW,
@@ -2945,7 +2945,7 @@ import {
   KEY_BACKSPACE_COMMAND,
   KEY_DELETE_COMMAND
 } from "lexical";
-import { useCallback as useCallback2, useEffect as useEffect8 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect8 } from "react";
 
 // src/components/Variables/util/prettifyBindExpression.tsx
 function prettifyBindExpression(bindExpression) {
@@ -3026,12 +3026,15 @@ import { dequal as dequal2 } from "dequal/lite";
 import {
   $createTextNode,
   $getNodeByKey,
+  $getSelection,
   $insertNodes,
+  $isNodeSelection,
   $nodesOfType as $nodesOfType2,
+  $setSelection,
   COMMAND_PRIORITY_NORMAL,
   createCommand
 } from "lexical";
-import { useCallback, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef10, useState as useState10 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef10, useState as useState10 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Variables/toolbox/SelectVariableMenu.styles.ts
@@ -3063,12 +3066,56 @@ var variablesTipText = css18`
   padding: 0 var(--spacing-sm);
 `;
 
-// src/components/Variables/useVariableEditor.ts
-import { useEffect as useEffect6, useState as useState9 } from "react";
-
 // src/components/Variables/VariablesProvider.tsx
 import mitt from "mitt";
-import { createContext as createContext3, useContext as useContext5, useMemo as useMemo7, useState as useState8 } from "react";
+import { createContext as createContext3, useContext as useContext5, useMemo as useMemo7, useState as useState9 } from "react";
+
+// src/components/Variables/util/useVariableEditTransaction.ts
+import { useCallback, useEffect as useEffect6, useState as useState8 } from "react";
+function useVariableEditTransaction({
+  events,
+  dispatch,
+  isEditing,
+  variables
+}) {
+  const [isEditingBinding, setIsEditingBinding] = useState8();
+  useEffect6(() => {
+    if (!isEditingBinding) {
+      return;
+    }
+    const fn = (e) => {
+      isEditingBinding.resolve(e);
+      setIsEditingBinding(void 0);
+    };
+    events.on("editCompleted", fn);
+    return () => events.off("editCompleted", fn);
+  }, [events, isEditingBinding, variables]);
+  useEffect6(() => {
+    if (!isEditing) {
+      if (isEditingBinding) {
+        isEditingBinding.resolve({ canceled: true });
+      }
+      setIsEditingBinding(void 0);
+    }
+  }, [isEditing, isEditingBinding]);
+  return useCallback(
+    async function editVariableTxn(variable, context) {
+      if (isEditingBinding) {
+        dispatch({ type: "cancelEdit" });
+      }
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          setIsEditingBinding({
+            resolve,
+            variable
+          });
+          dispatch({ type: "edit", variable, context });
+        });
+      });
+    },
+    [dispatch, isEditingBinding]
+  );
+}
 
 // src/components/Variables/VariableEditor.tsx
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -3220,8 +3267,8 @@ function VariablesProvider({
   children,
   knownUndefinedValues = {}
 }) {
-  const [editing, setEditing] = useState8();
-  const [editingContext, setEditingContext] = useState8();
+  const [editing, setEditing] = useState9();
+  const [editingContext, setEditingContext] = useState9();
   const events = useMemo7(
     () => mitt(),
     []
@@ -3268,16 +3315,23 @@ function VariablesProvider({
     }),
     [onChange, readOnly, value]
   );
+  const editVariableTxn = useVariableEditTransaction({
+    events,
+    dispatch: valueBasedContextValue.dispatch,
+    isEditing: typeof editing !== "undefined",
+    variables: value
+  });
   const contextValue = useMemo7(() => {
     return {
       ...valueBasedContextValue,
+      editVariableTxn,
       isEditing: typeof editing !== "undefined",
       events,
       canDispatch: true,
       knownUndefinedValues,
       isLoading: !!isLoading
     };
-  }, [editing, events, knownUndefinedValues, valueBasedContextValue, isLoading]);
+  }, [valueBasedContextValue, editVariableTxn, editing, events, knownUndefinedValues, isLoading]);
   return /* @__PURE__ */ jsxs17(VariablesContext.Provider, { value: contextValue, children: [
     children,
     typeof editing !== "undefined" ? /* @__PURE__ */ jsx32(
@@ -3316,6 +3370,9 @@ function useVariables(returnEmptyWithoutProvider = false) {
         dispatch: () => {
           throw new Error("No VariablesProvider present");
         },
+        editVariableTxn: async () => {
+          throw new Error("No VariablesProvider present");
+        },
         events: mitt(),
         isEditing: false,
         variables: {},
@@ -3338,39 +3395,13 @@ function flattenVariables(variables) {
 
 // src/components/Variables/useVariableEditor.ts
 function useVariableEditor() {
-  const { variables, events, canDispatch, dispatch, isEditing } = useVariables(true);
-  const [isEditingBinding, setIsEditingBinding] = useState9();
-  useEffect6(() => {
-    if (!canDispatch || !isEditingBinding) {
-      return;
-    }
-    const fn = (e) => {
-      isEditingBinding.resolve(e);
-      setIsEditingBinding(void 0);
-    };
-    events.on("editCompleted", fn);
-    return () => events.off("editCompleted", fn);
-  }, [canDispatch, events, isEditingBinding, variables]);
-  useEffect6(() => {
-    if (!isEditing) {
-      setIsEditingBinding(void 0);
-    }
-  }, [isEditing]);
+  const { editVariableTxn, canDispatch } = useVariables(true);
   return {
     async editVariable(variable, context) {
       if (!canDispatch) {
         throw new Error("Cannot edit variable. VariablesProvider is not mounted.");
       }
-      if (isEditingBinding) {
-        throw new Error("Cannot edit variable. Another variable is already being edited.");
-      }
-      return new Promise((resolve) => {
-        setIsEditingBinding({
-          resolve,
-          variable
-        });
-        dispatch({ type: "edit", variable, context });
-      });
+      return editVariableTxn(variable, context);
     }
   };
 }
@@ -3467,7 +3498,7 @@ function useVariablesMenu({
   getEditorContext
 }) {
   const { variables, canDispatch, readOnly } = useVariables(true);
-  const canEditVariable = useCallback(
+  const canEditVariable = useCallback2(
     (name, variable) => (
       // name === '' means new var. Add var perms computed by menu options.
       name === "" || canDispatch && enableEditingVariables && !readOnly && !(variable == null ? void 0 : variable.readOnly)
@@ -3497,7 +3528,7 @@ function useVariablesMenu({
     );
     return { menuOptions: menuOptions2, groupedVariables: groupedVariables2 };
   }, [variables, filterVariable, getEditorContext, canAddVariable, showAddVariableMenuOption]);
-  const onSelect = useCallback(
+  const onSelect = useCallback2(
     ({ queryString, value, nodeToReplace, editor, overwriteExistingValue }) => {
       if (value === ADD_VARIABLE_OPTION) {
         editor.update(() => {
@@ -3547,7 +3578,7 @@ function VariablesPlugin({
   const { variables, dispatch, isEditing, canDispatch, readOnly, knownUndefinedValues, isLoading } = useVariables(true);
   const variablesRef = useRef10({ variables, knownUndefinedValues, isLoading });
   variablesRef.current = { variables, knownUndefinedValues, isLoading };
-  const canEditVariable = useCallback(
+  const canEditVariable = useCallback2(
     (name, variable) => (
       // name === '' means new var. Add var perms computed by menu options.
       name === "" || canDispatch && enableEditingVariables && !readOnly && !(variable == null ? void 0 : variable.readOnly)
@@ -3581,7 +3612,7 @@ function VariablesPlugin({
       )
     };
   }, [queryString, groupedVariables, menuOptions]);
-  const onSelectOption = useCallback(
+  const onSelectOption = useCallback2(
     (selectedOption, nodeToReplace, closeMenu) => {
       onSelect({
         queryString: queryString != null ? queryString : void 0,
@@ -3608,6 +3639,15 @@ function VariablesPlugin({
                   editor.dispatchCommand(DISCONNECT_VARIABLE_COMMAND, { sourceKey });
                   return;
                 }
+                editor.update(() => {
+                  const selection = $getSelection();
+                  if ($isNodeSelection(selection)) {
+                    const selectedNodes = selection.getNodes();
+                    if (selectedNodes.every((node) => $isVariableNode(node))) {
+                      $setSelection(null);
+                    }
+                  }
+                });
                 return;
               }
               editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {
@@ -3715,7 +3755,7 @@ function VariablesPlugin({
     editVariable,
     replaceValueOnVariableInsert
   ]);
-  const updateExistingNodeIfChanged = useCallback(
+  const updateExistingNodeIfChanged = useCallback2(
     (variableNode) => {
       var _a, _b, _c;
       const targetVar = variablesRef.current.variables[variableNode.reference];
@@ -3914,9 +3954,9 @@ function VariableNodeComponent({
   const [editor] = useLexicalComposerContext3();
   const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
   const readOnly = !editor.isEditable();
-  const onDelete = useCallback2(
+  const onDelete = useCallback3(
     (event) => {
-      if (isSelected && $isNodeSelection($getSelection())) {
+      if (isSelected && $isNodeSelection2($getSelection2())) {
         event.preventDefault();
         const node = $getNodeByKey2(nodeKey);
         if ($isVariableNode(node)) {
@@ -3939,8 +3979,8 @@ function VariableNodeComponent({
       editor.registerCommand(
         KEY_ARROW_LEFT_COMMAND,
         (event) => {
-          const selection = $getSelection();
-          if ($isNodeSelection(selection)) {
+          const selection = $getSelection2();
+          if ($isNodeSelection2(selection)) {
             const nodes = selection.getNodes();
             if (nodes.length > 0) {
               event.preventDefault();
@@ -3966,8 +4006,8 @@ function VariableNodeComponent({
       editor.registerCommand(
         KEY_ARROW_RIGHT_COMMAND,
         (event) => {
-          const selection = $getSelection();
-          if ($isNodeSelection(selection) && !$isTargetWithinDecorator(event.target)) {
+          const selection = $getSelection2();
+          if ($isNodeSelection2(selection) && !$isTargetWithinDecorator(event.target)) {
             const nodes = selection.getNodes();
             if (nodes.length > 0) {
               event.preventDefault();
@@ -4036,7 +4076,7 @@ function EditorRefPlugin({
 // src/components/Variables/composer/PasteTransformerPlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister as mergeRegister3 } from "@lexical/utils";
-import { $getSelection as $getSelection2, $isRangeSelection as $isRangeSelection2, COMMAND_PRIORITY_HIGH, PASTE_COMMAND } from "lexical";
+import { $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection2, COMMAND_PRIORITY_HIGH, PASTE_COMMAND } from "lexical";
 import { useEffect as useEffect9 } from "react";
 function PasteTransformerPlugin({ transformPaste }) {
   const [editor] = useLexicalComposerContext5();
@@ -4046,7 +4086,7 @@ function PasteTransformerPlugin({ transformPaste }) {
         PASTE_COMMAND,
         (event) => {
           var _a;
-          const selection = $getSelection2();
+          const selection = $getSelection3();
           const pastedText = (_a = event.clipboardData) == null ? void 0 : _a.getData("text/plain");
           if (pastedText && transformPaste && $isRangeSelection2(selection)) {
             const result = transformPaste(pastedText);
@@ -4540,8 +4580,8 @@ import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
 import { mergeRegister as mergeRegister4, objectKlassEquals } from "@lexical/utils";
 import {
-  $getSelection as $getSelection3,
-  $isNodeSelection as $isNodeSelection2,
+  $getSelection as $getSelection4,
+  $isNodeSelection as $isNodeSelection3,
   $isRangeSelection as $isRangeSelection3,
   COMMAND_PRIORITY_HIGH as COMMAND_PRIORITY_HIGH2,
   COPY_COMMAND,
@@ -4591,10 +4631,10 @@ function RichishCopyAndPastePlugin() {
             objectKlassEquals(event, ClipboardEvent) ? event : null
           );
           editor.update(() => {
-            const selection = $getSelection3();
+            const selection = $getSelection4();
             if ($isRangeSelection3(selection)) {
               selection.removeText();
-            } else if ($isNodeSelection2(selection)) {
+            } else if ($isNodeSelection3(selection)) {
               selection.getNodes().forEach((node) => node.remove());
             }
           });
@@ -4605,12 +4645,12 @@ function RichishCopyAndPastePlugin() {
       editor.registerCommand(
         PASTE_COMMAND2,
         (event) => {
-          const selection = $getSelection3();
+          const selection = $getSelection4();
           if ($isRangeSelection3(selection)) {
             event.preventDefault();
             editor.update(
               () => {
-                const selection2 = $getSelection3();
+                const selection2 = $getSelection4();
                 const clipboardData = event instanceof InputEvent || event instanceof KeyboardEvent ? null : event.clipboardData;
                 if (clipboardData != null && $isRangeSelection3(selection2)) {
                   const lexicalString = clipboardData.getData("application/x-lexical-editor");
@@ -4933,7 +4973,7 @@ function ParameterConnectionIndicator({
 
 // src/components/Variables/ParameterOrSingleVariable.tsx
 import { HorizontalRhythm as HorizontalRhythm5 } from "@uniformdev/design-system";
-import { useCallback as useCallback3 } from "react";
+import { useCallback as useCallback4 } from "react";
 
 // src/components/Variables/composer/OnDisconnectPlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexical/react/LexicalComposerContext";
@@ -4992,7 +5032,7 @@ function ParameterOrSingleVariable(props) {
     hasVariablesInValue,
     setHadVariablesInValue
   } = useInputVariablesState(props);
-  const handleDisconnect = useCallback3(
+  const handleDisconnect = useCallback4(
     (variable) => {
       setHadVariablesInValue(false);
       if (onDisconnect) {
@@ -6197,7 +6237,7 @@ import { Callout as Callout5, Container, IconsProvider, ScrollableList, Vertical
 import { bindVariablesToObject as bindVariablesToObject2 } from "@uniformdev/canvas";
 import {
   createContext as createContext5,
-  useCallback as useCallback4,
+  useCallback as useCallback5,
   useContext as useContext7,
   useDeferredValue,
   useMemo as useMemo14,
@@ -6234,7 +6274,7 @@ var ObjectSearchProvider = ({
   const querySearchDeferred = useDeferredValue(query);
   const [selectedItems, setSelectedItems] = useState16(currentlySelectedItems != null ? currentlySelectedItems : []);
   const [list, setList] = useState16({});
-  const onSetQuery = useCallback4(
+  const onSetQuery = useCallback5(
     (value2) => {
       if (Array.isArray(value2.contentType) && value2.contentType.length > 0) {
         return setQuery({
@@ -6246,7 +6286,7 @@ var ObjectSearchProvider = ({
     },
     [setQuery]
   );
-  const onSelectItem = useCallback4(
+  const onSelectItem = useCallback5(
     (selectedResult) => {
       if (Array.isArray(selectedResult)) {
         setSelectedItems(selectedResult);
@@ -6260,10 +6300,10 @@ var ObjectSearchProvider = ({
     },
     [setSelectedItems, selectedItems]
   );
-  const onRemoveAllSelectedItems = useCallback4(() => {
+  const onRemoveAllSelectedItems = useCallback5(() => {
     setSelectedItems([]);
   }, [setSelectedItems]);
-  const onSetList = useCallback4(
+  const onSetList = useCallback5(
     (value2) => {
       setList(value2);
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "19.131.1-alpha.2+6efeeccb8b",
+  "version": "19.132.0",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -50,9 +50,9 @@
     "@lexical/selection": "^0.12.0",
     "@lexical/utils": "^0.12.0",
     "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v4.10.1/react-icons-all-files-4.10.1.tgz",
-    "@uniformdev/canvas": "19.131.1-alpha.2+6efeeccb8b",
-    "@uniformdev/design-system": "19.131.1-alpha.2+6efeeccb8b",
-    "@uniformdev/mesh-sdk": "19.131.1-alpha.2+6efeeccb8b",
+    "@uniformdev/canvas": "19.132.0",
+    "@uniformdev/design-system": "19.132.0",
+    "@uniformdev/mesh-sdk": "19.132.0",
     "dequal": "^2.0.3",
     "lexical": "^0.12.0",
     "mitt": "^3.0.0",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6efeeccb8b52f103e52aface1e43b3fec577869e"
+  "gitHead": "7e50a3037d22f060b5de46fbe32b9e4a6fb1c16c"
 }