@uniformdev/mesh-sdk-react 19.45.0 → 19.45.2-alpha.6

package/dist/index.mjs

@@ -2775,7 +2775,8 @@ import { ParameterShellContext, useParameterShell } from "@uniformdev/design-sys
 
 // src/components/Variables/composer/ControlledValuePlugin.tsx
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { useEffect as useEffect5 } from "react";
+import { dequal } from "dequal/lite";
+import { useEffect as useEffect5, useRef as useRef8 } from "react";
 
 // src/components/Variables/util/deserializeVariablesEditorState.ts
 import { parseVariableExpression } from "@uniformdev/canvas";
@@ -2886,12 +2887,17 @@ function ControlledValuePlugin({
   extraDependencies
 }) {
   const [editor] = useLexicalComposerContext();
+  const lastValueRef = useRef8(value);
   useEffect5(() => {
     if (!enabled) {
       return;
     }
+    if (dequal(lastValueRef.current, value)) {
+      return;
+    }
     setTimeout(() => {
       if (editor) {
+        lastValueRef.current = value;
         setVariablesEditorValue(editor, value);
       }
     });
@@ -2905,6 +2911,7 @@ import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection"
 import { $moveCharacter, $shouldOverrideDefaultCharacterSelection } from "@lexical/selection";
 import { mergeRegister } from "@lexical/utils";
 import { createVariableReference as createVariableReference2 } from "@uniformdev/canvas";
+import { LoadingIndicator as LoadingIndicator2 } from "@uniformdev/design-system";
 import {
   $getNearestNodeFromDOMNode,
   $getNodeByKey as $getNodeByKey2,
@@ -2993,7 +3000,7 @@ import {
 import { AiFillPlusCircle } from "@react-icons/all-files/ai/AiFillPlusCircle";
 import { createVariableReference } from "@uniformdev/canvas";
 import { HorizontalRhythm, MenuGroup, MenuItem as MenuItem2, MenuItemSeparator } from "@uniformdev/design-system";
-import { dequal } from "dequal/lite";
+import { dequal as dequal2 } from "dequal/lite";
 import {
   $getNodeByKey,
   $insertNodes,
@@ -3001,7 +3008,7 @@ import {
   COMMAND_PRIORITY_NORMAL,
   createCommand
 } from "lexical";
-import { useCallback, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef8, useState as useState8 } from "react";
+import { useCallback, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef9, useState as useState8 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Variables/toolbox/SelectVariableMenu.styles.ts
@@ -3038,7 +3045,7 @@ import { useEffect as useEffect6 } from "react";
 
 // src/components/Variables/VariablesProvider.tsx
 import mitt from "mitt";
-import * as React10 from "react";
+import { createContext as createContext3, useContext as useContext5, useMemo as useMemo7, useState as useState7 } from "react";
 
 // src/components/Variables/VariableEditor.tsx
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -3149,61 +3156,71 @@ function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }) {
 
 // src/components/Variables/VariablesProvider.tsx
 import { jsx as jsx31, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
-var VariablesContext = React10.createContext(null);
+var VariablesContext = createContext3(null);
 function VariablesProvider({
   value,
   onChange,
   editVariableComponent,
   readOnly,
+  isLoading,
   children,
   knownUndefinedValues = {}
 }) {
-  const [editing, setEditing] = React10.useState();
-  const [editingContext, setEditingContext] = React10.useState();
-  const events = React10.useMemo(() => mitt(), []);
+  const [editing, setEditing] = useState7();
+  const [editingContext, setEditingContext] = useState7();
+  const events = useMemo7(() => mitt(), []);
   if (!readOnly && !onChange) {
     throw new Error("onChange must be provided when readOnly is false");
   }
   const Editor = editVariableComponent != null ? editVariableComponent : VariableEditor;
-  const contextValue = {
-    flatVariables: flattenVariables(value),
-    dispatch: (event) => {
-      if (readOnly) {
-        console.warn(
-          `Received ignored mutation event in read-only variables context: ${JSON.stringify(event)}`
-        );
-        return;
-      }
-      if (event.type === "set") {
-        const { name, ...varValue } = event.variable;
-        onChange == null ? void 0 : onChange({ ...contextValue.variables, [event.variable.name]: varValue });
-        if (event.openEditor) {
-          setEditing(event.variable.name);
+  const valueBasedContextValue = useMemo7(
+    () => ({
+      flatVariables: flattenVariables(value),
+      dispatch: (event) => {
+        if (readOnly) {
+          console.warn(
+            `Received ignored mutation event in read-only variables context: ${JSON.stringify(event)}`
+          );
+          return;
+        }
+        if (event.type === "set") {
+          const { name, ...varValue } = event.variable;
+          onChange == null ? void 0 : onChange({ ...value, [event.variable.name]: varValue });
+          if (event.openEditor) {
+            setEditing(event.variable.name);
+            setEditingContext(event.context);
+          }
+        } else if (event.type === "edit") {
+          setEditing(event.variable);
           setEditingContext(event.context);
+        } else if (event.type === "remove") {
+          const newValue = { ...value };
+          delete newValue[event.variable];
+          onChange == null ? void 0 : onChange(newValue);
+        } else if (event.type === "reorder") {
+          onChange == null ? void 0 : onChange(event.result);
+        } else if (event.type === "cancelEdit") {
+          setEditing(void 0);
+          setEditingContext(void 0);
+        } else {
+          throw new Error(`Unknown event ${JSON.stringify(event)}`);
         }
-      } else if (event.type === "edit") {
-        setEditing(event.variable);
-        setEditingContext(event.context);
-      } else if (event.type === "remove") {
-        const newValue = { ...value };
-        delete newValue[event.variable];
-        onChange == null ? void 0 : onChange(newValue);
-      } else if (event.type === "reorder") {
-        onChange == null ? void 0 : onChange(event.result);
-      } else if (event.type === "cancelEdit") {
-        setEditing(void 0);
-        setEditingContext(void 0);
-      } else {
-        throw new Error(`Unknown event ${JSON.stringify(event)}`);
-      }
-    },
-    variables: value,
-    isEditing: typeof editing !== "undefined",
-    events,
-    canDispatch: true,
-    readOnly,
-    knownUndefinedValues
-  };
+      },
+      variables: value,
+      readOnly
+    }),
+    [onChange, readOnly, value]
+  );
+  const contextValue = useMemo7(() => {
+    return {
+      ...valueBasedContextValue,
+      isEditing: typeof editing !== "undefined",
+      events,
+      canDispatch: true,
+      knownUndefinedValues,
+      isLoading: !!isLoading
+    };
+  }, [editing, events, knownUndefinedValues, valueBasedContextValue, isLoading]);
   return /* @__PURE__ */ jsxs17(VariablesContext.Provider, { value: contextValue, children: [
     children,
     typeof editing !== "undefined" ? /* @__PURE__ */ jsx31(
@@ -3226,7 +3243,7 @@ function VariablesProvider({
   ] });
 }
 function useVariables(returnEmptyWithoutProvider = false) {
-  const context = React10.useContext(VariablesContext);
+  const context = useContext5(VariablesContext);
   if (!context) {
     if (returnEmptyWithoutProvider) {
       return {
@@ -3238,7 +3255,8 @@ function useVariables(returnEmptyWithoutProvider = false) {
         isEditing: false,
         variables: {},
         knownUndefinedValues: {},
-        canDispatch: false
+        canDispatch: false,
+        isLoading: false
       };
     }
     throw new Error("No VariablesProvider present");
@@ -3393,7 +3411,8 @@ function useVariablesMenu({
             hasClickEvent: canEditVariable(value, targetVariable),
             referenceIsValid: true,
             tooltip: (_a = targetVariable == null ? void 0 : targetVariable.tooltip) != null ? _a : targetVariable == null ? void 0 : targetVariable.helpText,
-            isFresh: true
+            isFresh: true,
+            isLoading: false
           });
           if (nodeToReplace) {
             nodeToReplace.replace(variableNode);
@@ -3416,9 +3435,9 @@ function VariablesPlugin({
   filterVariable
 }) {
   const [editor] = useLexicalComposerContext2();
-  const { variables, dispatch, isEditing, canDispatch, readOnly, knownUndefinedValues } = useVariables(true);
-  const variablesRef = useRef8({ variables, knownUndefinedValues });
-  variablesRef.current = { variables, knownUndefinedValues };
+  const { variables, dispatch, isEditing, canDispatch, readOnly, knownUndefinedValues, isLoading } = useVariables(true);
+  const variablesRef = useRef9({ variables, knownUndefinedValues, isLoading });
+  variablesRef.current = { variables, knownUndefinedValues, isLoading };
   const canEditVariable = useCallback(
     (name, variable) => (
       // name === '' means new var. Add var perms computed by menu options.
@@ -3527,7 +3546,8 @@ function VariablesPlugin({
             hasClickEvent: canEditVariable(reference, targetVariable),
             referenceIsValid: true,
             tooltip: (_a = targetVariable == null ? void 0 : targetVariable.tooltip) != null ? _a : targetVariable == null ? void 0 : targetVariable.helpText,
-            isFresh: true
+            isFresh: true,
+            isLoading: false
           });
           if (targetKey) {
             (_b = $getNodeByKey(targetKey)) == null ? void 0 : _b.replace(variableNode);
@@ -3545,17 +3565,20 @@ function VariablesPlugin({
       var _a, _b, _c;
       const targetVar = variablesRef.current.variables[variableNode.reference];
       const targetUndefinedVar = variablesRef.current.knownUndefinedValues[variableNode.reference];
+      const isLoadingVariables = variablesRef.current.isLoading;
       const tooltip = (_c = (_b = (_a = targetVar == null ? void 0 : targetVar.tooltip) != null ? _a : targetVar == null ? void 0 : targetVar.helpText) != null ? _b : targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) != null ? _c : targetUndefinedVar == null ? void 0 : targetUndefinedVar.info;
       const currentState = variableNode.getState();
       const newState = {
         ...currentState,
-        // if we lose a display name we 'latch' it to last known (prevents flashes during mesh var updates)
-        displayName: (targetVar == null ? void 0 : targetVar.displayName) || currentState.displayName || variableNode.reference,
+        // if we lose a display name we 'latch' it to last known (prevents flashes during mesh var updates),
+        // unless we're also loading the whole var state
+        displayName: (targetVar == null ? void 0 : targetVar.displayName) || (isLoadingVariables ? void 0 : currentState.displayName) || variableNode.reference,
+        isLoading: isLoadingVariables && !targetVar && !(targetUndefinedVar == null ? void 0 : targetUndefinedVar.info),
         hasClickEvent: canEditVariable(variableNode.reference, targetVar),
-        referenceIsValid: (targetUndefinedVar == null ? void 0 : targetUndefinedVar.info) ? "info" : Boolean(targetVar),
+        referenceIsValid: (targetUndefinedVar == null ? void 0 : targetUndefinedVar.info) ? "info" : isLoadingVariables ? true : Boolean(targetVar),
         tooltip
       };
-      if (!dequal(currentState, newState)) {
+      if (!dequal2(currentState, newState)) {
         variableNode.setState(newState);
       }
     },
@@ -3671,7 +3694,8 @@ var VariableNode = class _VariableNode extends DecoratorNode {
       referenceIsValid: true,
       isFresh: false,
       hasClickEvent: void 0,
-      tooltip: void 0
+      tooltip: void 0,
+      isLoading: false
     });
   }
   /** Gets the node's current state */
@@ -3812,6 +3836,7 @@ function VariableNodeComponent({
     {
       ...state,
       reference,
+      displayName: state.isLoading ? /* @__PURE__ */ jsx33(LoadingIndicator2, { size: "sm" }) : state.displayName,
       selected: isSelected,
       onClick: state.hasClickEvent ? () => {
         setSelected(!isSelected);
@@ -3922,7 +3947,7 @@ var input = css21`
 `;
 
 // src/components/Variables/toolbox/InputVariablesProvider.tsx
-import * as React11 from "react";
+import * as React10 from "react";
 import { useMemo as useMemo9 } from "react";
 
 // src/components/Variables/util/hasReferencedVariables.ts
@@ -3953,14 +3978,14 @@ function useInputVariablesState({
 }) {
   const { variables } = useVariables(true);
   const hasVariablesInValue = hasReferencedVariables(value != null ? value : "");
-  const [lastKnownId] = React11.useState(id);
-  const [hadVariablesInValue, setHadVariablesInValue] = React11.useState(hasVariablesInValue);
-  React11.useEffect(() => {
+  const [lastKnownId] = React10.useState(id);
+  const [hadVariablesInValue, setHadVariablesInValue] = React10.useState(hasVariablesInValue);
+  React10.useEffect(() => {
     if (hasVariablesInValue) {
       setHadVariablesInValue(true);
     }
   }, [hasVariablesInValue]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (id !== lastKnownId) {
       setHadVariablesInValue(hasVariablesInValue);
     }
@@ -4038,7 +4063,7 @@ import { CLEAR_EDITOR_COMMAND } from "lexical";
 import { BsFillPlusCircleFill } from "@react-icons/all-files/bs/BsFillPlusCircleFill";
 import { CgUsbC } from "@react-icons/all-files/cg/CgUsbC";
 import { HorizontalRhythm as HorizontalRhythm2, Menu as Menu2, MenuGroup as MenuGroup2, MenuItem as MenuItem3, MenuItemSeparator as MenuItemSeparator2 } from "@uniformdev/design-system";
-import { useEffect as useEffect11, useRef as useRef9, useState as useState10 } from "react";
+import { useEffect as useEffect11, useRef as useRef10, useState as useState10 } from "react";
 import { Fragment as Fragment7, jsx as jsx34, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 function SelectVariableMenu({
   onSelectVariable,
@@ -4052,7 +4077,7 @@ function SelectVariableMenu({
   filterVariable
 }) {
   const { variables, dispatch, isEditing, canDispatch, readOnly } = useVariables(true);
-  const btnRef = useRef9(null);
+  const btnRef = useRef10(null);
   const [openedAdd, setOpenedAdd] = useState10(false);
   useOnVariableUpdated(({ name, latestValue }) => {
     onSelectVariable == null ? void 0 : onSelectVariable({ ...latestValue[name], name });
@@ -4191,7 +4216,7 @@ import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
 import { ClearEditorPlugin } from "@lexical/react/LexicalClearEditorPlugin";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
-import { useMemo as useMemo10, useRef as useRef10, useState as useState11 } from "react";
+import { useMemo as useMemo10, useRef as useRef11, useState as useState11 } from "react";
 
 // src/components/Variables/composer/DisablePlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
@@ -4276,8 +4301,8 @@ function VariablesComposer(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const editorState = useRef10();
-  const updateTimeout = useRef10();
+  const editorState = useRef11();
+  const updateTimeout = useRef11();
   if (typeof document === "undefined")
     return null;
   return /* @__PURE__ */ jsxs21(LexicalComposer, { initialConfig: editorConfig, children: [
@@ -4619,7 +4644,8 @@ var input2 = css23`
     color: var(--gray-400);
   }
 
-  &[readonly] {
+  &[readonly],
+  &[contenteditable='false'] {
     cursor: not-allowed;
     color: var(--gray-400);
   }
@@ -5106,11 +5132,11 @@ import { InputSelect as InputSelect4, JsonEditor } from "@uniformdev/design-syst
 import { useState as useState13 } from "react";
 
 // src/components/Request/RequestProvider.tsx
-import * as React12 from "react";
+import * as React11 from "react";
 import { jsx as jsx46 } from "@emotion/react/jsx-runtime";
-var RequestContext = React12.createContext(null);
+var RequestContext = React11.createContext(null);
 function RequestProvider({ value, onChange, children }) {
-  const contextValue = React12.useMemo(() => {
+  const contextValue = React11.useMemo(() => {
     return {
       dispatch: (event) => {
         if (event.type === "setRelativeUrl") {
@@ -5179,7 +5205,7 @@ function RequestProvider({ value, onChange, children }) {
   return /* @__PURE__ */ jsx46(RequestContext.Provider, { value: contextValue, children });
 }
 function useRequest() {
-  const context = React12.useContext(RequestContext);
+  const context = React11.useContext(RequestContext);
   if (!context) {
     throw new Error("No RequestProvider present");
   }
@@ -5801,15 +5827,15 @@ function convertRequestDataToDataType(dataType, requestData) {
 }
 
 // src/components/MeshApp.tsx
-import { LoadingIndicator as LoadingIndicator2, Theme as Theme2 } from "@uniformdev/design-system";
+import { LoadingIndicator as LoadingIndicator3, Theme as Theme2 } from "@uniformdev/design-system";
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 import { initializeUniformMeshSDK } from "@uniformdev/mesh-sdk";
-import { useEffect as useEffect15, useRef as useRef11, useState as useState14 } from "react";
+import { useEffect as useEffect15, useRef as useRef12, useState as useState14 } from "react";
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
   const [error, setError] = useState14();
   const [sdk, setSdk] = useState14();
-  const initializationInProgress = useRef11(false);
+  const initializationInProgress = useRef12(false);
   useEffect15(
     () => {
       if (typeof window === "undefined" || sdk) {
@@ -5852,7 +5878,7 @@ var MeshApp = ({
   const { initializing, error, sdk } = useInitializeUniformMeshSdk();
   if (initializing || !sdk) {
     const LoadingComponent = loadingComponent;
-    return LoadingComponent ? /* @__PURE__ */ jsx56(LoadingComponent, {}) : /* @__PURE__ */ jsx56(LoadingIndicator2, {});
+    return LoadingComponent ? /* @__PURE__ */ jsx56(LoadingComponent, {}) : /* @__PURE__ */ jsx56(LoadingIndicator3, {});
   }
   if (error) {
     const ErrorComponent = errorComponent;
@@ -5869,7 +5895,7 @@ var MeshApp = ({
 
 // src/components/ObjectSearch/DataRefreshButton.tsx
 import { css as css30 } from "@emotion/react";
-import { Button as Button3, LoadingIndicator as LoadingIndicator3 } from "@uniformdev/design-system";
+import { Button as Button3, LoadingIndicator as LoadingIndicator4 } from "@uniformdev/design-system";
 import { jsx as jsx57, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var DataRefreshButton = ({
   buttonText,
@@ -5879,7 +5905,7 @@ var DataRefreshButton = ({
 }) => {
   return /* @__PURE__ */ jsxs33(Button3, { buttonType: "primaryInvert", onClick: onRefreshData, disabled: isLoading, ...props, children: [
     !isLoading ? null : /* @__PURE__ */ jsx57(
-      LoadingIndicator3,
+      LoadingIndicator4,
       {
         css: css30`
             ${isLoading ? "opacity: 0.2;" : void 0}
@@ -6774,7 +6800,7 @@ var QueryFilter = ({
 };
 
 // src/components/ParamTypeDynamicDataProvider.tsx
-import { useEffect as useEffect17, useMemo as useMemo15, useRef as useRef12 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo15, useRef as useRef13 } from "react";
 import { jsx as jsx67 } from "@emotion/react/jsx-runtime";
 function ParamTypeDynamicDataProvider(props) {
   const { children } = props;
@@ -6796,7 +6822,7 @@ var JsonMeshVariableEditor = ({
   variable,
   context
 }) => {
-  const sillyRef = useRef12(false);
+  const sillyRef = useRef13(false);
   const { editConnectedData } = useMeshLocation("paramType");
   useEffect17(() => {
     if (sillyRef.current) {
@@ -6847,7 +6873,7 @@ import {
   InputSelect as InputSelect8,
   InputToggle,
   Label,
-  LoadingIndicator as LoadingIndicator4,
+  LoadingIndicator as LoadingIndicator5,
   LoadingOverlay as LoadingOverlay2,
   Menu as Menu4,
   MenuItem as MenuItem4,
@@ -6902,7 +6928,7 @@ export {
   InputVariables,
   Label,
   LinkButton,
-  LoadingIndicator4 as LoadingIndicator,
+  LoadingIndicator5 as LoadingIndicator,
   LoadingOverlay2 as LoadingOverlay,
   Menu4 as Menu,
   MenuItem4 as MenuItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "19.45.0",
+  "version": "19.45.2-alpha.6+ea4628ae5",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -49,9 +49,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.45.0",
-    "@uniformdev/design-system": "19.45.0",
-    "@uniformdev/mesh-sdk": "19.45.0",
+    "@uniformdev/canvas": "19.45.2-alpha.6+ea4628ae5",
+    "@uniformdev/design-system": "19.45.2-alpha.6+ea4628ae5",
+    "@uniformdev/mesh-sdk": "19.45.2-alpha.6+ea4628ae5",
     "dequal": "^2.0.3",
     "lexical": "^0.12.0",
     "mitt": "^3.0.0",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ff90cd6bd6d9db14f0d3a2ba8bd4db538b66548c"
+  "gitHead": "ea4628ae5765af32b174d3dac546fed03170c9aa"
 }