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

package/dist/index.js

@@ -50,7 +50,6 @@ __export(src_exports, {
   InputSelect: () => import_design_system34.InputSelect,
   InputToggle: () => import_design_system34.InputToggle,
   InputVariables: () => InputVariables,
-  KeywordSearchInput: () => import_design_system34.InputKeywordSearch,
   Label: () => import_design_system34.Label,
   LinkButton: () => LinkButton,
   LoadingIndicator: () => import_design_system34.LoadingIndicator,
@@ -106,10 +105,6 @@ __export(src_exports, {
   TextVariableRenderer: () => TextVariableRenderer,
   Textarea: () => import_design_system34.Textarea,
   Theme: () => import_design_system34.Theme,
-  UniformMeshLocationContext: () => UniformMeshLocationContext,
-  UniformMeshLocationContextProvider: () => UniformMeshLocationContextProvider,
-  UniformMeshSdkContext: () => UniformMeshSdkContext,
-  UniformMeshSdkContextProvider: () => UniformMeshSdkContextProvider,
   VariableEditor: () => VariableEditor,
   VariablesList: () => VariablesList,
   VariablesProvider: () => VariablesProvider,
@@ -178,7 +173,6 @@ __export(src_exports, {
   selectedItemTitle: () => selectedItemTitle,
   urlEncodeRequestParameter: () => urlEncodeRequestParameter,
   urlEncodeRequestUrl: () => urlEncodeRequestUrl,
-  useInitializeUniformMeshSdk: () => useInitializeUniformMeshSdk,
   useMeshLocation: () => useMeshLocation,
   useObjectSearchContext: () => useObjectSearchContext,
   useParameterShell: () => import_design_system33.useParameterShell,
@@ -187,10 +181,7 @@ __export(src_exports, {
   useRequest: () => useRequest,
   useRequestHeader: () => useRequestHeader,
   useRequestParameter: () => useRequestParameter,
-  useUniformMeshLocation: () => useUniformMeshLocation,
-  useUniformMeshLocationContext: () => useUniformMeshLocationContext,
   useUniformMeshSdk: () => useUniformMeshSdk,
-  useUniformMeshSdkContext: () => useUniformMeshSdkContext,
   useVariables: () => useVariables,
   variablesToList: () => variablesToList
 });
@@ -1085,7 +1076,7 @@ var ProductPreviewList = ({
           import_design_system3.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__ */ (0, import_jsx_runtime18.jsx)("li", { css: productPreviewListItem, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
@@ -1098,13 +1089,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__ */ (0, import_jsx_runtime18.jsx)("div", { css: productPreviewListImageDefault }),
                 /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("h4", { css: productPreviewListTitle, "data-test-id": "product-name", children: [
-                  product.title || product.name,
+                  product.title,
                   categoryName && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { css: productPreviewListCategoryText, children: categoryName })
                 ] }),
                 product && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
@@ -1117,12 +1108,12 @@ var ProductPreviewList = ({
                     "Price: ",
                     product.price
                   ] }) : null,
-                  product.editLink || product.url ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                  product.editLink ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
                     "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",
@@ -2837,18 +2828,6 @@ var import_design_system13 = require("@uniformdev/design-system");
 var import_react25 = require("react");
 var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
 var UniformMeshSdkContext = (0, import_react25.createContext)(void 0);
-var UniformMeshSdkContextProvider = ({ children }) => {
-  let value = void 0;
-  if (typeof window !== "undefined" && typeof window.UniformMeshSDK !== "undefined") {
-    value = {
-      sdk: window.UniformMeshSDK
-    };
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(UniformMeshSdkContext.Provider, { value, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_design_system13.Theme, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(UniformMeshLocationContextProvider, { children })
-  ] });
-};
 var useUniformMeshSdkContext = () => {
   const context = (0, import_react25.useContext)(UniformMeshSdkContext);
   if (!context) {
@@ -2865,9 +2844,7 @@ function useUniformMeshSdk() {
 
 // src/components/UniformMeshLocationContext.tsx
 var import_jsx_runtime27 = require("@emotion/react/jsx-runtime");
-var UniformMeshLocationContext = (0, import_react26.createContext)(
-  void 0
-);
+var UniformMeshLocationContext = (0, import_react26.createContext)(void 0);
 var UniformMeshLocationContextProvider = ({
   children
 }) => {
@@ -2898,20 +2875,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 = (0, import_react27.useRef)(location);
@@ -2934,9 +2900,35 @@ function useMeshLocation(expectedLocation) {
 var import_design_system16 = require("@uniformdev/design-system");
 var React11 = __toESM(require("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
 var import_design_system15 = require("@uniformdev/design-system");
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/Variables/styles/InsertVariableMenu.styles.ts
 var import_react28 = require("@emotion/react");
@@ -2966,12 +2958,18 @@ var variablesTipText = import_react28.css`
   padding: 0 var(--spacing-sm);
 `;
 
+// src/components/Variables/useOnVariableUpdated.ts
+var import_react30 = require("react");
+
 // src/components/Variables/VariablesProvider.tsx
+var import_mitt = __toESM(require("mitt"));
 var React10 = __toESM(require("react"));
 
 // src/components/Variables/VariableEditor.tsx
+var import_zod = require("@hookform/resolvers/zod");
 var import_design_system14 = require("@uniformdev/design-system");
-var import_formik = require("formik");
+var import_react_hook_form = require("react-hook-form");
+var import_zod2 = require("zod");
 
 // src/components/Variables/InputVariables.styles.ts
 var import_react29 = require("@emotion/react");
@@ -2987,57 +2985,90 @@ var variablesFormBtnGroup = import_react29.css`
 
 // src/components/Variables/VariableEditor.tsx
 var import_jsx_runtime28 = require("@emotion/react/jsx-runtime");
-function VariableEditor({ variable, onSubmit, onCancel }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+var schema = import_zod2.z.object({
+  name: import_zod2.z.string().nonempty("Name can't be empty").regex(/^[^${}]+$/, "$, {, and } are reserved characters and cannot be used in a variable name"),
+  default: import_zod2.z.string(),
+  displayName: import_zod2.z.string().optional(),
+  helpText: import_zod2.z.string().optional(),
+  order: import_zod2.z.number().optional(),
+  type: import_zod2.z.string().optional()
+});
+function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }) {
+  var _a, _b, _c, _d, _e, _f, _g;
   const { variables } = useVariables();
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    import_formik.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__ */ (0, import_jsx_runtime28.jsxs)(import_formik.Form, { css: variablesFormContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            import_design_system14.Input,
-            {
-              ...getFieldProps("name"),
-              label: "Name",
-              disabled: initialValues.name !== "",
-              caption: "This cannot change once created."
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            import_design_system14.Input,
-            {
-              ...getFieldProps("helpText"),
-              label: "Help Text",
-              caption: "Appears in the composition data resource when entering a value for this variable.",
-              autoComplete: "off"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_design_system14.Input, { ...getFieldProps("default"), label: "Default Value", autoComplete: "off" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { css: variablesFormBtnGroup, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_design_system14.Button, { type: "submit", children: "OK" }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_design_system14.Button, { type: "button", buttonType: "ghost", onClick: onCancel, children: "Cancel" })
-          ] })
-        ] });
-      }
-    }
+  const currentVariable = variables[variable];
+  const { register, handleSubmit, formState } = (0, import_react_hook_form.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: (0, import_zod.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);
+  });
+  (0, import_design_system14.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__ */ (0, import_jsx_runtime28.jsxs)("div", { css: variablesFormContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        import_design_system14.Input,
+        {
+          ...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__ */ (0, import_jsx_runtime28.jsx)(
+        import_design_system14.Input,
+        {
+          ...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__ */ (0, import_jsx_runtime28.jsx)(
+        import_design_system14.Input,
+        {
+          ...register("default"),
+          label: "Default Value",
+          autoComplete: "off",
+          errorMessage: (_g = formState.errors.default) == null ? void 0 : _g.message
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { css: variablesFormBtnGroup, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_design_system14.Button, { type: "button", onClick: submitHandler, children: "OK" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_design_system14.Button, { type: "button", buttonType: "ghost", onClick: onCancel, children: "Cancel" })
+      ] }),
+      disableMeshTip ? null : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_design_system14.Callout, { 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__ */ (0, import_jsx_runtime28.jsx)("a", { href: "https://docs.uniform.app", target: "_blank", rel: "noopener noreferrer", children: "Mesh SDK" }),
+        "."
+      ] })
+    ] })
   );
 }
 
@@ -3051,6 +3082,7 @@ function VariablesProvider({
   children
 }) {
   const [editing, setEditing] = React10.useState();
+  const events = React10.useMemo(() => (0, import_mitt.default)(), []);
   const Editor = editVariableComponent != null ? editVariableComponent : VariableEditor;
   const contextValue = {
     dispatch: (event) => {
@@ -3072,7 +3104,9 @@ function VariablesProvider({
         throw new Error(`Unknown event ${JSON.stringify(event)}`);
       }
     },
-    variables: value
+    variables: value,
+    isEditing: typeof editing !== "undefined",
+    events
   };
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(VariablesContext.Provider, { value: contextValue, children: [
     children,
@@ -3083,6 +3117,7 @@ function VariablesProvider({
           setEditing(void 0);
           const { name, ...varValue } = val;
           onChange({ ...value, [name]: varValue });
+          events.emit("update", name);
         },
         onCancel: () => setEditing(void 0),
         variable: editing
@@ -3098,51 +3133,106 @@ function useVariables() {
   return context;
 }
 
+// src/components/Variables/useOnVariableUpdated.ts
+function useOnVariableUpdated(fn, disabled) {
+  const { variables, events } = useVariables();
+  (0, import_react30.useEffect)(() => {
+    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
 var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
 var InsertVariableMenu = ({
-  onVariableClick,
+  onSelectVariable,
   children,
   textValue,
   trigger = "${",
-  showAddVariableMenuOption = false
+  showAddVariableMenuOption = false,
+  disabled = false,
+  forceVisible
 }) => {
-  const { variables, dispatch } = useVariables();
-  const btnRef = (0, import_react30.useRef)(null);
-  const tip = "Tip: access this list by typing ${";
-  (0, import_react30.useEffect)(() => {
+  const { variables, dispatch, isEditing } = useVariables();
+  const btnRef = (0, import_react31.useRef)(null);
+  const tip = `Tip: access this list by typing ${trigger}`;
+  (0, import_react31.useEffect)(() => {
     if (textValue === trigger && btnRef.current && btnRef.current.getAttribute("aria-expanded") === "false") {
       btnRef.current.click();
     }
   }, [textValue, btnRef, trigger]);
+  const [openedAdd, setOpenedAdd] = (0, import_react31.useState)(false);
+  useOnVariableUpdated((varName) => {
+    onSelectVariable == null ? void 0 : onSelectVariable({ name: varName, default: "" });
+  }, !openedAdd);
+  (0, import_react31.useEffect)(() => {
+    if (openedAdd && !isEditing) {
+      setOpenedAdd(false);
+    }
+  }, [isEditing, openedAdd]);
+  if (disabled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children });
+  }
+  const variablesList = variablesToList(variables);
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { css: menuContainer, children: [
     children,
     /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
       import_design_system15.Menu,
       {
         placement: "bottom-start",
+        forceVisible,
         menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { ref: btnRef, css: menuBtn, type: "button", title: "Insert variable", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system15.Icon, { 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__ */ (0, import_jsx_runtime30.jsxs)(
               import_design_system15.MenuItem,
               {
-                id: key,
+                id: name,
                 css: menuItemTextGroup,
-                onClick: () => onVariableClick(decodeURI(`\${${key}}`)),
+                onClick: () => onSelectVariable == null ? void 0 : onSelectVariable(variable),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: key }),
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: name }),
                   helpText ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("small", { css: smallText, children: helpText }) : null
                 ]
               },
-              key
+              name
             );
           }),
           showAddVariableMenuOption ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system15.MenuItemSeparator, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system15.MenuItem, { onClick: () => dispatch({ type: "edit", variable: "" }), children: "Add Variable" })
+            variablesList.length ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system15.MenuItemSeparator, {}) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              import_design_system15.MenuItem,
+              {
+                onClick: () => {
+                  setOpenedAdd(true);
+                  dispatch({ type: "edit", variable: "" });
+                },
+                children: "Add Variable"
+              }
+            )
           ] }) : null,
           Object.entries(variables).length || showAddVariableMenuOption ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system15.MenuItemSeparator, {}) : null,
           /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("i", { css: variablesTipText, children: tip })
@@ -3157,13 +3247,15 @@ var import_jsx_runtime31 = require("@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);
@@ -3178,21 +3270,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__ */ (0, import_jsx_runtime31.jsx)(
     InsertVariableMenu,
     {
       showAddVariableMenuOption,
       textValue: value,
-      onVariableClick,
+      onSelectVariable: handleInsertVariable,
+      disabled: disableVariables,
+      forceVisible: forceMenu || void 0,
       children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         import_design_system16.Input,
         {
@@ -3201,6 +3312,7 @@ function InputVariables({
           showLabel: false,
           value,
           onChange: (e) => handleSetValue(e.currentTarget.value),
+          onPaste: onPasteHandler,
           ...inputProps
         }
       )
@@ -3209,13 +3321,13 @@ function InputVariables({
 }
 
 // src/components/Variables/VariablesList.tsx
-var import_react32 = require("@emotion/react");
+var import_react33 = require("@emotion/react");
 var import_design_system17 = require("@uniformdev/design-system");
 var import_react_beautiful_dnd2 = require("react-beautiful-dnd");
 
 // src/components/Variables/styles/VariablesList.styles.ts
-var import_react31 = require("@emotion/react");
-var tableRow = (isDragging) => import_react31.css`
+var import_react32 = require("@emotion/react");
+var tableRow = (isDragging) => import_react32.css`
   position: relative;
   ${isDragging ? `
   display: table;   
@@ -3223,7 +3335,7 @@ var tableRow = (isDragging) => import_react31.css`
   top: auto !important;
   ` : void 0}
 `;
-var tableCellDragIcon = import_react31.css`
+var tableCellDragIcon = import_react32.css`
   &::after {
     content: '';
     display: block;
@@ -3241,7 +3353,7 @@ var tableCellDragIcon = import_react31.css`
     opacity: 1;
   }
 `;
-var variableName = import_react31.css`
+var variableName = import_react32.css`
   border: none;
   color: var(--brand-secondary-5);
   font-weight: var(--fw-medium);
@@ -3252,31 +3364,13 @@ var variableName = import_react31.css`
   white-space: nowrap;
   max-width: 20ch;
 `;
-var variableValue = import_react31.css`
+var variableValue = import_react32.css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   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
 var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
 function VariablesList() {
@@ -3346,7 +3440,7 @@ function VariablesList() {
                         title: `delete ${text}`,
                         css: [
                           import_design_system17.button,
-                          import_react32.css`
+                          import_react33.css`
                                   background: transparent;
                                 `
                         ],
@@ -3388,7 +3482,7 @@ function DataResourceVariablesList({
   const {
     value,
     metadata: { dataType }
-  } = useMeshLocation("dataTypeInstance");
+  } = useMeshLocation("dataResource");
   const variableDefinitions = variablesToList(dataType.variables);
   if (variableDefinitions.length === 0) {
     if (NoVariablesComponent) {
@@ -3441,9 +3535,9 @@ function TextVariableRenderer({ definition, value, setValue }) {
 }
 
 // src/components/Request/RequestBody.tsx
-var import_react34 = require("@emotion/react");
+var import_react35 = require("@emotion/react");
 var import_design_system19 = require("@uniformdev/design-system");
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // src/components/Request/RequestProvider.tsx
 var React12 = __toESM(require("react"));
@@ -3527,11 +3621,11 @@ function useRequest() {
 }
 
 // src/components/Request/styles/Request.styles.ts
-var import_react33 = require("@emotion/react");
-var innerContentStyles = import_react33.css`
+var import_react34 = require("@emotion/react");
+var innerContentStyles = import_react34.css`
   background: var(--white);
 `;
-var requestTypeContainer = (bgColor) => import_react33.css`
+var requestTypeContainer = (bgColor) => import_react34.css`
   align-items: start;
   background: ${bgColor};
   display: grid;
@@ -3569,11 +3663,11 @@ var LANGUAGE_TO_CONTENT_TYPE = {
 };
 function RequestBody() {
   const { request, dispatch } = useRequest();
-  const [language, setLanguage] = (0, import_react35.useState)("json");
+  const [language, setLanguage] = (0, import_react36.useState)("json");
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {
-      css: import_react34.css`
+      css: import_react35.css`
         background: var(--white);
       `,
       children: [
@@ -3581,7 +3675,7 @@ function RequestBody() {
           RequestTypeContainer,
           {
             bgColor: "var(--gray-100)",
-            css: import_react34.css`
+            css: import_react35.css`
           padding: var(--spacing-sm) var(--spacing-base);
         `,
             children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -3688,7 +3782,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 })
@@ -3787,12 +3882,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);
@@ -3802,8 +3894,8 @@ function RequestParameters({ disableVariables }) {
 }
 
 // src/components/Request/RequestUrl.tsx
-var import_react36 = require("@emotion/react");
-var import_react37 = require("react");
+var import_react37 = require("@emotion/react");
+var import_react38 = require("react");
 
 // src/components/Request/urlEncodeRequestParameter.ts
 function urlEncodeRequestUrl(url, varValues) {
@@ -3829,7 +3921,7 @@ function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
   const { request } = useRequest();
-  const mergedParameters = (0, import_react37.useMemo)(() => {
+  const mergedParameters = (0, import_react38.useMemo)(() => {
     var _a2;
     if (!((_a2 = request.baseRequest) == null ? void 0 : _a2.parameters)) {
       return request.parameters;
@@ -3839,7 +3931,7 @@ function RequestUrl() {
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "small",
     {
-      css: import_react36.css`
+      css: import_react37.css`
         display: inline-block;
         margin-bottom: var(--spacing-xs);
         word-break: break-word;
@@ -3899,9 +3991,6 @@ function RequestUrlInput(props) {
       onChange: (value) => {
         dispatch({ type: "setRelativeUrl", relativeUrl: value });
       },
-      onVariableClick: (selectedValue) => {
-        dispatch({ type: "setRelativeUrl", relativeUrl: request.relativeUrl.concat(selectedValue) });
-      },
       showAddVariableMenuOption: true
     }
   );
@@ -4054,12 +4143,12 @@ var import_design_system23 = require("@uniformdev/design-system");
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 var import_mesh_sdk = require("@uniformdev/mesh-sdk");
-var import_react38 = require("react");
+var import_react39 = require("react");
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
-  const [error, setError] = (0, import_react38.useState)();
-  const [sdk, setSdk] = (0, import_react38.useState)();
-  const initializationInProgress = (0, import_react38.useRef)(false);
-  (0, import_react38.useEffect)(
+  const [error, setError] = (0, import_react39.useState)();
+  const [sdk, setSdk] = (0, import_react39.useState)();
+  const initializationInProgress = (0, import_react39.useRef)(false);
+  (0, import_react39.useEffect)(
     () => {
       if (typeof window === "undefined" || sdk) {
         return;
@@ -4117,7 +4206,7 @@ var MeshApp = ({
 };
 
 // src/components/ObjectSearch/DataRefreshButton.tsx
-var import_react39 = require("@emotion/react");
+var import_react40 = require("@emotion/react");
 var import_design_system24 = require("@uniformdev/design-system");
 var import_jsx_runtime45 = require("@emotion/react/jsx-runtime");
 var DataRefreshButton = ({
@@ -4130,7 +4219,7 @@ var DataRefreshButton = ({
     !isLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       import_design_system24.LoadingIndicator,
       {
-        css: import_react39.css`
+        css: import_react40.css`
             ${isLoading ? "opacity: 0.2;" : void 0}
           `
       }
@@ -4158,12 +4247,12 @@ var ObjectSearchContainer = ({
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
 var import_design_system26 = require("@uniformdev/design-system");
-var import_react42 = require("react");
+var import_react43 = require("react");
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_jsx_runtime47 = require("@emotion/react/jsx-runtime");
-var ObjectSearchContext = (0, import_react40.createContext)({
+var ObjectSearchContext = (0, import_react41.createContext)({
   onSetQuery: () => {
   },
   onSelectItem: () => {
@@ -4180,14 +4269,14 @@ var ObjectSearchContext = (0, import_react40.createContext)({
   }
 });
 var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
-  const [query, setQuery] = (0, import_react40.useState)({
+  const [query, setQuery] = (0, import_react41.useState)({
     contentType: "",
     keyword: ""
   });
-  const querySearchDeferred = (0, import_react40.useDeferredValue)(query);
-  const [selectedItems, setSelectedItems] = (0, import_react40.useState)(currentlySelectedItems != null ? currentlySelectedItems : []);
-  const [list, setList] = (0, import_react40.useState)({});
-  const onSetQuery = (0, import_react40.useCallback)(
+  const querySearchDeferred = (0, import_react41.useDeferredValue)(query);
+  const [selectedItems, setSelectedItems] = (0, import_react41.useState)(currentlySelectedItems != null ? currentlySelectedItems : []);
+  const [list, setList] = (0, import_react41.useState)({});
+  const onSetQuery = (0, import_react41.useCallback)(
     (value) => {
       if (Array.isArray(value.contentType) && value.contentType.length > 0) {
         return setQuery({
@@ -4199,7 +4288,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
     },
     [setQuery]
   );
-  const onSelectItem = (0, import_react40.useCallback)(
+  const onSelectItem = (0, import_react41.useCallback)(
     (selectedResult) => {
       if (Array.isArray(selectedResult)) {
         setSelectedItems(selectedResult);
@@ -4213,10 +4302,10 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
     },
     [setSelectedItems, selectedItems]
   );
-  const onRemoveAllSelectedItems = (0, import_react40.useCallback)(() => {
+  const onRemoveAllSelectedItems = (0, import_react41.useCallback)(() => {
     setSelectedItems([]);
   }, [setSelectedItems]);
-  const onSetList = (0, import_react40.useCallback)(
+  const onSetList = (0, import_react41.useCallback)(
     (value) => {
       setList(value);
     },
@@ -4239,13 +4328,13 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
   );
 };
 var useObjectSearchContext = () => {
-  const contextValues = (0, import_react40.useContext)(ObjectSearchContext);
+  const contextValues = (0, import_react41.useContext)(ObjectSearchContext);
   return { ...contextValues };
 };
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
-var import_react41 = require("@emotion/react");
-var ObjectSearchFilterContainerLabel = import_react41.css`
+var import_react42 = require("@emotion/react");
+var ObjectSearchFilterContainerLabel = import_react42.css`
   align-items: center;
   display: flex;
   font-size: var(--fs-sm);
@@ -4253,14 +4342,14 @@ var ObjectSearchFilterContainerLabel = import_react41.css`
   line-height: 1rem;
   margin-bottom: var(--spacing-sm);
 `;
-var ObjectSearchFilterContainer = import_react41.css`
+var ObjectSearchFilterContainer = import_react42.css`
   display: grid;
   gap: var(--spacing-base);
 `;
-var ObjectSearchFilterDropdownAndTextSearch = import_react41.css`
+var ObjectSearchFilterDropdownAndTextSearch = import_react42.css`
   grid-template-columns: 0.5fr 1fr;
 `;
-var ObjectSearchFilterGrid = (gridColumns) => import_react41.css`
+var ObjectSearchFilterGrid = (gridColumns) => import_react42.css`
   display: grid;
   grid-template-columns: ${gridColumns};
   gap: var(--spacing-base);
@@ -4277,7 +4366,7 @@ var ObjectSearchFilter = ({
   selectOptions
 }) => {
   const { query, onSetQuery } = useObjectSearchContext();
-  const [searchState, setSearchState] = (0, import_react42.useState)({
+  const [searchState, setSearchState] = (0, import_react43.useState)({
     contentType: "",
     keyword: ""
   });
@@ -4331,9 +4420,9 @@ var ObjectSearchFilterContainer2 = ({ label, children }) => {
 var import_design_system28 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
-var import_react43 = require("@emotion/react");
+var import_react44 = require("@emotion/react");
 var import_design_system27 = require("@uniformdev/design-system");
-var ObjectListItemContainer = import_react43.css`
+var ObjectListItemContainer = import_react44.css`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -4346,7 +4435,7 @@ var ObjectListItemContainer = import_react43.css`
     display: none;
   }
 `;
-var ObjectListItemLoading = import_react43.css`
+var ObjectListItemLoading = import_react44.css`
   animation: ${import_design_system27.skeletonLoading} 1s linear infinite alternate;
   border-color: transparent;
   min-height: 42px;
@@ -4370,31 +4459,31 @@ var ObjectListItemLoading = import_react43.css`
     width: 1rem;
   }
 `;
-var ObjectListItemHeadingGroup = import_react43.css`
+var ObjectListItemHeadingGroup = import_react44.css`
   align-items: center;
   display: grid;
 `;
-var ObjectListItemTitle = import_react43.css`
+var ObjectListItemTitle = import_react44.css`
   color: var(--brand-secondary-1);
   display: block;
   font-size: var(--fs-sm);
 `;
-var ObjectListItemSubtitle = import_react43.css`
+var ObjectListItemSubtitle = import_react44.css`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectListItemInfoContainer = import_react43.css`
+var ObjectListItemInfoContainer = import_react44.css`
   align-items: center;
   display: flex;
   justify-content: center;
 `;
-var ObjectListItemControlledContent = import_react43.css`
+var ObjectListItemControlledContent = import_react44.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectListItemUnControlledContent = import_react43.css`
+var ObjectListItemUnControlledContent = import_react44.css`
   margin-top: var(--spacing-sm);
   grid-column: 1 / -1;
 `;
@@ -4445,9 +4534,9 @@ var import_design_system30 = require("@uniformdev/design-system");
 var import_timeago3 = require("timeago.js");
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
-var import_react44 = require("@emotion/react");
+var import_react45 = require("@emotion/react");
 var import_design_system29 = require("@uniformdev/design-system");
-var ButtonStyles = import_react44.css`
+var ButtonStyles = import_react45.css`
   ${import_design_system29.button}
   background: transparent;
   border: 1px solid var(--brand-secondary-1);
@@ -4474,7 +4563,7 @@ var ButtonStyles = import_react44.css`
     text-decoration: none;
   }
 `;
-var ButtonIcon = import_react44.css`
+var ButtonIcon = import_react45.css`
   width: 1rem;
   height: 1rem;
 `;
@@ -4503,8 +4592,8 @@ var LinkButton = ({
 };
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
-var import_react45 = require("@emotion/react");
-var ObjectSearchResultItemContainer = import_react45.css`
+var import_react46 = require("@emotion/react");
+var ObjectSearchResultItemContainer = import_react46.css`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -4520,7 +4609,7 @@ var ObjectSearchResultItemContainer = import_react45.css`
     }
   }
 `;
-var ObjectSearchDragHandle = import_react45.css`
+var ObjectSearchDragHandle = import_react46.css`
   border-left: 2px dotted var(--gray-300);
   border-right: 2px dotted var(--gray-300);
   position: absolute;
@@ -4529,35 +4618,35 @@ var ObjectSearchDragHandle = import_react45.css`
   transition: opacity var(--duration-fast) var(--timing-ease-out);
   opacity: 0;
 `;
-var ObjectSearchResultItemSubtitle = import_react45.css`
+var ObjectSearchResultItemSubtitle = import_react46.css`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectSearchResultItemTitle = import_react45.css`
+var ObjectSearchResultItemTitle = import_react46.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: flex;
   gap: var(--spacing-xs);
 `;
-var ObjectSearchResultItemTimeStamp = import_react45.css`
+var ObjectSearchResultItemTimeStamp = import_react46.css`
   color: var(--gray-500);
   font-size: var(--fs-xs);
 `;
-var ObjectSearchAuthorStateGroup = import_react45.css`
+var ObjectSearchAuthorStateGroup = import_react46.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchUpdateGroup = import_react45.css`
+var ObjectSearchUpdateGroup = import_react46.css`
   display: grid;
 `;
-var ObjectSearchContentContainer = import_react45.css`
+var ObjectSearchContentContainer = import_react46.css`
   display: flex;
   gap: var(--spacing-base);
 `;
-var ObjectSearchImage = import_react45.css`
+var ObjectSearchImage = import_react46.css`
   width: 56px;
   object-fit: contain;
 `;
@@ -4625,22 +4714,22 @@ var import_design_system31 = require("@uniformdev/design-system");
 var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
 
 // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
-var import_react46 = require("@emotion/react");
-var ObjectSearchResultListContainer = import_react46.css`
+var import_react47 = require("@emotion/react");
+var ObjectSearchResultListContainer = import_react47.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: space-between;
 `;
-var ObjectSearchDragContainer = import_react46.css`
+var ObjectSearchDragContainer = import_react47.css`
   margin: 0 0 var(--spacing-sm);
 `;
-var ObjectSearchResultListCounterContainer = import_react46.css`
+var ObjectSearchResultListCounterContainer = import_react47.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchResultListTitle = import_react46.css`
+var ObjectSearchResultListTitle = import_react47.css`
   font-weight: var(--fw-bold);
   line-height: 1;
 `;
@@ -4715,7 +4804,7 @@ var ObjectSearchResultList = ({
 
 // src/components/ObjectSearch/QueryFilter.tsx
 var import_design_system32 = require("@uniformdev/design-system");
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_jsx_runtime54 = require("@emotion/react/jsx-runtime");
 var QueryFilter = ({
   requireContentType,
@@ -4746,7 +4835,7 @@ var QueryFilter = ({
 }) => {
   var _a, _b;
   const { query, onSetQuery } = useObjectSearchContext();
-  const [queryState, setQueryState] = (0, import_react47.useState)({
+  const [queryState, setQueryState] = (0, import_react48.useState)({
     contentType: "",
     keyword: "",
     count: countValue != null ? countValue : 5,
@@ -4757,7 +4846,7 @@ var QueryFilter = ({
     setQueryState((prev) => ({ ...prev, ...value }));
     onSetQuery({ ...query, ...value });
   };
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     onSetQuery(queryState);
   }, [onSetQuery, queryState]);
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("fieldset", { children: [
@@ -4841,12 +4930,6 @@ var QueryFilter = ({
   ] });
 };
 
-// src/hooks/useUniformMeshLocation.ts
-function useUniformMeshLocation() {
-  const { location } = useUniformMeshLocationContext();
-  return location;
-}
-
 // src/hooks/index.ts
 var import_design_system33 = require("@uniformdev/design-system");
 
@@ -4882,7 +4965,6 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   InputSelect,
   InputToggle,
   InputVariables,
-  KeywordSearchInput,
   Label,
   LinkButton,
   LoadingIndicator,
@@ -4938,10 +5020,6 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   TextVariableRenderer,
   Textarea,
   Theme,
-  UniformMeshLocationContext,
-  UniformMeshLocationContextProvider,
-  UniformMeshSdkContext,
-  UniformMeshSdkContextProvider,
   VariableEditor,
   VariablesList,
   VariablesProvider,
@@ -5010,7 +5088,6 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   selectedItemTitle,
   urlEncodeRequestParameter,
   urlEncodeRequestUrl,
-  useInitializeUniformMeshSdk,
   useMeshLocation,
   useObjectSearchContext,
   useParameterShell,
@@ -5019,10 +5096,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   useRequest,
   useRequestHeader,
   useRequestParameter,
-  useUniformMeshLocation,
-  useUniformMeshLocationContext,
   useUniformMeshSdk,
-  useUniformMeshSdkContext,
   useVariables,
   variablesToList
 });