@uniformdev/mesh-sdk-react 18.35.1-alpha.12 → 18.35.1-alpha.26

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import { DataVariableDefinition, DataResourceVariables } from '@uniformdev/canva
 import * as _uniformdev_mesh_sdk from '@uniformdev/mesh-sdk';
 import { MeshLocation, SetValueOptions, DataSourceLocationValue, DataTypeLocationValue } from '@uniformdev/mesh-sdk';
 export * from '@uniformdev/mesh-sdk';
+import { Emitter } from 'mitt';
 import { BadgeThemeProps, InputSelectProps } from '@uniformdev/design-system';
 export { AddListButton, AddListButtonProps, Button, ButtonProps, Callout, CalloutProps, Heading, HeadingProps, Input, InputComboBox, InputComboBoxProps, InputKeywordSearch, InputProps, InputSelect, InputToggle, InputToggleProps, Label, LabelProps, LoadingIndicator, LoadingOverlay, Menu, MenuItem, MenuItemProps, MenuProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, ScrollableList, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, Switch, SwitchProps, Textarea, TextareaProps, Theme, ThemeProps, useParameterShell } from '@uniformdev/design-system';
 
@@ -440,11 +441,16 @@ type InputVariablesProps = {
     onChange: (newValue: string) => void;
     /** called when the field is pasted into */
     onPaste?: (newValue: string) => void;
+    /** Disables using variables in the input */
     disableVariables?: boolean;
-    onVariableClick: (selectedVariable: string) => void;
+    /** Enables adding variables from the menu */
     showAddVariableMenuOption?: boolean;
+    /** Value prefix to trigger variable menu */
+    variablePrefix?: string;
+    /** Value suffix to use for variable values */
+    variableSuffix?: string;
 };
