@uniformdev/mesh-sdk-react 18.13.1-alpha.1 → 18.15.0

package/dist/index.mjs

@@ -2635,7 +2635,7 @@ function DefaultDamItemRenderer({ item }) {
 }
 
 // src/components/DataResourceVariablesList.tsx
-import { Callout as Callout3, Input as Input3 } from "@uniformdev/design-system";
+import { Callout as Callout3, Input as Input4 } from "@uniformdev/design-system";
 
 // src/hooks/useMeshLocation.ts
 import { useMemo as useMemo4, useRef as useRef7 } from "react";
@@ -2737,22 +2737,55 @@ function useMeshLocation(expectedLocation) {
 }
 
 // src/components/Variables/InputVariables.tsx
-import { Global } from "@emotion/react";
-import Tags from "@yaireo/tagify/dist/react.tagify";
+import { Input as Input3 } from "@uniformdev/design-system";
 import * as React11 from "react";
 
-// src/components/Variables/InputVariables.styles.ts
+// 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";
+
+// src/components/Variables/styles/InsertVariableMenu.styles.ts
 import { css as css18 } from "@emotion/react";
-var variablesFormContainer = css18`
+var menuContainer = css18`
+  position: relative;
+`;
+var menuBtn = css18`
+  background: none;
+  border: none;
+  color: var(--gray-300);
+  padding: 0;
+  position: absolute;
+  bottom: 25%;
+  right: var(--spacing-sm);
+`;
+var menuItemTextGroup = css18`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+`;
+var smallText = css18`
+  font-size: var(--fs-xs);
+`;
+
+// src/components/Variables/VariablesProvider.tsx
+import * as React10 from "react";
+
+// src/components/Variables/VariableEditor.tsx
+import { Button as Button2, Input as Input2 } from "@uniformdev/design-system";
+import { Form, Formik } from "formik";
+
+// src/components/Variables/InputVariables.styles.ts
+import { css as css19 } from "@emotion/react";
+var variablesFormContainer = css19`
   > * {
     margin: var(--spacing-base) 0 0;
   }
 `;
-var variablesFormBtnGroup = css18`
+var variablesFormBtnGroup = css19`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var tagifyStyles = css18`
+var tagifyStyles = css19`
   :root {
     --tagify-dd-color-primary: rgb(53, 149, 246);
     --tagify-dd-bg-color: var(--white);
@@ -3251,12 +3284,7 @@ var tagifyStyles = css18`
   }
 `;
 
-// src/components/Variables/VariablesProvider.tsx
-import * as React10 from "react";
-
 // src/components/Variables/VariableEditor.tsx
-import { Button as Button2, Input as Input2 } from "@uniformdev/design-system";
-import { Form, Formik } from "formik";
 import { jsx as jsx28, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
 function VariableEditor({ variable, onSubmit, onCancel }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
@@ -3369,23 +3397,74 @@ function useVariables() {
   return context;
 }
 
-// src/components/Variables/InputVariables.tsx
+// src/components/Variables/InsertVariableMenu.tsx
 import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
-function cleanTagifyValue(rawValue) {
-  return rawValue.replace(/\${{.*?"value":"([^"]+)".*?}}/g, "${$1}").replace(/[\r\n]+/g, "");
-}
+var InsertVariableMenu = ({
+  onVariableClick,
+  children,
+  textValue,
+  trigger = "${",
+  showAddVariableMenuOption = false
+}) => {
+  const { variables, dispatch } = useVariables();
+  const btnRef = useRef8(null);
+  const hasVariables = Object.entries(variables).length;
+  useEffect5(() => {
+    if (textValue === trigger && btnRef.current && btnRef.current.getAttribute("aria-expanded") === "false") {
+      btnRef.current.click();
+    }
+  }, [textValue, btnRef, trigger]);
+  return /* @__PURE__ */ jsxs18("div", { css: menuContainer, children: [
+    children,
+    hasVariables ? /* @__PURE__ */ jsxs18(
+      Menu2,
+      {
+        placement: "bottom-start",
+        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;
+            return /* @__PURE__ */ jsxs18(
+              MenuItem2,
+              {
+                id: key,
+                css: menuItemTextGroup,
+                onClick: () => onVariableClick(decodeURI(`\${${key}}`)),
+                children: [
+                  /* @__PURE__ */ jsx30("span", { children: key }),
+                  helpText ? /* @__PURE__ */ jsx30("small", { css: smallText, children: helpText }) : null
+                ]
+              },
+              key
+            );
+          }),
+          showAddVariableMenuOption ? /* @__PURE__ */ jsxs18(Fragment4, { children: [
+            /* @__PURE__ */ jsx30(MenuItemSeparator, {}),
+            /* @__PURE__ */ jsx30(MenuItem2, { onClick: () => dispatch({ type: "edit", variable: "" }), children: "Add Variable" })
+          ] }) : null
+        ]
+      }
+    ) : null
+  ] });
+};
+
+// src/components/Variables/InputVariables.tsx
+import { jsx as jsx31 } from "@emotion/react/jsx-runtime";
 function InputVariables({
   "aria-label": ariaLabel,
   value,
-  disableVariables,
   onChange,
-  onPaste
+  onPaste,
+  onVariableClick,
+  showAddVariableMenuOption,
+  ...inputProps
 }) {
   const { variables, dispatch } = useVariables();
   const currentVariables = React11.useRef(variables);
   const currentDispatch = React11.useRef(dispatch);
   const currentSetValue = React11.useRef(onChange);
-  const tagifyRef = React11.useRef();
+  const inputRef = React11.useRef(null);
   React11.useEffect(() => {
     currentVariables.current = variables;
   }, [variables]);
@@ -3396,89 +3475,41 @@ function InputVariables({
     currentSetValue.current = onChange;
   }, [onChange]);
   React11.useEffect(() => {
-    var _a;
-    if (((_a = tagifyRef == null ? void 0 : tagifyRef.current) == null ? void 0 : _a.DOM) && onPaste) {
-      tagifyRef.current.DOM.input.onpaste = () => {
-        var _a2, _b;
-        return onPaste(cleanTagifyValue((_b = (_a2 = tagifyRef.current) == null ? void 0 : _a2.getInputValue()) != null ? _b : ""));
-      };
+    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);
     }
   });
-  React11.useEffect(() => {
-    var _a, _b, _c;
-    const currentTagifyValue = cleanTagifyValue((_b = (_a = tagifyRef.current) == null ? void 0 : _a.getInputValue()) != null ? _b : "");
-    if (value !== currentTagifyValue) {
-      (_c = tagifyRef.current) == null ? void 0 : _c.loadOriginalValues(value);
-    }
-  }, [value]);
-  const handleSetValue = React11.useCallback((rawValue) => {
-    currentSetValue.current(cleanTagifyValue(rawValue));
-  }, []);
-  const handleAddTag = React11.useCallback((newTagName) => {
-    if (!currentVariables.current[newTagName]) {
-      currentDispatch.current({
-        type: "set",
-        variable: { name: newTagName, default: "" },
-        openEditor: true
-      });
-    }
-  }, []);
-  return /* @__PURE__ */ jsxs18(Fragment4, { children: [
-    /* @__PURE__ */ jsx30(Global, { styles: tagifyStyles }),
-    /* @__PURE__ */ jsx30(
-      Tags,
-      {
-        tagifyRef,
-        "aria-label": ariaLabel,
-        defaultValue: value,
-        autoFocus: false,
-        whitelist: Object.entries(variables).map(([k, v]) => {
-          var _a;
-          return { name: (_a = v.displayName) != null ? _a : k, value: k };
-        }),
-        settings: {
-          pattern: disableVariables ? null : /\$/,
-          enforceWhitelist: disableVariables,
-          mixTagsInterpolator: ["${", "}"],
-          duplicates: true,
-          tagTextProp: "name",
-          dropdown: {
-            position: "text",
-            enabled: 0,
-            mapValueTo: (v) => v.name,
-            includeSelectedTags: true,
-            searchKeys: ["name", "value"],
-            highlightFirst: true
-          }
-        },
-        InputMode: "textarea",
-        onAdd: (e) => {
-          var _a;
-          const newTagName = (_a = e.detail.data) == null ? void 0 : _a.value;
-          if (newTagName) {
-            handleAddTag(newTagName);
-          }
-        },
-        onRemove: (e) => {
-          handleSetValue(e.detail.tagify.getInputValue());
-        },
-        onChange: (e) => {
-          handleSetValue(e.detail.value);
-        },
-        onInput: (e) => {
-          handleSetValue(e.detail.tagify.getInputValue());
+  const handleSetValue = (rawValue) => {
+    currentSetValue.current(rawValue);
+  };
+  return /* @__PURE__ */ jsx31(
+    InsertVariableMenu,
+    {
+      showAddVariableMenuOption,
+      textValue: value,
+      onVariableClick,
+      children: /* @__PURE__ */ jsx31(
+        Input3,
+        {
+          ref: inputRef,
+          label: ariaLabel,
+          showLabel: false,
+          value,
+          onChange: (e) => handleSetValue(e.currentTarget.value),
+          ...inputProps
         }
-      }
-    )
-  ] });
+      )
+    }
+  );
 }
 
 // src/components/Variables/VariablesList.tsx
-import { css as css20 } from "@emotion/react";
+import { css as css21 } from "@emotion/react";
 import {
   AddListButton,
   button,
-  Icon as Icon5,
+  Icon as Icon6,
   Table,
   TableBody,
   TableCellData,
@@ -3489,8 +3520,8 @@ import {
 import { DragDropContext as DragDropContext2, Draggable as Draggable2, Droppable as Droppable2 } from "react-beautiful-dnd";
 
 // src/components/Variables/styles/VariablesList.styles.ts
-import { css as css19 } from "@emotion/react";
-var tableRow = (isDragging) => css19`
+import { css as css20 } from "@emotion/react";
+var tableRow = (isDragging) => css20`
   position: relative;
   ${isDragging ? `
   display: table;   
