@uniformdev/mesh-sdk-react 19.38.3-alpha.70 → 19.38.3-alpha.78

package/dist/index.esm.js

@@ -267,8 +267,8 @@ import { useAsyncFn, useDebounce } from "react-use";
 
 // src/components/commerce/SelectionField.tsx
 import { css as css2 } from "@emotion/react";
+import { CgClose } from "@react-icons/all-files/cg/CgClose";
 import { Icon, InputSelect } from "@uniformdev/design-system";
-import { CgClose } from "react-icons/cg";
 
 // src/components/commerce/ResolvableLoadingValue.tsx
 import { Fragment, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
@@ -1077,9 +1077,10 @@ var DefaultSearchRow = ({ result, isSelected, triggerSelection }) => {
 
 // src/components/legacy/EntrySearch/DefaultSelectedItem.tsx
 import { css as css9 } from "@emotion/react";
+import { CgClose as CgClose2 } from "@react-icons/all-files/cg/CgClose";
+import { CgInfo } from "@react-icons/all-files/cg/CgInfo";
 import { Icon as Icon2, useOutsideClick as useOutsideClick2 } from "@uniformdev/design-system";
 import { useEffect, useRef as useRef2, useState as useState2 } from "react";
-import { CgClose as CgClose2, CgInfo } from "react-icons/cg";
 import { format as timeAgo } from "timeago.js";
 
 // src/utils/openWindowWithCloseCallback.ts
@@ -2037,8 +2038,8 @@ function ProductSearchRow({
 
 // src/components/commerce/ProductSelectedItem.tsx
 import { css as css15 } from "@emotion/react";
+import { CgClose as CgClose3 } from "@react-icons/all-files/cg/CgClose";
 import { Icon as Icon3, mq as mq4 } from "@uniformdev/design-system";
-import { CgClose as CgClose3 } from "react-icons/cg";
 
 // src/components/commerce/styles/ProductSelectedItem.styles.ts
 import { css as css14 } from "@emotion/react";
@@ -2349,9 +2350,10 @@ var useProductSearchContext = () => {
 
 // src/components/dam/DamSelectedItem.tsx
 import { css as css17 } from "@emotion/react";
+import { CgClose as CgClose4 } from "@react-icons/all-files/cg/CgClose";
+import { CgInfo as CgInfo2 } from "@react-icons/all-files/cg/CgInfo";
 import { Icon as Icon4 } from "@uniformdev/design-system";
 import { useEffect as useEffect4, useRef as useRef6, useState as useState5 } from "react";
-import { CgClose as CgClose4, CgInfo as CgInfo2 } from "react-icons/cg";
 import { format as timeAgo2 } from "timeago.js";
 
 // src/components/dam/DamSelectedItem.styles.ts
@@ -2773,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";
@@ -2884,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);
       }
     });
@@ -2903,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,
@@ -2936,7 +2945,8 @@ function VariableChip({
   reference,
   onClick,
   isFresh,
-  selected
+  selected,
+  disabled
 }) {
   const hasClickEvent = !!onClick;
   const referenceIsValidFr = isFresh ? true : referenceIsValid;
@@ -2950,6 +2960,7 @@ function VariableChip({
 ${extraTitle}` : ""}` : extraTitle,
       onClick,
       "aria-selected": selected ? true : void 0,
+      "aria-disabled": disabled,
       children: /* @__PURE__ */ jsx29(Wrapper, { children: displayName || reference })
     }
   );
@@ -2988,9 +2999,10 @@ import {
   LexicalTypeaheadMenuPlugin,
   MenuOption
 } from "@lexical/react/LexicalTypeaheadMenuPlugin";
+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,
@@ -2998,9 +3010,8 @@ 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";
-import { AiFillPlusCircle } from "react-icons/ai";
 
 // src/components/Variables/toolbox/SelectVariableMenu.styles.ts
 import { css as css18 } from "@emotion/react";
@@ -3036,7 +3047,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";
@@ -3147,61 +3158,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(
@@ -3224,7 +3245,7 @@ function VariablesProvider({
   ] });
 }
 function useVariables(returnEmptyWithoutProvider = false) {
-  const context = React10.useContext(VariablesContext);
+  const context = useContext5(VariablesContext);
   if (!context) {
     if (returnEmptyWithoutProvider) {
       return {
@@ -3236,7 +3257,8 @@ function useVariables(returnEmptyWithoutProvider = false) {
         isEditing: false,
         variables: {},
         knownUndefinedValues: {},
-        canDispatch: false
+        canDispatch: false,
+        isLoading: false
       };
     }
     throw new Error("No VariablesProvider present");
@@ -3391,7 +3413,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);
@@ -3414,9 +3437,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.
@@ -3525,7 +3548,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);
@@ -3543,17 +3567,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);
       }
     },