-declare function InputVariables({ 'aria-label': ariaLabel, value, onChange, onPaste, onVariableClick, showAddVariableMenuOption, ...inputProps }: InputVariablesProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function InputVariables({ 'aria-label': ariaLabel, value, disableVariables, onChange, onPaste, showAddVariableMenuOption, variablePrefix, variableSuffix, ...inputProps }: InputVariablesProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type DataVariableDefinitionWithName = {
     name: string;
@@ -479,9 +485,18 @@ type VariablesAction = {
     type: 'reorder';
     result: Record<string, DataVariableDefinitionWithName>;
 };
+type VariablesEvents = {
+    update: string;
+};
 type VariablesContext = {
+    /** Dispatch update events to the variables */
     dispatch: (event: VariablesAction) => void;
+    /** The current variables value */
     variables: Readonly<Record<string, DataVariableDefinition>>;
+    /** Whether the context is editing a variable value currently */
+    isEditing: boolean;
+    /** Add event handles (don't forget to unhook) */
+    events: Emitter<VariablesEvents>;
 };
 declare function VariablesProvider({ value, onChange, editVariableComponent, children, }: VariablesProviderProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 declare function useVariables(): VariablesContext;
@@ -982,7 +997,7 @@ declare function RequestUrl(): _emotion_react_types_jsx_namespace.EmotionJSX.Ele
  * Editor to modify the current URL of the request
  * Note: entering query string parameters automatically converts them and syncs the request state with them
  */
-declare function RequestUrlInput(props: Omit<InputVariablesProps, 'value' | 'onChange' | 'onVariableClick'>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function RequestUrlInput(props: Omit<InputVariablesProps, 'value' | 'onChange'>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 declare function urlEncodeRequestUrl(url: string, varValues?: Record<string, DataVariableDefinition>): string;
 declare function urlEncodeRequestParameter(parameter: RequestParameter, varValues?: Record<string, DataVariableDefinition>): RequestParameter;
@@ -1026,4 +1041,4 @@ declare function useUniformMeshSdk(): _uniformdev_mesh_sdk.UniformMeshSDK;
  */
 declare function createLocationValidator<TSetValue>(setValue: SetLocationValueDispatch<TSetValue>, validate: (newValue: TSetValue, currentResult: SetValueOptions | undefined) => SetValueOptions): SetLocationValueDispatch<TSetValue>;
 
-export { BaseRequestData, Brand, DamItem, DamSelectedItem, DamSelectedItemProps, DataRefreshButton, DataRefreshButtonProps, DataResourceVariableRendererProps, DataResourceVariablesList, DataResourceVariablesListProps, DataSourceEditor, DataSourceEditorProps, DataTypeEditor, DataTypeEditorProps, DataVariableDefinitionWithName, DefaultSearchRow, DefaultSelectedItem, DispatchResult, EntrySearch, EntrySearchContentType, EntrySearchProps, EntrySearchQueryOptions, EntrySearchResult, EntrySearchRowProps, EntrySearchSelectedItemProps, GetProductOptions, GetProductsOptions, index as Icons, InputToken, InputVariables, InputVariablesProps, ItemListProps, LinkButton, MeshApp, MeshAppProps, NoResultsProps, ObjectSearchContainer, ObjectSearchContainerProps, ObjectSearchContextProps, ObjectSearchFilter, ObjectSearchFilterContainer, ObjectSearchFilterContainerProps, ObjectSearchFilterProps, ObjectSearchListItem, ObjectSearchListItemLoadingSkeleton, ObjectSearchListItemProps, ObjectSearchProvider, ObjectSearchProviderProps, ObjectSearchResultItem, ObjectSearchResultItemButton, ObjectSearchResultItemButtonProps, ObjectSearchResultItemProps, ObjectSearchResultList, ObjectSearchResultListProps, ProductCategory, ProductDynamicSelectorValue, ProductPreviewList, ProductQuery, ProductQueryCategory, ProductQueryContext, ProductQueryContextValue, ProductQueryProps, ProductSearch, ProductSearchContext, ProductSearchContextValue, ProductSearchProps, ProductSearchResult, ProductSearchResults, ProductSearchRow, ProductSelectedItem, QueryFilter, QueryFilterProps, QueryFilterSearchProps, RequestAction, RequestBody, RequestContext, RequestData, RequestHeaders, RequestMethodSelect, RequestParameter, RequestParameters, RequestParametersProps, RequestProvider, RequestProviderProps, RequestTypeContainer, RequestTypeContainerProps, RequestUrl, RequestUrlInput, ResolvableLoadingValue, SearchQueryProps, SelectedItemProps, SelectionField, SelectionFieldValue, SetLocationValueDispatch, SetLocationValueFunction, TextVariableRenderer, VariableEditor, VariableEditorProps, VariablesAction, VariablesContext, VariablesList, VariablesProvider, VariablesProviderProps, badgeIcon, createLocationValidator, damSelectItemImage, damSelectedItemContainer, damSelectedItemCopy, damSelectedItemDetails, damSelectedItemIcon, damSelectedItemInfoBtn, damSelectedItemInner, damSelectedItemLinkBtn, damSelectedItemLinkContainer, damSelectedItemMediaContainer, damSelectedItemPopover, damSelectedItemPopoverLabel, damSelectedItemSmallText, damSelectedItemTitle, draggableContainer, draggableIcon, draggableIconOffset, draggableIconWrapper, entrySearchBtn, entrySearchConfig, entrySearchConfigHidden, entrySearchLoadMoreBtn, entrySearchResultList, entrySearchSelectIcon, entrySearchSelectImg, entrySearchSelectInput, entrySearchSelectOption, entrySearchWrapper, productSearchRowActiveIcon, productSearchRowCategory, productSearchRowContainer, productSearchRowContent, productSearchRowContentActive, productSearchRowDetails, productSearchRowTitle, productSelectedItemContainer, productSelectedItemContent, productSelectedItemDetails, productSelectedItemIcon, productSelectedItemImage, productSelectedItemLinkContainer, productedSelectedItemLinkBtn, productedSelectedItemSmallText, searchRowBtn, searchRowContainer, searchRowContainerActive, searchRowContainerWithPopover, searchRowPopover, searchRowText, searchRowTextSmall, selectItemLinkBtn, selectItemLinkContainer, selectItemPopover, selectItemPopoverLabel, selectItemSmallText, selectedItemContainer, selectedItemCopy, selectedItemDetails, selectedItemIcon, selectedItemInner, selectedItemTitle, urlEncodeRequestParameter, urlEncodeRequestUrl, useMeshLocation, useObjectSearchContext, useProductQueryContext, useProductSearchContext, useRequest, useRequestHeader, useRequestParameter, useUniformMeshSdk, useVariables, variablesToList };
+export { BaseRequestData, Brand, DamItem, DamSelectedItem, DamSelectedItemProps, DataRefreshButton, DataRefreshButtonProps, DataResourceVariableRendererProps, DataResourceVariablesList, DataResourceVariablesListProps, DataSourceEditor, DataSourceEditorProps, DataTypeEditor, DataTypeEditorProps, DataVariableDefinitionWithName, DefaultSearchRow, DefaultSelectedItem, DispatchResult, EntrySearch, EntrySearchContentType, EntrySearchProps, EntrySearchQueryOptions, EntrySearchResult, EntrySearchRowProps, EntrySearchSelectedItemProps, GetProductOptions, GetProductsOptions, index as Icons, InputToken, InputVariables, InputVariablesProps, ItemListProps, LinkButton, MeshApp, MeshAppProps, NoResultsProps, ObjectSearchContainer, ObjectSearchContainerProps, ObjectSearchContextProps, ObjectSearchFilter, ObjectSearchFilterContainer, ObjectSearchFilterContainerProps, ObjectSearchFilterProps, ObjectSearchListItem, ObjectSearchListItemLoadingSkeleton, ObjectSearchListItemProps, ObjectSearchProvider, ObjectSearchProviderProps, ObjectSearchResultItem, ObjectSearchResultItemButton, ObjectSearchResultItemButtonProps, ObjectSearchResultItemProps, ObjectSearchResultList, ObjectSearchResultListProps, ProductCategory, ProductDynamicSelectorValue, ProductPreviewList, ProductQuery, ProductQueryCategory, ProductQueryContext, ProductQueryContextValue, ProductQueryProps, ProductSearch, ProductSearchContext, ProductSearchContextValue, ProductSearchProps, ProductSearchResult, ProductSearchResults, ProductSearchRow, ProductSelectedItem, QueryFilter, QueryFilterProps, QueryFilterSearchProps, RequestAction, RequestBody, RequestContext, RequestData, RequestHeaders, RequestMethodSelect, RequestParameter, RequestParameters, RequestParametersProps, RequestProvider, RequestProviderProps, RequestTypeContainer, RequestTypeContainerProps, RequestUrl, RequestUrlInput, ResolvableLoadingValue, SearchQueryProps, SelectedItemProps, SelectionField, SelectionFieldValue, SetLocationValueDispatch, SetLocationValueFunction, TextVariableRenderer, VariableEditor, VariableEditorProps, VariablesAction, VariablesContext, VariablesEvents, VariablesList, VariablesProvider, VariablesProviderProps, badgeIcon, createLocationValidator, damSelectItemImage, damSelectedItemContainer, damSelectedItemCopy, damSelectedItemDetails, damSelectedItemIcon, damSelectedItemInfoBtn, damSelectedItemInner, damSelectedItemLinkBtn, damSelectedItemLinkContainer, damSelectedItemMediaContainer, damSelectedItemPopover, damSelectedItemPopoverLabel, damSelectedItemSmallText, damSelectedItemTitle, draggableContainer, draggableIcon, draggableIconOffset, draggableIconWrapper, entrySearchBtn, entrySearchConfig, entrySearchConfigHidden, entrySearchLoadMoreBtn, entrySearchResultList, entrySearchSelectIcon, entrySearchSelectImg, entrySearchSelectInput, entrySearchSelectOption, entrySearchWrapper, productSearchRowActiveIcon, productSearchRowCategory, productSearchRowContainer, productSearchRowContent, productSearchRowContentActive, productSearchRowDetails, productSearchRowTitle, productSelectedItemContainer, productSelectedItemContent, productSelectedItemDetails, productSelectedItemIcon, productSelectedItemImage, productSelectedItemLinkContainer, productedSelectedItemLinkBtn, productedSelectedItemSmallText, searchRowBtn, searchRowContainer, searchRowContainerActive, searchRowContainerWithPopover, searchRowPopover, searchRowText, searchRowTextSmall, selectItemLinkBtn, selectItemLinkContainer, selectItemPopover, selectItemPopoverLabel, selectItemSmallText, selectedItemContainer, selectedItemCopy, selectedItemDetails, selectedItemIcon, selectedItemInner, selectedItemTitle, urlEncodeRequestParameter, urlEncodeRequestUrl, useMeshLocation, useObjectSearchContext, useProductQueryContext, useProductSearchContext, useRequest, useRequestHeader, useRequestParameter, useUniformMeshSdk, useVariables, variablesToList };

package/dist/index.esm.js

@@ -2727,9 +2727,35 @@ function useMeshLocation(expectedLocation) {
 import { Input as Input3 } from "@uniformdev/design-system";
 import * as React11 from "react";
 
+// src/components/Variables/insertVariableIntoText.ts
+function insertVariableIntoText({
+  variableName: variableName2,
+  variablePrefix,
+  variableSuffix = "",
+  value,
+  selectionStart = null,
+  selectionEnd = null
+}) {
+  const variableExpression = `${variablePrefix}${variableName2}${variableSuffix}`;
+  if (selectionStart !== null && selectionEnd !== null && selectionStart !== selectionEnd) {
+    return `${value.substring(0, selectionStart)}${variableExpression}${value.substring(selectionEnd)}`;
+  }
+  const hasCursorPosition = selectionStart !== null;
+  let startOffset = 0;
+  if (hasCursorPosition && value.substring(selectionStart - variablePrefix.length, selectionStart) === variablePrefix) {
+    startOffset = variablePrefix.length;
+  }
+  if (hasCursorPosition) {
+    return `${value.substring(0, selectionStart - startOffset)}${variableExpression}${value.substring(
+      selectionStart
+    )}`;
+  }
+  return `${value}${variableExpression}`;
+}
+
 // src/components/Variables/InsertVariableMenu.tsx
 import { Icon as Icon5, Menu as Menu2, MenuItem as MenuItem2, MenuItemSeparator } from "@uniformdev/design-system";
-import { useEffect as useEffect5, useRef as useRef8 } from "react";
+import { useEffect as useEffect6, useRef as useRef8, useState as useState8 } from "react";
 
 // src/components/Variables/styles/InsertVariableMenu.styles.ts
 import { css as css18 } from "@emotion/react";
@@ -2759,7 +2785,11 @@ var variablesTipText = css18`
   padding: 0 var(--spacing-sm);
 `;
 
+// src/components/Variables/useOnVariableUpdated.ts
+import { useEffect as useEffect5 } from "react";
+
 // src/components/Variables/VariablesProvider.tsx
+import mitt from "mitt";
 import * as React10 from "react";
 
 // src/components/Variables/VariableEditor.tsx
@@ -2844,6 +2874,7 @@ function VariablesProvider({
   children
 }) {
   const [editing, setEditing] = React10.useState();
+  const events = React10.useMemo(() => mitt(), []);
   const Editor = editVariableComponent != null ? editVariableComponent : VariableEditor;
   const contextValue = {
     dispatch: (event) => {
@@ -2865,7 +2896,9 @@ function VariablesProvider({
         throw new Error(`Unknown event ${JSON.stringify(event)}`);
       }
     },
-    variables: value
+    variables: value,
+    isEditing: typeof editing !== "undefined",
+    events
   };
   return /* @__PURE__ */ jsxs17(VariablesContext.Provider, { value: contextValue, children: [
     children,
@@ -2876,6 +2909,7 @@ function VariablesProvider({
           setEditing(void 0);
           const { name, ...varValue } = val;
           onChange({ ...value, [name]: varValue });
+          events.emit("update", name);
         },
         onCancel: () => setEditing(void 0),
         variable: editing
@@ -2891,51 +2925,106 @@ function useVariables() {
   return context;
 }
 
+// src/components/Variables/useOnVariableUpdated.ts
+function useOnVariableUpdated(fn, disabled) {
+  const { variables, events } = useVariables();
+  useEffect5(() => {
+    if (disabled) {
+      return;
+    }
+    events.on("update", fn);
+    return () => events.off("update", fn);
+  }, [disabled, events, fn, variables]);
+}
+
+// src/components/Variables/variablesToList.ts
+function variablesToList(variables) {
+  return Object.entries(variables || {}).sort(([aKey, a], [bKey, b]) => {
+    var _a, _b;
+    if (a.order && b.order) {
+      return a.order - b.order;
+    } else if (a.order) {
+      return 1;
+    } else if (b.order) {
+      return -1;
+    }
+    return ((_a = a.displayName) != null ? _a : aKey).localeCompare((_b = b.displayName) != null ? _b : bKey);
+  }).map(([name, definition]) => ({
+    name,
+    ...definition
+  }));
+}
+
 // src/components/Variables/InsertVariableMenu.tsx
 import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
 var InsertVariableMenu = ({
-  onVariableClick,
+  onSelectVariable,
   children,
   textValue,
   trigger = "${",
-  showAddVariableMenuOption = false
+  showAddVariableMenuOption = false,
+  disabled = false,
+  forceVisible
 }) => {
-  const { variables, dispatch } = useVariables();
+  const { variables, dispatch, isEditing } = useVariables();
   const btnRef = useRef8(null);
-  const tip = "Tip: access this list by typing ${";
-  useEffect5(() => {
+  const tip = `Tip: access this list by typing ${trigger}`;
+  useEffect6(() => {
     if (textValue === trigger && btnRef.current && btnRef.current.getAttribute("aria-expanded") === "false") {
       btnRef.current.click();
     }
   }, [textValue, btnRef, trigger]);
+  const [openedAdd, setOpenedAdd] = useState8(false);
+  useOnVariableUpdated((varName) => {
+    onSelectVariable == null ? void 0 : onSelectVariable({ name: varName, default: "" });
+  }, !openedAdd);
+  useEffect6(() => {
+    if (openedAdd && !isEditing) {
+      setOpenedAdd(false);
+    }
+  }, [isEditing, openedAdd]);
+  if (disabled) {
+    return /* @__PURE__ */ jsx30(Fragment4, { children });
+  }
+  const variablesList = variablesToList(variables);
   return /* @__PURE__ */ jsxs18("div", { css: menuContainer, children: [
     children,
     /* @__PURE__ */ jsxs18(
       Menu2,
       {
         placement: "bottom-start",
+        forceVisible,
         menuTrigger: /* @__PURE__ */ jsx30("button", { ref: btnRef, css: menuBtn, type: "button", title: "Insert variable", children: /* @__PURE__ */ jsx30(Icon5, { icon: "usb-c", iconColor: "currentColor" }) }),
         menuLabel: "Insert variable",
         children: [
-          Object.entries(variables).map(([key, value]) => {
-            const { helpText } = value;
+          variablesList.map((variable) => {
+            const { name, helpText } = variable;
             return /* @__PURE__ */ jsxs18(
               MenuItem2,
               {
-                id: key,
+                id: name,
                 css: menuItemTextGroup,
-                onClick: () => onVariableClick(decodeURI(`\${${key}}`)),
+                onClick: () => onSelectVariable == null ? void 0 : onSelectVariable(variable),
                 children: [
-                  /* @__PURE__ */ jsx30("span", { children: key }),
+                  /* @__PURE__ */ jsx30("span", { children: name }),
                   helpText ? /* @__PURE__ */ jsx30("small", { css: smallText, children: helpText }) : null
                 ]
               },
-              key
+              name
             );
           }),
           showAddVariableMenuOption ? /* @__PURE__ */ jsxs18(Fragment4, { children: [
-            /* @__PURE__ */ jsx30(MenuItemSeparator, {}),
-            /* @__PURE__ */ jsx30(MenuItem2, { onClick: () => dispatch({ type: "edit", variable: "" }), children: "Add Variable" })
+            variablesList.length ? /* @__PURE__ */ jsx30(MenuItemSeparator, {}) : null,
+            /* @__PURE__ */ jsx30(
+              MenuItem2,
+              {
+                onClick: () => {
+                  setOpenedAdd(true);
+                  dispatch({ type: "edit", variable: "" });
+                },
+                children: "Add Variable"
+              }
+            )
           ] }) : null,
           Object.entries(variables).length || showAddVariableMenuOption ? /* @__PURE__ */ jsx30(MenuItemSeparator, {}) : null,
           /* @__PURE__ */ jsx30("i", { css: variablesTipText, children: tip })
@@ -2950,13 +3039,15 @@ import { jsx as jsx31 } from "@emotion/react/jsx-runtime";
 function InputVariables({
   "aria-label": ariaLabel,
   value,
-  // disableVariables,
+  disableVariables,
   onChange,
   onPaste,
-  onVariableClick,
   showAddVariableMenuOption,
+  variablePrefix = "${",
+  variableSuffix = "}",
   ...inputProps
 }) {
+  var _a, _b;
   const { variables, dispatch } = useVariables();
   const currentVariables = React11.useRef(variables);
   const currentDispatch = React11.useRef(dispatch);
@@ -2971,21 +3062,40 @@ function InputVariables({
   React11.useEffect(() => {
     currentSetValue.current = onChange;
   }, [onChange]);
-  React11.useEffect(() => {
-    var _a, _b;
-    if (((_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.value) && onPaste) {
-      onPaste((_b = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _b.value);
-    }
-  });
+  const onPasteHandler = () => {
+    setTimeout(() => {
+      if (!inputRef.current) {
+        return;
+      }
+      onPaste == null ? void 0 : onPaste(inputRef.current.value);
+    });
+  };
+  const handleInsertVariable = (variable) => {
+    var _a2, _b2;
+    handleSetValue(
+      insertVariableIntoText({
+        variableName: variable.name,
+        value,
+        variablePrefix,
+        variableSuffix,
+        selectionEnd: (_a2 = inputRef.current) == null ? void 0 : _a2.selectionEnd,
+        selectionStart: (_b2 = inputRef.current) == null ? void 0 : _b2.selectionStart
+      })
+    );
+  };
   const handleSetValue = (rawValue) => {
     currentSetValue.current(rawValue);
   };
+  const currentCursor = (_b = (_a = inputRef.current) == null ? void 0 : _a.selectionStart) != null ? _b : value.length;
+  const forceMenu = value.substring(currentCursor - 2, currentCursor) === "${";
   return /* @__PURE__ */ jsx31(
     InsertVariableMenu,
     {
       showAddVariableMenuOption,
       textValue: value,
-      onVariableClick,
+      onSelectVariable: handleInsertVariable,
+      disabled: disableVariables,
+      forceVisible: forceMenu || void 0,
       children: /* @__PURE__ */ jsx31(
         Input3,
         {
@@ -2994,6 +3104,7 @@ function InputVariables({
           showLabel: false,
           value,
           onChange: (e) => handleSetValue(e.currentTarget.value),
+          onPaste: onPasteHandler,
           ...inputProps
         }
       )
@@ -3062,24 +3173,6 @@ var variableValue = css20`
   max-width: 20ch;
 `;
 
-// src/components/Variables/variablesToList.ts
-function variablesToList(variables) {
-  return Object.entries(variables || {}).sort(([aKey, a], [bKey, b]) => {
-    var _a, _b;
-    if (a.order && b.order) {
-      return a.order - b.order;
-    } else if (a.order) {
-      return 1;
-    } else if (b.order) {
-      return -1;
-    }
-    return ((_a = a.displayName) != null ? _a : aKey).localeCompare((_b = b.displayName) != null ? _b : bKey);
-  }).map(([name, definition]) => ({
-    name,
-    ...definition
-  }));
-}
-
 // src/components/Variables/VariablesList.tsx
 import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 function VariablesList() {
@@ -3246,7 +3339,7 @@ function TextVariableRenderer({ definition, value, setValue }) {
 // src/components/Request/RequestBody.tsx
 import { css as css23 } from "@emotion/react";
 import { InputSelect as InputSelect4, JsonEditor } from "@uniformdev/design-system";
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 
 // src/components/Request/RequestProvider.tsx
 import * as React12 from "react";
@@ -3372,7 +3465,7 @@ var LANGUAGE_TO_CONTENT_TYPE = {
 };
 function RequestBody() {
   const { request, dispatch } = useRequest();
-  const [language, setLanguage] = useState8("json");
+  const [language, setLanguage] = useState9("json");
   return /* @__PURE__ */ jsxs21(
     "div",
     {
@@ -3500,7 +3593,8 @@ function RequestHeaders({ disableVariables }) {
             {
               value: header.value,
               onChange: (value) => handleUpdateParamFromMenu({ key: header.key, value, index }),
-              onVariableClick: (value) => handleUpdateParamFromMenu({ key: header.key, value, index }),
+              disableVariables,
+              showAddVariableMenuOption: true,
               "data-test-id": "header-value"
             }
           ) : null })
@@ -3608,12 +3702,9 @@ function RequestParameters({ disableVariables }) {
                 value: selectedVariable,
                 index
               }),
-              onVariableClick: (selectedVariable) => handleUpdateParamFromMenu({
-                key: parameter.key,
-                value: selectedVariable,
-                index
-              }),
-              "data-test-id": "parameter-value"
+              disableVariables,
+              "data-test-id": "parameter-value",
+              showAddVariableMenuOption: true
             }
           ) : null })
         ] }, index);
@@ -3624,7 +3715,7 @@ function RequestParameters({ disableVariables }) {
 
 // src/components/Request/RequestUrl.tsx
 import { css as css24 } from "@emotion/react";
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo7 } from "react";
 
 // src/components/Request/urlEncodeRequestParameter.ts
 function urlEncodeRequestUrl(url, varValues) {
@@ -3650,7 +3741,7 @@ function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
   const { request } = useRequest();
-  const mergedParameters = useMemo6(() => {
+  const mergedParameters = useMemo7(() => {
     var _a2;
     if (!((_a2 = request.baseRequest) == null ? void 0 : _a2.parameters)) {
       return request.parameters;
@@ -3720,9 +3811,6 @@ function RequestUrlInput(props) {
       onChange: (value) => {
         dispatch({ type: "setRelativeUrl", relativeUrl: value });
       },
-      onVariableClick: (selectedValue) => {
-        dispatch({ type: "setRelativeUrl", relativeUrl: request.relativeUrl.concat(selectedValue) });
-      },
       showAddVariableMenuOption: true
     }
   );
@@ -3875,12 +3963,12 @@ import { LoadingIndicator as LoadingIndicator2, Theme as Theme2 } from "@uniform
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 import { initializeUniformMeshSDK } from "@uniformdev/mesh-sdk";
-import { useEffect as useEffect7, useRef as useRef10, useState as useState9 } from "react";
+import { useEffect as useEffect8, useRef as useRef10, useState as useState10 } from "react";
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
-  const [error, setError] = useState9();
-  const [sdk, setSdk] = useState9();
+  const [error, setError] = useState10();
+  const [sdk, setSdk] = useState10();
   const initializationInProgress = useRef10(false);
-  useEffect7(
+  useEffect8(
     () => {
       if (typeof window === "undefined" || sdk) {
         return;
@@ -3979,10 +4067,10 @@ var ObjectSearchContainer = ({
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
 import { InputKeywordSearch as InputKeywordSearch2, InputSelect as InputSelect6 } from "@uniformdev/design-system";
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
-import { createContext as createContext5, useCallback, useContext as useContext7, useDeferredValue, useState as useState10 } from "react";
+import { createContext as createContext5, useCallback, useContext as useContext7, useDeferredValue, useState as useState11 } from "react";
 import { jsx as jsx47 } from "@emotion/react/jsx-runtime";
 var ObjectSearchContext = createContext5({
   onSetQuery: () => {
@@ -4001,13 +4089,13 @@ var ObjectSearchContext = createContext5({
   }
 });
 var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
-  const [query, setQuery] = useState10({
+  const [query, setQuery] = useState11({
     contentType: "",
     keyword: ""
   });
   const querySearchDeferred = useDeferredValue(query);
-  const [selectedItems, setSelectedItems] = useState10(currentlySelectedItems != null ? currentlySelectedItems : []);
-  const [list, setList] = useState10({});
+  const [selectedItems, setSelectedItems] = useState11(currentlySelectedItems != null ? currentlySelectedItems : []);
+  const [list, setList] = useState11({});
   const onSetQuery = useCallback(
     (value) => {
       if (Array.isArray(value.contentType) && value.contentType.length > 0) {
@@ -4098,7 +4186,7 @@ var ObjectSearchFilter = ({
   selectOptions
 }) => {
   const { query, onSetQuery } = useObjectSearchContext();
-  const [searchState, setSearchState] = useState11({
+  const [searchState, setSearchState] = useState12({
     contentType: "",
     keyword: ""
   });
@@ -4536,7 +4624,7 @@ var ObjectSearchResultList = ({
 
 // src/components/ObjectSearch/QueryFilter.tsx
 import { Input as Input7, InputKeywordSearch as InputKeywordSearch3, InputSelect as InputSelect7 } from "@uniformdev/design-system";
-import { useEffect as useEffect8, useState as useState12 } from "react";
+import { useEffect as useEffect9, useState as useState13 } from "react";
 import { jsx as jsx54, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
 var QueryFilter = ({
   requireContentType,
@@ -4567,7 +4655,7 @@ var QueryFilter = ({
 }) => {
   var _a, _b;
   const { query, onSetQuery } = useObjectSearchContext();
-  const [queryState, setQueryState] = useState12({
+  const [queryState, setQueryState] = useState13({
     contentType: "",
     keyword: "",
     count: countValue != null ? countValue : 5,
@@ -4578,7 +4666,7 @@ var QueryFilter = ({
     setQueryState((prev) => ({ ...prev, ...value }));
     onSetQuery({ ...query, ...value });
   };
-  useEffect8(() => {
+  useEffect9(() => {
     onSetQuery(queryState);
   }, [onSetQuery, queryState]);
   return /* @__PURE__ */ jsxs34("fieldset", { children: [