@@ -3498,7 +3529,7 @@ var tableRow = (isDragging) => css19`
   top: auto !important;
   ` : void 0}
 `;
-var tableCellDragIcon = css19`
+var tableCellDragIcon = css20`
   &::after {
     content: '';
     display: block;
@@ -3516,7 +3547,7 @@ var tableCellDragIcon = css19`
     opacity: 1;
   }
 `;
-var variableName = css19`
+var variableName = css20`
   border: none;
   color: var(--brand-secondary-5);
   font-weight: var(--fw-medium);
@@ -3527,7 +3558,7 @@ var variableName = css19`
   white-space: nowrap;
   max-width: 20ch;
 `;
-var variableValue = css19`
+var variableValue = css20`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -3553,7 +3584,7 @@ function variablesToList(variables) {
 }
 
 // src/components/Variables/VariablesList.tsx
-import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 function VariablesList() {
   const { variables, dispatch } = useVariables();
   const sorted = variablesToList(variables);
@@ -3575,16 +3606,16 @@ function VariablesList() {
     }
   };
   return /* @__PURE__ */ jsxs19(Fragment5, { children: [
-    /* @__PURE__ */ jsx31(DragDropContext2, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx31(Droppable2, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ jsxs19(Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
-      /* @__PURE__ */ jsx31(TableHead, { children: /* @__PURE__ */ jsxs19(TableRow, { children: [
-        /* @__PURE__ */ jsx31(TableCellHead, { children: "Name" }),
-        /* @__PURE__ */ jsx31(TableCellHead, { children: "Default Value" }),
-        /* @__PURE__ */ jsx31(TableCellHead, {})
+    /* @__PURE__ */ jsx32(DragDropContext2, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx32(Droppable2, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ jsxs19(Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
+      /* @__PURE__ */ jsx32(TableHead, { children: /* @__PURE__ */ jsxs19(TableRow, { children: [
+        /* @__PURE__ */ jsx32(TableCellHead, { children: "Name" }),
+        /* @__PURE__ */ jsx32(TableCellHead, { children: "Default Value" }),
+        /* @__PURE__ */ jsx32(TableCellHead, {})
       ] }) }),
       /* @__PURE__ */ jsxs19(TableBody, { children: [
         sorted.map(({ name, displayName, default: defaultValue }, index) => {
           const text = displayName != null ? displayName : name;
-          return /* @__PURE__ */ jsx31(
+          return /* @__PURE__ */ jsx32(
             Draggable2,
             {
               draggableId: name,
@@ -3600,7 +3631,7 @@ function VariablesList() {
                   css: tableRow(snapshot.isDragging),
                   "data-dragging": snapshot.isDragging,
                   children: [
-                    /* @__PURE__ */ jsx31(TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ jsx31(
+                    /* @__PURE__ */ jsx32(TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ jsx32(
                       "button",
                       {
                         css: variableName,
@@ -3613,21 +3644,21 @@ function VariablesList() {
                         children: text
                       }
                     ) }),
-                    /* @__PURE__ */ jsx31(TableCellData, { children: /* @__PURE__ */ jsx31("span", { css: variableValue, title: defaultValue, children: defaultValue }) }),
-                    /* @__PURE__ */ jsx31(TableCellData, { align: "right", children: /* @__PURE__ */ jsx31(
+                    /* @__PURE__ */ jsx32(TableCellData, { children: /* @__PURE__ */ jsx32("span", { css: variableValue, title: defaultValue, children: defaultValue }) }),
+                    /* @__PURE__ */ jsx32(TableCellData, { align: "right", children: /* @__PURE__ */ jsx32(
                       "button",
                       {
                         type: "button",
                         title: `delete ${text}`,
                         css: [
                           button,
-                          css20`
+                          css21`
                                   background: transparent;
                                 `
                         ],
                         "aria-controls": text,
                         onClick: () => dispatch({ type: "remove", variable: name }),
