@uniformdev/mesh-sdk-react 18.35.1-alpha.17 → 18.35.1-alpha.22

package/dist/index.esm.js

@@ -893,7 +893,7 @@ var ProductPreviewList = ({
           scrollbarStyles
         ],
         children: products == null ? void 0 : products.map((product, index) => {
-          var _a, _b;
+          var _a;
           const [category] = (product == null ? void 0 : product.categories) || [];
           const categoryName = typeof category === "undefined" || !categories ? void 0 : (_a = categories.find((c) => c.id === category.id)) == null ? void 0 : _a.name;
           return /* @__PURE__ */ jsx18("li", { css: productPreviewListItem, children: /* @__PURE__ */ jsxs7(
@@ -906,13 +906,13 @@ var ProductPreviewList = ({
                   "img",
                   {
                     src: product.thumbnailUrl,
-                    alt: typeof product.title === "string" ? product.title : product.name || `Product ${index}`,
+                    alt: typeof product.title === "string" ? product.title : `Product ${index}`,
                     css: productPreviewListImage,
                     "data-test-id": "product-image"
                   }
                 ) : /* @__PURE__ */ jsx18("div", { css: productPreviewListImageDefault }),
                 /* @__PURE__ */ jsxs7("h4", { css: productPreviewListTitle, "data-test-id": "product-name", children: [
-                  product.title || product.name,
+                  product.title,
                   categoryName && /* @__PURE__ */ jsx18("span", { css: productPreviewListCategoryText, children: categoryName })
                 ] }),
                 product && /* @__PURE__ */ jsxs7(Fragment2, { children: [
@@ -925,12 +925,12 @@ var ProductPreviewList = ({
                     "Price: ",
                     product.price
                   ] }) : null,
-                  product.editLink || product.url ? /* @__PURE__ */ jsxs7(
+                  product.editLink ? /* @__PURE__ */ jsxs7(
                     "a",
                     {
                       css: productPreviewListLinkBtn,
-                      href: (_b = product.editLink) != null ? _b : product.url,
-                      title: `Go to ${product.title || product.name}`,
+                      href: product.editLink,
+                      title: `Go to ${product.title}`,
                       target: "_blank",
                       rel: "noopener noreferrer",
                       "data-test-id": "edit-product-button",
@@ -2642,7 +2642,7 @@ function DefaultDamItemRenderer({ item }) {
 }
 
 // src/components/DataResourceVariablesList.tsx
-import { Callout as Callout3, Input as Input4 } from "@uniformdev/design-system";
+import { Callout as Callout4, Input as Input4 } from "@uniformdev/design-system";
 
 // src/hooks/useMeshLocation.ts
 import { useMemo as useMemo4, useRef as useRef7 } from "react";
@@ -2655,18 +2655,6 @@ import { Theme } from "@uniformdev/design-system";
 import { createContext, useContext as useContext3 } from "react";
 import { jsx as jsx26, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
 var UniformMeshSdkContext = createContext(void 0);
-var UniformMeshSdkContextProvider = ({ children }) => {
-  let value = void 0;
-  if (typeof window !== "undefined" && typeof window.UniformMeshSDK !== "undefined") {
-    value = {
-      sdk: window.UniformMeshSDK
-    };
-  }
-  return /* @__PURE__ */ jsxs15(UniformMeshSdkContext.Provider, { value, children: [
-    /* @__PURE__ */ jsx26(Theme, {}),
-    /* @__PURE__ */ jsx26(UniformMeshLocationContextProvider, { children })
-  ] });
-};
 var useUniformMeshSdkContext = () => {
   const context = useContext3(UniformMeshSdkContext);
   if (!context) {
@@ -2683,9 +2671,7 @@ function useUniformMeshSdk() {
 
 // src/components/UniformMeshLocationContext.tsx
 import { jsx as jsx27 } from "@emotion/react/jsx-runtime";
-var UniformMeshLocationContext = createContext2(
-  void 0
-);
+var UniformMeshLocationContext = createContext2(void 0);
 var UniformMeshLocationContextProvider = ({
   children
 }) => {
@@ -2716,20 +2702,9 @@ var useUniformMeshLocationContext = () => {
 };
 
 // src/hooks/useMeshLocation.ts
-var legacyWarned = false;
 function useMeshLocation(expectedLocation) {
   const { location } = useUniformMeshLocationContext();
-  let effectiveExpected = expectedLocation;
-  if (expectedLocation === "dataTypeInstance") {
-    effectiveExpected = "dataResource";
-    if (!legacyWarned) {
-      console.warn(
-        "`dataTypeInstance` mesh location is deprecated, please switch to `dataResource` instead."
-      );
-      legacyWarned = true;
-    }
-  }
-  if (effectiveExpected && location.type !== effectiveExpected) {
+  if (expectedLocation && location.type !== expectedLocation) {
     throw new Error(`Expected location type ${expectedLocation} but got ${location.type}`);
   }
   const backdoorLocation = useRef7(location);
@@ -2752,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";
@@ -2784,12 +2785,18 @@ 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
-import { Button as Button2, Input as Input2 } from "@uniformdev/design-system";
-import { Form, Formik } from "formik";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button as Button2, Callout as Callout3, Input as Input2, useShortcut } from "@uniformdev/design-system";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
 
 // src/components/Variables/InputVariables.styles.ts
 import { css as css19 } from "@emotion/react";
@@ -2805,57 +2812,90 @@ var variablesFormBtnGroup = css19`
 
 // src/components/Variables/VariableEditor.tsx
 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;
+var schema = z.object({
+  name: z.string().nonempty("Name can't be empty").regex(/^[^${}]+$/, "$, {, and } are reserved characters and cannot be used in a variable name"),
+  default: z.string(),
+  displayName: z.string().optional(),
+  helpText: z.string().optional(),
+  order: z.number().optional(),
+  type: z.string().optional()
+});
+function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }) {
+  var _a, _b, _c, _d, _e, _f, _g;
   const { variables } = useVariables();
-  return /* @__PURE__ */ jsx28(
-    Formik,
-    {
-      initialValues: {
-        name: variable,
-        default: (_b = (_a = variables[variable]) == null ? void 0 : _a.default) != null ? _b : "",
-        displayName: (_d = (_c = variables[variable]) == null ? void 0 : _c.displayName) != null ? _d : "",
-        helpText: (_f = (_e = variables[variable]) == null ? void 0 : _e.helpText) != null ? _f : "",
-        order: (_g = variables[variable]) == null ? void 0 : _g.order,
-        type: (_i = (_h = variables[variable]) == null ? void 0 : _h.type) != null ? _i : ""
-      },
-      onSubmit: (values) => {
-        const finalValue = {
-          ...values,
-          helpText: values.helpText || void 0,
-          type: values.type || void 0,
-          displayName: values.displayName || void 0
-        };
-        return onSubmit(finalValue);
-      },
-      children: ({ getFieldProps, initialValues }) => {
-        return /* @__PURE__ */ jsxs16(Form, { css: variablesFormContainer, children: [
-          /* @__PURE__ */ jsx28(
-            Input2,
-            {
-              ...getFieldProps("name"),
-              label: "Name",
-              disabled: initialValues.name !== "",
-              caption: "This cannot change once created."
-            }
-          ),
-          /* @__PURE__ */ jsx28(
-            Input2,
-            {
-              ...getFieldProps("helpText"),
-              label: "Help Text",
-              caption: "Appears in the composition data resource when entering a value for this variable.",
-              autoComplete: "off"
-            }
-          ),
-          /* @__PURE__ */ jsx28(Input2, { ...getFieldProps("default"), label: "Default Value", autoComplete: "off" }),
-          /* @__PURE__ */ jsxs16("div", { css: variablesFormBtnGroup, children: [
-            /* @__PURE__ */ jsx28(Button2, { type: "submit", children: "OK" }),
-            /* @__PURE__ */ jsx28(Button2, { type: "button", buttonType: "ghost", onClick: onCancel, children: "Cancel" })
-          ] })
-        ] });
-      }
-    }
+  const currentVariable = variables[variable];
+  const { register, handleSubmit, formState } = useForm({
+    defaultValues: {
+      name: variable,
+      default: (_a = currentVariable == null ? void 0 : currentVariable.default) != null ? _a : "",
+      displayName: (_b = currentVariable == null ? void 0 : currentVariable.displayName) != null ? _b : "",
+      helpText: (_c = currentVariable == null ? void 0 : currentVariable.helpText) != null ? _c : "",
+      order: currentVariable == null ? void 0 : currentVariable.order,
+      type: (_d = currentVariable == null ? void 0 : currentVariable.type) != null ? _d : ""
+    },
+    resolver: zodResolver(schema)
+  });
+  const submitHandler = handleSubmit((values) => {
+    const finalValue = {
+      ...values,
+      helpText: values.helpText || void 0,
+      type: values.type || void 0,
+      displayName: values.displayName || void 0
+    };
+    return onSubmit(finalValue);
+  });
+  useShortcut({
+    shortcut: "enter",
+    handler: () => {
+      submitHandler();
+    },
+    activeWhenEditing: true
+  });
+  return (
+    // NOTE: this is intentionally NOT a <form> because it's regularly used in a nested modal and that can make it bubble
+    // up a submit to its 'parent form' which is not what we want.
+    /* @__PURE__ */ jsxs16("div", { css: variablesFormContainer, children: [
+      /* @__PURE__ */ jsx28(
+        Input2,
+        {
+          ...register("name"),
+          label: "Name",
+          disabled: variable !== "",
+          caption: "This cannot change once created.",
+          errorMessage: (_e = formState.errors.name) == null ? void 0 : _e.message,
+          "data-af": "1"
+        }
+      ),
+      /* @__PURE__ */ jsx28(
+        Input2,
+        {
+          ...register("helpText"),
+          label: "Help Text",
+          caption: "Appears when entering a value for this variable.",
+          autoComplete: "off",
+          errorMessage: (_f = formState.errors.helpText) == null ? void 0 : _f.message
+        }
+      ),
+      /* @__PURE__ */ jsx28(
+        Input2,
+        {
+          ...register("default"),
+          label: "Default Value",
+          autoComplete: "off",
+          errorMessage: (_g = formState.errors.default) == null ? void 0 : _g.message
+        }
+      ),
+      /* @__PURE__ */ jsxs16("div", { css: variablesFormBtnGroup, children: [
+        /* @__PURE__ */ jsx28(Button2, { type: "button", onClick: submitHandler, children: "OK" }),
+        /* @__PURE__ */ jsx28(Button2, { type: "button", buttonType: "ghost", onClick: onCancel, children: "Cancel" })
+      ] }),
+      disableMeshTip ? null : /* @__PURE__ */ jsxs16(Callout3, { type: "tip", title: "Customized User Interfaces", children: [
+        "Developers can create customized user interfaces for variable editing by building a Uniform mesh integration. Get started quickly with our",
+        " ",
+        /* @__PURE__ */ jsx28("a", { href: "https://docs.uniform.app", target: "_blank", rel: "noopener noreferrer", children: "Mesh SDK" }),
+        "."
+      ] })
+    ] })
   );
 }
 
@@ -2869,6 +2909,7 @@ function VariablesProvider({
   children
 }) {
   const [editing, setEditing] = React10.useState();
+  const events = React10.useMemo(() => mitt(), []);
   const Editor = editVariableComponent != null ? editVariableComponent : VariableEditor;
   const contextValue = {
     dispatch: (event) => {
@@ -2890,7 +2931,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,
@@ -2901,6 +2944,7 @@ function VariablesProvider({
           setEditing(void 0);
           const { name, ...varValue } = val;
           onChange({ ...value, [name]: varValue });
+          events.emit("update", name);
         },
         onCancel: () => setEditing(void 0),
         variable: editing
@@ -2916,51 +2960,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 })
@@ -2975,13 +3074,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);
@@ -2996,21 +3097,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,
         {
@@ -3019,6 +3139,7 @@ function InputVariables({
           showLabel: false,
           value,
           onChange: (e) => handleSetValue(e.currentTarget.value),
+          onPaste: onPasteHandler,
           ...inputProps
         }
       )
@@ -3087,24 +3208,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() {
@@ -3216,13 +3319,13 @@ function DataResourceVariablesList({
   const {
     value,
     metadata: { dataType }
-  } = useMeshLocation("dataTypeInstance");
+  } = useMeshLocation("dataResource");
   const variableDefinitions = variablesToList(dataType.variables);
   if (variableDefinitions.length === 0) {
     if (NoVariablesComponent) {
       return /* @__PURE__ */ jsx33(NoVariablesComponent, {});
     }
-    return /* @__PURE__ */ jsx33(Callout3, { type: "note", children: "No settings are required." });
+    return /* @__PURE__ */ jsx33(Callout4, { type: "note", children: "No settings are required." });
   }
   return /* @__PURE__ */ jsx33("div", { children: variableDefinitions.map((variableDefinition) => {
     var _a, _b, _c;
@@ -3271,7 +3374,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";
@@ -3397,7 +3500,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",
     {
@@ -3525,7 +3628,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 })
@@ -3633,12 +3737,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);
@@ -3649,7 +3750,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) {
@@ -3675,7 +3776,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;
@@ -3745,9 +3846,6 @@ function RequestUrlInput(props) {
       onChange: (value) => {
         dispatch({ type: "setRelativeUrl", relativeUrl: value });
       },
-      onVariableClick: (selectedValue) => {
-        dispatch({ type: "setRelativeUrl", relativeUrl: request.relativeUrl.concat(selectedValue) });
-      },
       showAddVariableMenuOption: true
     }
   );
@@ -3900,12 +3998,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;
@@ -4004,10 +4102,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: () => {
@@ -4026,13 +4124,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) {
@@ -4123,7 +4221,7 @@ var ObjectSearchFilter = ({
   selectOptions
 }) => {
   const { query, onSetQuery } = useObjectSearchContext();
-  const [searchState, setSearchState] = useState11({
+  const [searchState, setSearchState] = useState12({
     contentType: "",
     keyword: ""
   });
@@ -4561,7 +4659,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,
@@ -4592,7 +4690,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,
@@ -4603,7 +4701,7 @@ var QueryFilter = ({
     setQueryState((prev) => ({ ...prev, ...value }));
     onSetQuery({ ...query, ...value });
   };
-  useEffect8(() => {
+  useEffect9(() => {
     onSetQuery(queryState);
   }, [onSetQuery, queryState]);
   return /* @__PURE__ */ jsxs34("fieldset", { children: [
@@ -4687,12 +4785,6 @@ var QueryFilter = ({
   ] });
 };
 
-// src/hooks/useUniformMeshLocation.ts
-function useUniformMeshLocation() {
-  const { location } = useUniformMeshLocationContext();
-  return location;
-}
-
 // src/hooks/index.ts
 import { ParameterShellContext, useParameterShell } from "@uniformdev/design-system";
 
@@ -4708,14 +4800,13 @@ function createLocationValidator(setValue, validate) {
 import {
   AddListButton as AddListButton2,
   Button as Button6,
-  Callout as Callout4,
+  Callout as Callout5,
   Heading,
   Input as Input8,
   InputComboBox,
   InputKeywordSearch as InputKeywordSearch4,
   InputSelect as InputSelect8,
   InputToggle,
-  InputKeywordSearch as InputKeywordSearch5,
   Label,
   LoadingIndicator as LoadingIndicator4,
   LoadingOverlay as LoadingOverlay2,
@@ -4745,7 +4836,7 @@ export * from "@uniformdev/mesh-sdk";
 export {
   AddListButton2 as AddListButton,
   Button6 as Button,
-  Callout4 as Callout,
+  Callout5 as Callout,
   DamSelectedItem,
   DataRefreshButton,
   DataResourceVariablesList,
@@ -4762,7 +4853,6 @@ export {
   InputSelect8 as InputSelect,
   InputToggle,
   InputVariables,
-  InputKeywordSearch5 as KeywordSearchInput,
   Label,
   LinkButton,
   LoadingIndicator4 as LoadingIndicator,
@@ -4818,10 +4908,6 @@ export {
   TextVariableRenderer,
   Textarea,
   Theme3 as Theme,
-  UniformMeshLocationContext,
-  UniformMeshLocationContextProvider,
-  UniformMeshSdkContext,
-  UniformMeshSdkContextProvider,
   VariableEditor,
   VariablesList,
   VariablesProvider,
@@ -4890,7 +4976,6 @@ export {
   selectedItemTitle,
   urlEncodeRequestParameter,
   urlEncodeRequestUrl,
-  useInitializeUniformMeshSdk,
   useMeshLocation,
   useObjectSearchContext,
   useParameterShell,
@@ -4899,10 +4984,7 @@ export {
   useRequest,
   useRequestHeader,
   useRequestParameter,
-  useUniformMeshLocation,
-  useUniformMeshLocationContext,
   useUniformMeshSdk,
-  useUniformMeshSdkContext,
   useVariables,
   variablesToList
 };