@@ -3669,7 +3696,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 */
@@ -3729,6 +3757,7 @@ function VariableNodeComponent({
 }) {
   const [editor] = useLexicalComposerContext3();
   const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+  const readOnly = !editor.isEditable();
   const onDelete = useCallback2(
     (event) => {
       if (isSelected && $isNodeSelection($getSelection())) {
@@ -3810,7 +3839,9 @@ function VariableNodeComponent({
     {
       ...state,
       reference,
+      displayName: state.isLoading ? /* @__PURE__ */ jsx33(LoadingIndicator2, { size: "sm" }) : state.displayName,
       selected: isSelected,
+      disabled: readOnly,
       onClick: state.hasClickEvent ? () => {
         setSelected(!isSelected);
         editor.dispatchCommand(EDIT_VARIABLE_COMMAND, {
@@ -3920,7 +3951,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
@@ -3951,14 +3982,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);
     }
@@ -4033,10 +4064,10 @@ import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexica
 import { CLEAR_EDITOR_COMMAND } from "lexical";
 
 // src/components/Variables/toolbox/SelectVariableMenu.tsx
+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 { BsFillPlusCircleFill } from "react-icons/bs";
-import { CgUsbC } from "react-icons/cg";
+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,
@@ -4050,7 +4081,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 });
@@ -4070,11 +4101,12 @@ function SelectVariableMenu({
     Menu2,
     {
       placement: "bottom-start",
+      withoutPortal: true,
       menuTrigger: /* @__PURE__ */ jsx34(
         "button",
         {
-          title: menuTooltip,
           ...buttonProps,
+          title: menuTooltip,
           ref: btnRef,
           css: [menuBtn, buttonCss],
           type: "button",
@@ -4188,7 +4220,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";
@@ -4273,8 +4305,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: [
@@ -4318,6 +4350,7 @@ import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
+import { objectKlassEquals } from "@lexical/utils";
 import {
   $getSelection as $getSelection3,
   $isNodeSelection as $isNodeSelection2,
@@ -4349,7 +4382,7 @@ function RichishCopyAndPastePlugin() {
     editor.registerCommand(
       COPY_COMMAND,
       (event) => {
-        copyToClipboard(editor, event);
+        copyToClipboard(editor, objectKlassEquals(event, ClipboardEvent) ? event : null);
         return true;
       },
       COMMAND_PRIORITY_HIGH2
@@ -4357,7 +4390,7 @@ function RichishCopyAndPastePlugin() {
     editor.registerCommand(
       CUT_COMMAND,
       (event) => {
-        copyToClipboard(editor, event);
+        copyToClipboard(editor, objectKlassEquals(event, ClipboardEvent) ? event : null);
         editor.update(() => {
           const selection = $getSelection3();
           if ($isRangeSelection3(selection)) {
@@ -4441,7 +4474,7 @@ function InputVariables(props) {
   const { dispatch, canDispatch, isEditing } = useVariables(true);
   const { disableVariablesForReals, hadVariablesInValue, sharedMenuProps } = useInputVariablesState(props);
   const disableInlineVariablesForReals = disableVariablesForReals || disableInlineMenu;
-  const replaceValueOnVariableInsert = Boolean(inputWhenNoVariables && !hadVariablesInValue);
+  const useInputWithNoVariables = Boolean(inputWhenNoVariables && !hadVariablesInValue);
   const input3 = /* @__PURE__ */ jsxs23(
     "div",
     {
@@ -4451,12 +4484,13 @@ function InputVariables(props) {
         }
       },
       children: [
-        inputWhenNoVariables && !hadVariablesInValue ? inputWhenNoVariables : /* @__PURE__ */ jsx39(
+        useInputWithNoVariables ? inputWhenNoVariables : /* @__PURE__ */ jsx39(
           InputVariablesOverlayMenu,
           {
             ...sharedMenuProps,
             disabled: disableInlineVariablesForReals,
-            replaceValueOnVariableInsert,
+            replaceValueOnVariableInsert: useInputWithNoVariables,
+            useInputWhenNoVariables: useInputWithNoVariables,
             children: /* @__PURE__ */ jsx39(
               VariablesComposerInput,
               {
@@ -4484,7 +4518,7 @@ function InputVariables(props) {
         label,
         selectVariableMenuOptions: {
           ...sharedMenuProps,
-          replaceValueOnVariableInsert
+          replaceValueOnVariableInsert: useInputWithNoVariables
         },
         id: finalId,
         isActive: hadVariablesInValue,
@@ -4504,12 +4538,12 @@ function InputVariables(props) {
       enableEditingVariables: !disabled && !disableVariablesForReals && enableEditingVariables,
       getEditorContext,
       disabled,
-      replaceValueOnVariableInsert,
+      replaceValueOnVariableInsert: useInputWithNoVariables,
       autoFocus,
       filterVariable,
       children: [
         /* @__PURE__ */ jsx39(PasteTransformerPlugin, { transformPaste }),
-        /* @__PURE__ */ jsx39(ControlledValuePlugin, { value, enabled: !!inputWhenNoVariables && !hadVariablesInValue }),
+        /* @__PURE__ */ jsx39(ControlledValuePlugin, { value, enabled: useInputWithNoVariables }),
         editorRef ? /* @__PURE__ */ jsx39(EditorRefPlugin, { editorRef }) : null,
         body
       ]
@@ -4519,6 +4553,7 @@ function InputVariables(props) {
 function InputVariablesOverlayMenu({
   children,
   disabled,
+  useInputWhenNoVariables,
   ...props
 }) {
   if (disabled) {
@@ -4530,7 +4565,7 @@ function InputVariablesOverlayMenu({
       VariablesComposerVariableMenu,
       {
         ...props,
-        tip: "Tip: access this list by typing $$",
+        tip: useInputWhenNoVariables ? void 0 : "Tip: access this list by typing $$",
         buttonCss: menuBtn2
       }
     )
@@ -4538,10 +4573,10 @@ function InputVariablesOverlayMenu({
 }
 
 // src/components/Variables/ParameterConnectionIndicator.tsx
+import { CgUsbC as CgUsbC2 } from "@react-icons/all-files/cg/CgUsbC";
 import { bindVariablesToObject } from "@uniformdev/canvas";
 import { HorizontalRhythm as HorizontalRhythm3, Menu as Menu3 } from "@uniformdev/design-system";
 import { useMemo as useMemo11 } from "react";
-import { CgUsbC as CgUsbC2 } from "react-icons/cg";
 
 // src/components/Variables/styles/ParameterVariables.styles.ts
 import { css as css23 } from "@emotion/react";
@@ -4567,6 +4602,12 @@ var variableBindButton2 = css23`
     background: none;
     color: currentColor;
   }
+
+  // fixes menu resizing issue within iframes
+  // see https://linear.app/uniform/issue/UNI-3068/mesh-integration-resizing-with-menus
+  + [role='menu'] {
+    max-height: unset;
+  }
 `;
 var input2 = css23`
   display: block;
@@ -4607,7 +4648,8 @@ var input2 = css23`
     color: var(--gray-400);
   }
 
-  &[readonly] {
+  &[readonly],
+  &[contenteditable='false'] {
     cursor: not-allowed;
     color: var(--gray-400);
   }
@@ -4649,6 +4691,7 @@ function ParameterConnectionIndicator({
       Menu3,
       {
         placement: "bottom-start",
+        withoutPortal: true,
         menuTrigger: /* @__PURE__ */ jsx40(
           "button",
           {
@@ -4743,7 +4786,7 @@ function ParameterVariables(props) {
   } = props;
   const { dispatch, canDispatch, isEditing } = useVariables(true);
   const { disableVariablesForReals, hadVariablesInValue, sharedMenuProps, hasVariablesInValue } = useInputVariablesState(props);
-  const replaceValueOnVariableInsert = Boolean(inputWhenNoVariables && !hadVariablesInValue);
+  const useInputWhenNoVariables = Boolean(inputWhenNoVariables && !hadVariablesInValue);
   return /* @__PURE__ */ jsxs26(
     VariablesComposer,
     {
@@ -4755,12 +4798,12 @@ function ParameterVariables(props) {
       enableEditingVariables: !disabled,
       getEditorContext,
       disabled,
-      replaceValueOnVariableInsert,
+      replaceValueOnVariableInsert: useInputWhenNoVariables,
       autoFocus,
       filterVariable,
       children: [
         editorRef ? /* @__PURE__ */ jsx42(EditorRefPlugin, { editorRef }) : null,
-        /* @__PURE__ */ jsx42(ControlledValuePlugin, { value, enabled: !!inputWhenNoVariables && !hadVariablesInValue }),
+        /* @__PURE__ */ jsx42(ControlledValuePlugin, { value, enabled: useInputWhenNoVariables }),
         /* @__PURE__ */ jsxs26(
           HorizontalRhythm5,
           {
@@ -4773,7 +4816,7 @@ function ParameterVariables(props) {
               }
             },
             children: [
-              /* @__PURE__ */ jsx42("div", { css: { flex: 1 }, children: inputWhenNoVariables && !hadVariablesInValue ? inputWhenNoVariables : /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx42("div", { css: { flex: 1 }, children: useInputWhenNoVariables ? inputWhenNoVariables : /* @__PURE__ */ jsx42(
                 VariablesComposerInput,
                 {
                   "aria-label": ariaLabel,
@@ -4790,9 +4833,9 @@ function ParameterVariables(props) {
                 {
                   ...sharedMenuProps,
                   buttonCss: [variableBindButton2],
-                  tip: "Tip: access this list by typing $$",
+                  tip: useInputWhenNoVariables ? void 0 : "Tip: access this list by typing $$",
                   buttonProps: hasVariablesInValue ? { "aria-pressed": "true" } : void 0,
-                  replaceValueOnVariableInsert
+                  replaceValueOnVariableInsert: useInputWhenNoVariables
                 }
               )
             ]
@@ -5093,11 +5136,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") {
@@ -5166,7 +5209,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");
   }
@@ -5283,7 +5326,10 @@ import {
   WarningMessage as WarningMessage2
 } from "@uniformdev/design-system";
 import { jsx as jsx49, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
-function RequestHeaders({ disableVariables }) {
+function RequestHeaders({
+  disableVariables,
+  addOmitIfEmpty
+}) {
   var _a, _b;
   const { dispatch, request } = useRequest();
   const deezHeaders = [...request.headers, { key: "", value: "" }];
@@ -5301,7 +5347,8 @@ function RequestHeaders({ disableVariables }) {
   return /* @__PURE__ */ jsx49("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs29(Table2, { children: [
     /* @__PURE__ */ jsx49(TableHead2, { children: /* @__PURE__ */ jsxs29(TableRow2, { children: [
       /* @__PURE__ */ jsx49(TableCellHead2, { children: "Name" }),
-      /* @__PURE__ */ jsx49(TableCellHead2, { children: "Value" })
+      /* @__PURE__ */ jsx49(TableCellHead2, { children: "Value" }),
+      addOmitIfEmpty ? /* @__PURE__ */ jsx49(TableCellHead2, { children: "Omit If Empty" }) : null
     ] }) }),
     /* @__PURE__ */ jsxs29(TableBody2, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.headers) == null ? void 0 : _b.map((baseHeader) => {
@@ -5349,7 +5396,24 @@ function RequestHeaders({ disableVariables }) {
               enableEditingVariables: true,
               "data-testid": "header-value"
             }
-          ) : null })
+          ) : null }),
+          addOmitIfEmpty ? /* @__PURE__ */ jsx49(TableCellData2, { width: "50%", children: header.key ? /* @__PURE__ */ jsx49(
+            Input3,
+            {
+              type: "checkbox",
+              checked: header.omitIfEmpty,
+              "data-testid": "header-omitifempty",
+              onChange: (e) => dispatch({
+                type: "updateHeader",
+                header: {
+                  key: header.key,
+                  value: header.value,
+                  omitIfEmpty: e.currentTarget.checked
+                },
+                index
+              })
+            }
+          ) : null }) : null
         ] }, index);
       })
     ] })
@@ -5389,25 +5453,30 @@ import {
   WarningMessage as WarningMessage3
 } from "@uniformdev/design-system";
 import { jsx as jsx51, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
-function RequestParameters({ disableVariables }) {
+function RequestParameters({
+  disableVariables,
+  addOmitIfEmpty
+}) {
   var _a, _b;
   const { dispatch, request } = useRequest();
   const deezParameters = [...request.parameters, { key: "", value: "" }];
   const handleUpdateParamFromMenu = ({
     key,
     value,
+    omitIfEmpty,
     index
   }) => {
     dispatch({
       type: "updateParameter",
-      parameter: { key, value },
+      parameter: { key, value, omitIfEmpty },
       index
     });
   };
   return /* @__PURE__ */ jsx51("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs30(Table3, { children: [
     /* @__PURE__ */ jsx51(TableHead3, { children: /* @__PURE__ */ jsxs30(TableRow3, { children: [
       /* @__PURE__ */ jsx51(TableCellHead3, { children: "Name" }),
-      /* @__PURE__ */ jsx51(TableCellHead3, { children: "Value" })
+      /* @__PURE__ */ jsx51(TableCellHead3, { children: "Value" }),
+      addOmitIfEmpty ? /* @__PURE__ */ jsx51(TableCellHead3, { children: "Omit If Empty" }) : null
     ] }) }),
     /* @__PURE__ */ jsxs30(TableBody3, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.parameters) == null ? void 0 : _b.map((baseParameter) => {
@@ -5435,7 +5504,11 @@ function RequestParameters({ disableVariables }) {
                 if (e.currentTarget.value) {
                   dispatch({
                     type: "updateParameter",
-                    parameter: { key: e.currentTarget.value, value: parameter.value },
+                    parameter: {
+                      key: e.currentTarget.value,
+                      value: parameter.value,
+                      omitIfEmpty: parameter.omitIfEmpty
+                    },
                     index
                   });
                 } else {
@@ -5452,6 +5525,7 @@ function RequestParameters({ disableVariables }) {
               onChange: (selectedVariable) => handleUpdateParamFromMenu({
                 key: parameter.key,
                 value: selectedVariable != null ? selectedVariable : "",
+                omitIfEmpty: parameter.omitIfEmpty,
                 index
               }),
               disableVariables,
@@ -5459,7 +5533,26 @@ function RequestParameters({ disableVariables }) {
               showAddVariableMenuOption: "Add variable...",
               enableEditingVariables: true
             }
-          ) : null })
+          ) : null }),
+          addOmitIfEmpty ? /* @__PURE__ */ jsx51(TableCellData3, { width: "50%", children: parameter.key ? /* @__PURE__ */ jsx51(
+            Input4,
+            {
+              type: "checkbox",
+              checked: parameter.omitIfEmpty,
+              "data-testid": "parameter-omitifempty",
+              onChange: (e) => {
+                dispatch({
+                  type: "updateParameter",
+                  parameter: {
+                    key: parameter.key,
+                    value: parameter.value,
+                    omitIfEmpty: e.currentTarget.checked
+                  },
+                  index
+                });
+              }
+            }
+          ) : null }) : null
         ] }, index);
       })
     ] })
@@ -5738,15 +5831,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) {
@@ -5789,7 +5882,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;
@@ -5806,7 +5899,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,
@@ -5816,7 +5909,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}
@@ -6711,7 +6804,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;
@@ -6733,7 +6826,7 @@ var JsonMeshVariableEditor = ({
   variable,
   context
 }) => {
-  const sillyRef = useRef12(false);
+  const sillyRef = useRef13(false);
   const { editConnectedData } = useMeshLocation("paramType");
   useEffect17(() => {
     if (sillyRef.current) {
@@ -6784,7 +6877,7 @@ import {
   InputSelect as InputSelect8,
   InputToggle,
   Label,
-  LoadingIndicator as LoadingIndicator4,
+  LoadingIndicator as LoadingIndicator5,
   LoadingOverlay as LoadingOverlay2,
   Menu as Menu4,
   MenuItem as MenuItem4,
@@ -6839,7 +6932,7 @@ export {
   InputVariables,
   Label,
   LinkButton,
-  LoadingIndicator4 as LoadingIndicator,
+  LoadingIndicator5 as LoadingIndicator,
   LoadingOverlay2 as LoadingOverlay,
   Menu4 as Menu,
   MenuItem4 as MenuItem,