-                        children: /* @__PURE__ */ jsx31(Icon5, { icon: "trash", iconColor: "red" })
+                        children: /* @__PURE__ */ jsx32(Icon6, { icon: "trash", iconColor: "red" })
                       }
                     ) })
                   ]
@@ -3640,7 +3671,7 @@ function VariablesList() {
         provided.placeholder
       ] })
     ] }) }) }),
-    /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx32(
       AddListButton,
       {
         onButtonClick: () => dispatch({ type: "edit", variable: "" }),
@@ -3654,7 +3685,7 @@ function VariablesList() {
 }
 
 // src/components/DataResourceVariablesList.tsx
-import { jsx as jsx32, jsxs as jsxs20 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs20 } from "@emotion/react/jsx-runtime";
 function DataResourceVariablesList({
   setVariables,
   noVariables: NoVariablesComponent,
@@ -3667,14 +3698,14 @@ function DataResourceVariablesList({
   const variableDefinitions = variablesToList(dataType.variables);
   if (variableDefinitions.length === 0) {
     if (NoVariablesComponent) {
-      return /* @__PURE__ */ jsx32(NoVariablesComponent, {});
+      return /* @__PURE__ */ jsx33(NoVariablesComponent, {});
     }
-    return /* @__PURE__ */ jsx32(Callout3, { type: "note", children: "No settings are required." });
+    return /* @__PURE__ */ jsx33(Callout3, { type: "note", children: "No settings are required." });
   }
-  return /* @__PURE__ */ jsx32("div", { children: variableDefinitions.map((variableDefinition) => {
+  return /* @__PURE__ */ jsx33("div", { children: variableDefinitions.map((variableDefinition) => {
     var _a, _b, _c;
     const VariableRenderer = variableDefinition.type ? (_a = typeRenderers == null ? void 0 : typeRenderers[variableDefinition.type]) != null ? _a : TextVariableRenderer : TextVariableRenderer;
-    return /* @__PURE__ */ jsx32("div", { children: /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx33("div", { children: /* @__PURE__ */ jsx33(
       VariableRenderer,
       {
         definition: variableDefinition,
@@ -3697,8 +3728,8 @@ function DataResourceVariablesList({
 }
 function TextVariableRenderer({ definition, value, setValue }) {
   return /* @__PURE__ */ jsxs20("div", { children: [
-    /* @__PURE__ */ jsx32(
-      Input3,
+    /* @__PURE__ */ jsx33(
+      Input4,
       {
         label: definition.displayName || definition.name,
         value,
@@ -3716,14 +3747,14 @@ function TextVariableRenderer({ definition, value, setValue }) {
 }
 
 // src/components/Request/RequestBody.tsx
-import { css as css22 } from "@emotion/react";
+import { css as css23 } from "@emotion/react";
 import Editor from "@monaco-editor/react";
 import { InputSelect as InputSelect4 } from "@uniformdev/design-system";
 import { useState as useState8 } from "react";
 
 // src/components/Request/RequestProvider.tsx
 import * as React12 from "react";
-import { jsx as jsx33 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx34 } from "@emotion/react/jsx-runtime";
 var RequestContext = React12.createContext(null);
 function RequestProvider({ value, onChange, children }) {
   const contextValue = React12.useMemo(() => {
@@ -3792,7 +3823,7 @@ function RequestProvider({ value, onChange, children }) {
       request: value
     };
   }, [onChange, value]);
-  return /* @__PURE__ */ jsx33(RequestContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx34(RequestContext.Provider, { value: contextValue, children });
 }
 function useRequest() {
   const context = React12.useContext(RequestContext);
@@ -3803,11 +3834,11 @@ function useRequest() {
 }
 
 // src/components/Request/styles/Request.styles.ts
-import { css as css21 } from "@emotion/react";
-var innerContentStyles = css21`
+import { css as css22 } from "@emotion/react";
+var innerContentStyles = css22`
   background: var(--white);
 `;
-var requestTypeContainer = (bgColor) => css21`
+var requestTypeContainer = (bgColor) => css22`
   align-items: start;
   background: ${bgColor};
   display: grid;
@@ -3816,17 +3847,17 @@ var requestTypeContainer = (bgColor) => css21`
 `;
 
 // src/components/Request/RequestTypeContainer.tsx
-import { jsx as jsx34 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx35 } from "@emotion/react/jsx-runtime";
 var RequestTypeContainer = ({
   bgColor = "transparent",
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx34("div", { css: requestTypeContainer(bgColor), ...props, children });
+  return /* @__PURE__ */ jsx35("div", { css: requestTypeContainer(bgColor), ...props, children });
 };
 
 // src/components/Request/RequestBody.tsx
-import { jsx as jsx35, jsxs as jsxs21 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs21 } from "@emotion/react/jsx-runtime";
 var LANGUAGE_OPTIONS = [
   { label: "Text", value: "plaintext" },
   { label: "JSON", value: "json" },
@@ -3849,18 +3880,18 @@ function RequestBody() {
   return /* @__PURE__ */ jsxs21(
     "div",
     {
-      css: css22`
+      css: css23`
         background: var(--white);
       `,
       children: [
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           RequestTypeContainer,
           {
             bgColor: "var(--gray-100)",
-            css: css22`
+            css: css23`
           padding: var(--spacing-sm) var(--spacing-base);
         `,
-            children: /* @__PURE__ */ jsx35(
+            children: /* @__PURE__ */ jsx36(
               InputSelect4,
               {
                 label: "Language",
@@ -3883,7 +3914,7 @@ function RequestBody() {
             )
           }
         ),
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           Editor,
           {
             height: 200,
@@ -3908,7 +3939,7 @@ function RequestBody() {
 
 // src/components/Request/RequestHeaders.tsx
 import {
-  Input as Input4,
+  Input as Input5,
   Table as Table2,
   TableBody as TableBody2,
   TableCellData as TableCellData2,
@@ -3917,77 +3948,85 @@ import {
   TableRow as TableRow2,
   WarningMessage
 } from "@uniformdev/design-system";
-import { jsx as jsx36, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
 function RequestHeaders({ disableVariables }) {
   var _a, _b;
   const { dispatch, request } = useRequest();
   const deezHeaders = [...request.headers, { key: "", value: "" }];
-  return /* @__PURE__ */ jsx36("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs22(Table2, { children: [
-    /* @__PURE__ */ jsx36(TableHead2, { children: /* @__PURE__ */ jsxs22(TableRow2, { children: [
-      /* @__PURE__ */ jsx36(TableCellHead2, { children: "Name" }),
-      /* @__PURE__ */ jsx36(TableCellHead2, { children: "Value" })
+  const handleUpdateParamFromMenu = ({
+    key,
+    value,
+    index
+  }) => {
+    dispatch({
+      type: "updateHeader",
+      header: { key, value },
+      index
+    });
+  };
+  return /* @__PURE__ */ jsx37("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs22(Table2, { children: [
+    /* @__PURE__ */ jsx37(TableHead2, { children: /* @__PURE__ */ jsxs22(TableRow2, { children: [
+      /* @__PURE__ */ jsx37(TableCellHead2, { children: "Name" }),
+      /* @__PURE__ */ jsx37(TableCellHead2, { children: "Value" })
     ] }) }),
     /* @__PURE__ */ jsxs22(TableBody2, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.headers) == null ? void 0 : _b.map((baseHeader) => {
         return /* @__PURE__ */ jsxs22(TableRow2, { children: [
           /* @__PURE__ */ jsxs22(TableCellData2, { width: "50%", children: [
             baseHeader.key,
-            /* @__PURE__ */ jsx36("br", {}),
-            /* @__PURE__ */ jsx36("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ jsx36("small", { children: "from data source" }) })
+            /* @__PURE__ */ jsx37("br", {}),
+            /* @__PURE__ */ jsx37("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ jsx37("small", { children: "from data source" }) })
           ] }),
           /* @__PURE__ */ jsxs22(TableCellData2, { width: "50%", children: [
-            /* @__PURE__ */ jsx36("i", { css: { color: "var(--gray-500)" }, children: baseHeader.value }),
-            request.headers.find((p) => p.key === baseHeader.key) ? /* @__PURE__ */ jsx36(WarningMessage, { message: "overridden below" }) : null
+            /* @__PURE__ */ jsx37("i", { css: { color: "var(--gray-500)" }, children: baseHeader.value }),
+            request.headers.find((p) => p.key === baseHeader.key) ? /* @__PURE__ */ jsx37(WarningMessage, { message: "overridden below" }) : null
           ] })
         ] }, baseHeader.key);
       }),
-      deezHeaders.map((header, index) => /* @__PURE__ */ jsxs22(TableRow2, { children: [
-        /* @__PURE__ */ jsx36(TableCellData2, { width: "50%", children: /* @__PURE__ */ jsx36(
-          Input4,
-          {
-            label: header.key,
-            value: header.key,
-            showLabel: false,
-            onChange: (e) => {
-              if (e.currentTarget.value) {
-                dispatch({
-                  type: "updateHeader",
-                  header: { key: e.currentTarget.value, value: header.value },
-                  index
-                });
-              } else {
-                dispatch({ type: "removeHeader", index });
-              }
-            },
-            "data-test-id": "header-key"
-          }
-        ) }),
-        /* @__PURE__ */ jsx36(TableCellData2, { width: "50%", children: header.key ? /* @__PURE__ */ jsx36(
-          Input4,
-          {
-            showLabel: false,
-            label: header.value,
-            value: header.value,
-            onChange: (e) => dispatch({
-              type: "updateHeader",
-              header: { key: header.key, value: e.currentTarget.value },
-              index
-            }),
-            "data-test-id": "header-value"
-          }
-        ) : null })
-      ] }, index))
+      deezHeaders.map((header, index) => {
+        return /* @__PURE__ */ jsxs22(TableRow2, { children: [
+          /* @__PURE__ */ jsx37(TableCellData2, { width: "50%", children: /* @__PURE__ */ jsx37(
+            Input5,
+            {
+              label: header.key,
+              value: header.key,
+              showLabel: false,
+              onChange: (e) => {
+                if (e.currentTarget.value) {
+                  dispatch({
+                    type: "updateHeader",
+                    header: { key: e.currentTarget.value, value: header.value },
+                    index
+                  });
+                } else {
+                  dispatch({ type: "removeHeader", index });
+                }
+              },
+              "data-test-id": "header-key"
+            }
+          ) }),
+          /* @__PURE__ */ jsx37(TableCellData2, { width: "50%", children: header.key ? /* @__PURE__ */ jsx37(
+            InputVariables,
+            {
+              value: header.value,
+              onChange: (value) => handleUpdateParamFromMenu({ key: header.key, value, index }),
+              onVariableClick: (value) => handleUpdateParamFromMenu({ key: header.key, value, index }),
+              "data-test-id": "header-value"
+            }
+          ) : null })
+        ] }, index);
+      })
     ] })
   ] }) });
 }
 
 // src/components/Request/RequestMethodSelect.tsx
 import { InputSelect as InputSelect5 } from "@uniformdev/design-system";
-import { jsx as jsx37 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx38 } from "@emotion/react/jsx-runtime";
 function RequestMethodSelect(props) {
   var _a;
   const { request, dispatch } = useRequest();
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     InputSelect5,
     {
       ...props,
@@ -4004,7 +4043,7 @@ function RequestMethodSelect(props) {
 
 // src/components/Request/RequestParameters.tsx
 import {
-  Input as Input5,
+  Input as Input6,
   Table as Table3,
   TableBody as TableBody3,
   TableCellData as TableCellData3,
@@ -4013,72 +4052,88 @@ import {
   TableRow as TableRow3,
   WarningMessage as WarningMessage2
 } from "@uniformdev/design-system";
-import { jsx as jsx38, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
 function RequestParameters({ disableVariables }) {
   var _a, _b;
   const { dispatch, request } = useRequest();
   const deezParameters = [...request.parameters, { key: "", value: "" }];
-  return /* @__PURE__ */ jsx38("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs23(Table3, { children: [
-    /* @__PURE__ */ jsx38(TableHead3, { children: /* @__PURE__ */ jsxs23(TableRow3, { children: [
-      /* @__PURE__ */ jsx38(TableCellHead3, { children: "Name" }),
-      /* @__PURE__ */ jsx38(TableCellHead3, { children: "Value" })
+  const handleUpdateParamFromMenu = ({
+    key,
+    value,
+    index
+  }) => {
+    dispatch({
+      type: "updateParameter",
+      parameter: { key, value },
+      index
+    });
+  };
+  return /* @__PURE__ */ jsx39("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs23(Table3, { children: [
+    /* @__PURE__ */ jsx39(TableHead3, { children: /* @__PURE__ */ jsxs23(TableRow3, { children: [
+      /* @__PURE__ */ jsx39(TableCellHead3, { children: "Name" }),
+      /* @__PURE__ */ jsx39(TableCellHead3, { children: "Value" })
     ] }) }),
     /* @__PURE__ */ jsxs23(TableBody3, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.parameters) == null ? void 0 : _b.map((baseParameter) => {
         return /* @__PURE__ */ jsxs23(TableRow3, { children: [
           /* @__PURE__ */ jsxs23(TableCellData3, { width: "50%", children: [
             baseParameter.key,
-            /* @__PURE__ */ jsx38("br", {}),
-            /* @__PURE__ */ jsx38("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ jsx38("small", { children: "from data source" }) })
+            /* @__PURE__ */ jsx39("br", {}),
+            /* @__PURE__ */ jsx39("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ jsx39("small", { children: "from data source" }) })
           ] }),
           /* @__PURE__ */ jsxs23(TableCellData3, { width: "50%", children: [
-            /* @__PURE__ */ jsx38("i", { css: { color: "var(--gray-500)" }, children: baseParameter.value }),
-            request.parameters.find((p) => p.key === baseParameter.key) ? /* @__PURE__ */ jsx38(WarningMessage2, { message: "overridden below" }) : null
+            /* @__PURE__ */ jsx39("i", { css: { color: "var(--gray-500)" }, children: baseParameter.value }),
+            request.parameters.find((p) => p.key === baseParameter.key) ? /* @__PURE__ */ jsx39(WarningMessage2, { message: "overridden below" }) : null
           ] })
         ] }, baseParameter.key);
       }),
-      deezParameters.map((parameter, index) => /* @__PURE__ */ jsxs23(TableRow3, { children: [
-        /* @__PURE__ */ jsx38(TableCellData3, { width: "50%", children: /* @__PURE__ */ jsx38(
-          Input5,
-          {
-            label: parameter.key,
-            value: parameter.key,
-            showLabel: false,
-            onChange: (e) => {
-              if (e.currentTarget.value) {
-                dispatch({
-                  type: "updateParameter",
-                  parameter: { key: e.currentTarget.value, value: parameter.value },
-                  index
-                });
-              } else {
-                dispatch({ type: "removeParameter", index });
-              }
-            },
-            "data-test-id": "parameter-key"
-          }
-        ) }),
-        /* @__PURE__ */ jsx38(TableCellData3, { width: "50%", children: parameter.key ? /* @__PURE__ */ jsx38(
-          Input5,
-          {
-            showLabel: false,
-            label: parameter.value,
-            value: parameter.value,
-            onChange: (e) => dispatch({
-              type: "updateParameter",
-              parameter: { key: parameter.key, value: e.currentTarget.value },
-              index
-            }),
-            "data-test-id": "parameter-value"
-          }
-        ) : null })
-      ] }, index))
+      deezParameters.map((parameter, index) => {
+        return /* @__PURE__ */ jsxs23(TableRow3, { children: [
+          /* @__PURE__ */ jsx39(TableCellData3, { width: "50%", children: /* @__PURE__ */ jsx39(
+            Input6,
+            {
+              label: parameter.key,
+              value: parameter.key,
+              showLabel: false,
+              onChange: (e) => {
+                if (e.currentTarget.value) {
+                  dispatch({
+                    type: "updateParameter",
+                    parameter: { key: e.currentTarget.value, value: parameter.value },
+                    index
+                  });
+                } else {
+                  dispatch({ type: "removeParameter", index });
+                }
+              },
+              "data-test-id": "parameter-key"
+            }
+          ) }),
+          /* @__PURE__ */ jsx39(TableCellData3, { width: "50%", children: parameter.key ? /* @__PURE__ */ jsx39(
+            InputVariables,
+            {
+              value: parameter.value,
+              onChange: (selectedVariable) => handleUpdateParamFromMenu({
+                key: parameter.key,
+                value: selectedVariable,
+                index
+              }),
+              onVariableClick: (selectedVariable) => handleUpdateParamFromMenu({
+                key: parameter.key,
+                value: selectedVariable,
+                index
+              }),
+              "data-test-id": "parameter-value"
+            }
+          ) : null })
+        ] }, index);
+      })
     ] })
   ] }) });
 }
 
 // src/components/Request/RequestUrl.tsx
-import { css as css23 } from "@emotion/react";
+import { css as css24 } from "@emotion/react";
 import { useMemo as useMemo6 } from "react";
 
 // src/components/Request/urlEncodeRequestParameter.ts
@@ -4100,7 +4155,7 @@ function decodeVariablesInUrlEncodedString(string, varValues) {
 }
 
 // src/components/Request/RequestUrl.tsx
-import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx40, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
 function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
@@ -4115,13 +4170,13 @@ function RequestUrl() {
   return /* @__PURE__ */ jsxs24(
     "small",
     {
-      css: css23`
+      css: css24`
         display: inline-block;
         margin-bottom: var(--spacing-xs);
         word-break: break-word;
       `,
       children: [
-        request.baseRequest ? /* @__PURE__ */ jsx39("span", { children: (_b = request.baseRequest) == null ? void 0 : _b.baseUrl }) : null,
+        request.baseRequest ? /* @__PURE__ */ jsx40("span", { children: (_b = request.baseRequest) == null ? void 0 : _b.baseUrl }) : null,
         /* @__PURE__ */ jsxs24("span", { css: { fontWeight: request.baseRequest ? "bold" : "inherit" }, children: [
           urlEncodeRequestUrl(request.relativeUrl, variables),
           mergedParameters.length > 0 ? /* @__PURE__ */ jsxs24(Fragment6, { children: [
@@ -4143,10 +4198,10 @@ function RequestUrl() {
 }
 
 // src/components/Request/RequestUrlInput.tsx
-import { jsx as jsx40 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx41 } from "@emotion/react/jsx-runtime";
 function RequestUrlInput(props) {
   const { request, dispatch } = useRequest();
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     InputVariables,
     {
       ...props,
@@ -4174,7 +4229,11 @@ function RequestUrlInput(props) {
       },
       onChange: (value) => {
         dispatch({ type: "setRelativeUrl", relativeUrl: value });
-      }
+      },
+      onVariableClick: (selectedValue) => {
+        dispatch({ type: "setRelativeUrl", relativeUrl: request.relativeUrl.concat(selectedValue) });
+      },
+      showAddVariableMenuOption: true
     }
   );
 }
@@ -4214,18 +4273,18 @@ function useRequestParameter(paramName) {
 }
 
 // src/components/DataSourceEditor.tsx
-import { jsx as jsx41 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx42 } from "@emotion/react/jsx-runtime";
 function DataSourceEditor({ onChange, children, editVariableComponent }) {
   var _a;
   const { value } = useMeshLocation("dataSource");
   const currentRequestValue = convertDataSourceToRequestData(value);
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     VariablesProvider,
     {
       value: (_a = value.variables) != null ? _a : {},
       onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
       editVariableComponent,
-      children: /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsx42(
         RequestProvider,
         {
           value: currentRequestValue,
@@ -4262,7 +4321,7 @@ function convertRequestDataToDataSource(dataSource, requestData) {
 }
 
 // src/components/DataTypeEditor.tsx
-import { jsx as jsx42 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx43 } from "@emotion/react/jsx-runtime";
 function DataTypeEditor({ onChange, children, editVariableComponent }) {
   var _a;
   const {
@@ -4270,13 +4329,13 @@ function DataTypeEditor({ onChange, children, editVariableComponent }) {
     metadata: { dataSource }
   } = useMeshLocation("dataType");
   const currentRequestValue = convertDataTypeToRequestData(value, dataSource);
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     VariablesProvider,
     {
       value: (_a = value.variables) != null ? _a : {},
       onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
       editVariableComponent,
-      children: /* @__PURE__ */ jsx42(
+      children: /* @__PURE__ */ jsx43(
         RequestProvider,
         {
           value: currentRequestValue,
@@ -4326,12 +4385,12 @@ import { LoadingIndicator as LoadingIndicator2, Theme as Theme2 } from "@uniform
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 import { initializeUniformMeshSDK } from "@uniformdev/mesh-sdk";
-import { useEffect as useEffect6, useRef as useRef9, useState as useState9 } from "react";
+import { useEffect as useEffect7, useRef as useRef10, useState as useState9 } from "react";
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
   const [error, setError] = useState9();
   const [sdk, setSdk] = useState9();
-  const initializationInProgress = useRef9(false);
-  useEffect6(
+  const initializationInProgress = useRef10(false);
+  useEffect7(
     () => {
       if (typeof window === "undefined" || sdk) {
         return;
@@ -4359,7 +4418,7 @@ var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
 };
 
 // src/components/MeshApp.tsx
-import { jsx as jsx43, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
 var MeshApp = ({
   children,
   loadingComponent,
@@ -4368,18 +4427,18 @@ var MeshApp = ({
   const { initializing, error, sdk } = useInitializeUniformMeshSdk();
   if (initializing || !sdk) {
     const LoadingComponent = loadingComponent;
-    return LoadingComponent ? /* @__PURE__ */ jsx43(LoadingComponent, {}) : /* @__PURE__ */ jsx43(LoadingIndicator2, {});
+    return LoadingComponent ? /* @__PURE__ */ jsx44(LoadingComponent, {}) : /* @__PURE__ */ jsx44(LoadingIndicator2, {});
   }
   if (error) {
     const ErrorComponent = errorComponent;
     if (ErrorComponent) {
-      return /* @__PURE__ */ jsx43(ErrorComponent, { error });
+      return /* @__PURE__ */ jsx44(ErrorComponent, { error });
     }
     throw error;
   }
   return /* @__PURE__ */ jsxs25(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
-    /* @__PURE__ */ jsx43(Theme2, {}),
-    /* @__PURE__ */ jsx43(UniformMeshLocationContextProvider, { children })
+    /* @__PURE__ */ jsx44(Theme2, {}),
+    /* @__PURE__ */ jsx44(UniformMeshLocationContextProvider, { children })
   ] });
 };
 
@@ -4403,7 +4462,7 @@ import {
   Button as Button3,
   Callout as Callout4,
   Heading,
-  Input as Input6,
+  Input as Input7,
   InputComboBox,
   InputKeywordSearch as InputKeywordSearch2,
   InputSelect as InputSelect6,
@@ -4412,8 +4471,8 @@ import {
   Label,
   LoadingIndicator as LoadingIndicator3,
   LoadingOverlay as LoadingOverlay2,
-  Menu as Menu2,
-  MenuItem as MenuItem2,
+  Menu as Menu3,
+  MenuItem as MenuItem3,
   ScrollableList,
   ScrollableListItem,
   Switch,
@@ -4434,7 +4493,7 @@ export {
   EntrySearch,
   Heading,
   icons_exports as Icons,
-  Input6 as Input,
+  Input7 as Input,
   InputComboBox,
   InputKeywordSearch2 as InputKeywordSearch,
   InputSelect6 as InputSelect,
@@ -4444,8 +4503,8 @@ export {
   Label,
   LoadingIndicator3 as LoadingIndicator,
   LoadingOverlay2 as LoadingOverlay,
-  Menu2 as Menu,
-  MenuItem2 as MenuItem,
+  Menu3 as Menu,
+  MenuItem3 as MenuItem,
   MeshApp,
   ProductPreviewList,
   ProductQuery,