@uniformdev/mesh-sdk-react 19.79.1-alpha.13 → 19.79.1-alpha.25

package/dist/index.mjs

@@ -2933,9 +2933,9 @@ import { LoadingIndicator as LoadingIndicator2 } from "@uniformdev/design-system
 import {
   $getNearestNodeFromDOMNode,
   $getNodeByKey as $getNodeByKey2,
-  $getSelection,
+  $getSelection as $getSelection2,
   $isDecoratorNode,
-  $isNodeSelection,
+  $isNodeSelection as $isNodeSelection2,
   $isRangeSelection,
   COMMAND_PRIORITY_EDITOR,
   COMMAND_PRIORITY_LOW,
@@ -2945,7 +2945,7 @@ import {
   KEY_BACKSPACE_COMMAND,
   KEY_DELETE_COMMAND
 } from "lexical";
-import { useCallback as useCallback2, useEffect as useEffect8 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect8 } from "react";
 
 // src/components/Variables/util/prettifyBindExpression.tsx
 function prettifyBindExpression(bindExpression) {
@@ -3026,12 +3026,15 @@ import { dequal as dequal2 } from "dequal/lite";
 import {
   $createTextNode,
   $getNodeByKey,
+  $getSelection,
   $insertNodes,
+  $isNodeSelection,
   $nodesOfType as $nodesOfType2,
+  $setSelection,
   COMMAND_PRIORITY_NORMAL,
   createCommand
 } from "lexical";
-import { useCallback, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef10, useState as useState10 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef10, useState as useState10 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Variables/toolbox/SelectVariableMenu.styles.ts
@@ -3063,12 +3066,56 @@ var variablesTipText = css18`
   padding: 0 var(--spacing-sm);
 `;
 
-// src/components/Variables/useVariableEditor.ts
-import { useEffect as useEffect6, useState as useState9 } from "react";
-
 // src/components/Variables/VariablesProvider.tsx
 import mitt from "mitt";
-import { createContext as createContext3, useContext as useContext5, useMemo as useMemo7, useState as useState8 } from "react";
+import { createContext as createContext3, useContext as useContext5, useMemo as useMemo7, useState as useState9 } from "react";
+
+// src/components/Variables/util/useVariableEditTransaction.ts
+import { useCallback, useEffect as useEffect6, useState as useState8 } from "react";
+function useVariableEditTransaction({
+  events,
+  dispatch,
+  isEditing,
+  variables
+}) {
+  const [isEditingBinding, setIsEditingBinding] = useState8();
+  useEffect6(() => {
+    if (!isEditingBinding) {
+      return;
+    }
+    const fn = (e) => {
+      isEditingBinding.resolve(e);
+      setIsEditingBinding(void 0);
+    };
+    events.on("editCompleted", fn);
+    return () => events.off("editCompleted", fn);
+  }, [events, isEditingBinding, variables]);
+  useEffect6(() => {
+    if (!isEditing) {
+      if (isEditingBinding) {
+        isEditingBinding.resolve({ canceled: true });
+      }
+      setIsEditingBinding(void 0);
+    }
+  }, [isEditing, isEditingBinding]);
+  return useCallback(
+    async function editVariableTxn(variable, context) {
+      if (isEditingBinding) {
+        dispatch({ type: "cancelEdit" });
+      }
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          setIsEditingBinding({
+            resolve,
+            variable
+          });
+          dispatch({ type: "edit", variable, context });
+        });
+      });
+    },
+    [dispatch, isEditingBinding]
+  );
+}
 
 // src/components/Variables/VariableEditor.tsx
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -3099,9 +3146,10 @@ function VariableEditor({
   variable,
   onSubmit,
   onCancel,
+  showDisplayName,
   disableMeshTip
 }) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const { variables } = useVariables();
   const currentVariable = variables[variable];
   const { register, handleSubmit, formState } = useForm({
@@ -3156,6 +3204,16 @@ function VariableEditor({
           }
         }
       ),
+      showDisplayName ? /* @__PURE__ */ jsx31(
+        Input2,
+        {
+          ...register("displayName"),
+          label: "Display name",
+          autoComplete: "off",
+          caption: "This is the name that will be displayed in the UI. If not provided, the name will be used.",
+          errorMessage: (_f = formState.errors.helpText) == null ? void 0 : _f.message
+        }
+      ) : null,
       /* @__PURE__ */ jsx31(
         Input2,
         {
@@ -3163,7 +3221,7 @@ function VariableEditor({
           label: "Help Text",
           caption: "Appears when entering a value for this variable.",
           autoComplete: "off",
-          errorMessage: (_f = formState.errors.helpText) == null ? void 0 : _f.message
+          errorMessage: (_g = formState.errors.helpText) == null ? void 0 : _g.message
         }
       ),
       /* @__PURE__ */ jsx31(
@@ -3172,7 +3230,7 @@ function VariableEditor({
           ...register("default"),
           label: "Default Value",
           autoComplete: "off",
-          errorMessage: (_g = formState.errors.default) == null ? void 0 : _g.message
+          errorMessage: (_h = formState.errors.default) == null ? void 0 : _h.message
         }
       ),
       /* @__PURE__ */ jsx31(HorizontalRhythm, { justify: "space-between", children: /* @__PURE__ */ jsxs16(HorizontalRhythm, { gap: "sm", children: [
@@ -3209,8 +3267,8 @@ function VariablesProvider({
   children,
   knownUndefinedValues = {}
 }) {
-  const [editing, setEditing] = useState8();
-  const [editingContext, setEditingContext] = useState8();
+  const [editing, setEditing] = useState9();
+  const [editingContext, setEditingContext] = useState9();
   const events = useMemo7(
     () => mitt(),
     []
@@ -3257,16 +3315,23 @@ function VariablesProvider({
     }),
     [onChange, readOnly, value]
   );
+  const editVariableTxn = useVariableEditTransaction({
+    events,
+    dispatch: valueBasedContextValue.dispatch,
+    isEditing: typeof editing !== "undefined",
+    variables: value
+  });
   const contextValue = useMemo7(() => {
     return {
       ...valueBasedContextValue,
+      editVariableTxn,
       isEditing: typeof editing !== "undefined",
       events,
       canDispatch: true,
       knownUndefinedValues,
       isLoading: !!isLoading
     };
-  }, [editing, events, knownUndefinedValues, valueBasedContextValue, isLoading]);
+  }, [valueBasedContextValue, editVariableTxn, editing, events, knownUndefinedValues, isLoading]);
   return /* @__PURE__ */ jsxs17(VariablesContext.Provider, { value: contextValue, children: [
     children,
     typeof editing !== "undefined" ? /* @__PURE__ */ jsx32(
@@ -3305,6 +3370,9 @@ function useVariables(returnEmptyWithoutProvider = false) {
         dispatch: () => {
           throw new Error("No VariablesProvider present");
         },
+        editVariableTxn: async () => {
+          throw new Error("No VariablesProvider present");
+        },
         events: mitt(),
         isEditing: false,
         variables: {},
@@ -3327,39 +3395,13 @@ function flattenVariables(variables) {
 
 // src/components/Variables/useVariableEditor.ts
 function useVariableEditor() {
-  const { variables, events, canDispatch, dispatch, isEditing } = useVariables(true);
-  const [isEditingBinding, setIsEditingBinding] = useState9();
-  useEffect6(() => {
-    if (!canDispatch || !isEditingBinding) {
-      return;
-    }
-    const fn = (e) => {
-      isEditingBinding.resolve(e);
-      setIsEditingBinding(void 0);
-    };
-    events.on("editCompleted", fn);
-    return () => events.off("editCompleted", fn);
-  }, [canDispatch, events, isEditingBinding, variables]);
-  useEffect6(() => {
-    if (!isEditing) {
-      setIsEditingBinding(void 0);
-    }
-  }, [isEditing]);
+  const { editVariableTxn, canDispatch } = useVariables(true);
   return {
     async editVariable(variable, context) {
       if (!canDispatch) {
         throw new Error("Cannot edit variable. VariablesProvider is not mounted.");
       }
-      if (isEditingBinding) {
-        throw new Error("Cannot edit variable. Another variable is already being edited.");
-      }
-      return new Promise((resolve) => {
-        setIsEditingBinding({
-          resolve,
-          variable
-        });
-        dispatch({ type: "edit", variable, context });
-      });
+      return editVariableTxn(variable, context);
     }
   };
 }
@@ -3456,7 +3498,7 @@ function useVariablesMenu({
   getEditorContext
 }) {
   const { variables, canDispatch, readOnly } = useVariables(true);
-  const canEditVariable = useCallback(
+  const canEditVariable = useCallback2(
     (name, variable) => (
       // name === '' means new var. Add var perms computed by menu options.
       name === "" || canDispatch && enableEditingVariables && !readOnly && !(variable == null ? void 0 : variable.readOnly)
@@ -3486,7 +3528,7 @@ function useVariablesMenu({
     );
     return { menuOptions: menuOptions2, groupedVariables: groupedVariables2 };
   }, [variables, filterVariable, getEditorContext, canAddVariable, showAddVariableMenuOption]);
-  const onSelect = useCallback(
+  const onSelect = useCallback2(
     ({ queryString, value, nodeToReplace, editor, overwriteExistingValue }) => {
       if (value === ADD_VARIABLE_OPTION) {
         editor.update(() => {
@@ -3536,7 +3578,7 @@ function VariablesPlugin({
   const { variables, dispatch, isEditing, canDispatch, readOnly, knownUndefinedValues, isLoading } = useVariables(true);
   const variablesRef = useRef10({ variables, knownUndefinedValues, isLoading });
   variablesRef.current = { variables, knownUndefinedValues, isLoading };
-  const canEditVariable = useCallback(
+  const canEditVariable = useCallback2(
     (name, variable) => (
       // name === '' means new var. Add var perms computed by menu options.
       name === "" || canDispatch && enableEditingVariables && !readOnly && !(variable == null ? void 0 : variable.readOnly)
@@ -3570,7 +3612,7 @@ function VariablesPlugin({
       )
     };
   }, [queryString, groupedVariables, menuOptions]);
-  const onSelectOption = useCallback(
+  const onSelectOption = useCallback2(
     (selectedOption, nodeToReplace, closeMenu) => {
       onSelect({
         queryString: queryString != null ? queryString : void 0,
@@ -3597,6 +3639,15 @@ function VariablesPlugin({
                   editor.dispatchCommand(DISCONNECT_VARIABLE_COMMAND, { sourceKey });
                   return;
                 }
+                editor.update(() => {
+                  const selection = $getSelection();
+                  if ($isNodeSelection(selection)) {
+                    const selectedNodes = selection.getNodes();
+                    if (selectedNodes.every((node) => $isVariableNode(node))) {
+                      $setSelection(null);
+                    }
+                  }
+                });
                 return;
               }
               editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {
@@ -3704,7 +3755,7 @@ function VariablesPlugin({
     editVariable,
     replaceValueOnVariableInsert
   ]);
-  const updateExistingNodeIfChanged = useCallback(
+  const updateExistingNodeIfChanged = useCallback2(
     (variableNode) => {
       var _a, _b, _c;
       const targetVar = variablesRef.current.variables[variableNode.reference];
@@ -3903,9 +3954,9 @@ function VariableNodeComponent({
   const [editor] = useLexicalComposerContext3();
   const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
   const readOnly = !editor.isEditable();
-  const onDelete = useCallback2(
+  const onDelete = useCallback3(
     (event) => {
-      if (isSelected && $isNodeSelection($getSelection())) {
+      if (isSelected && $isNodeSelection2($getSelection2())) {
         event.preventDefault();
         const node = $getNodeByKey2(nodeKey);
         if ($isVariableNode(node)) {
@@ -3928,8 +3979,8 @@ function VariableNodeComponent({
       editor.registerCommand(
         KEY_ARROW_LEFT_COMMAND,
         (event) => {
-          const selection = $getSelection();
-          if ($isNodeSelection(selection)) {
+          const selection = $getSelection2();
+          if ($isNodeSelection2(selection)) {
             const nodes = selection.getNodes();
             if (nodes.length > 0) {
               event.preventDefault();
@@ -3955,8 +4006,8 @@ function VariableNodeComponent({
       editor.registerCommand(
         KEY_ARROW_RIGHT_COMMAND,
         (event) => {
-          const selection = $getSelection();
-          if ($isNodeSelection(selection) && !$isTargetWithinDecorator(event.target)) {
+          const selection = $getSelection2();
+          if ($isNodeSelection2(selection) && !$isTargetWithinDecorator(event.target)) {
             const nodes = selection.getNodes();
             if (nodes.length > 0) {
               event.preventDefault();
@@ -4004,7 +4055,14 @@ function $isTargetWithinDecorator(target) {
 }
 
 // src/components/Variables/InputVariables.tsx
-import { Caption, ErrorMessage, InfoMessage, WarningMessage } from "@uniformdev/design-system";
+import { css as css24 } from "@emotion/react";
+import {
+  Caption,
+  ErrorMessage,
+  HorizontalRhythm as HorizontalRhythm4,
+  InfoMessage,
+  WarningMessage
+} from "@uniformdev/design-system";
 import { useState as useState13 } from "react";
 import { v4 as v42 } from "uuid";
 
@@ -4025,7 +4083,7 @@ function EditorRefPlugin({
 // src/components/Variables/composer/PasteTransformerPlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister as mergeRegister3 } from "@lexical/utils";
-import { $getSelection as $getSelection2, $isRangeSelection as $isRangeSelection2, COMMAND_PRIORITY_HIGH, PASTE_COMMAND } from "lexical";
+import { $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection2, COMMAND_PRIORITY_HIGH, PASTE_COMMAND } from "lexical";
 import { useEffect as useEffect9 } from "react";
 function PasteTransformerPlugin({ transformPaste }) {
   const [editor] = useLexicalComposerContext5();
@@ -4035,7 +4093,7 @@ function PasteTransformerPlugin({ transformPaste }) {
         PASTE_COMMAND,
         (event) => {
           var _a;
-          const selection = $getSelection2();
+          const selection = $getSelection3();
           const pastedText = (_a = event.clipboardData) == null ? void 0 : _a.getData("text/plain");
           if (pastedText && transformPaste && $isRangeSelection2(selection)) {
             const result = transformPaste(pastedText);
@@ -4065,32 +4123,41 @@ var menuBtn2 = css21`
   transform: translateY(-50%);
 `;
 var input = css21`
+  --input-padding: 12px var(--spacing-base) 12px var(--spacing-sm);
   appearance: none;
   background-color: var(--white);
-  border: 1px solid var(--gray-200);
+  border: 1px solid var(--gray-300);
   border-radius: var(--rounded-sm);
   color: var(--gray-700);
-  padding-block: var(--spacing-base);
-  padding-left: var(--spacing-base);
-  padding-right: var(--spacing-lg);
-  line-height: 1.75;
+  padding: var(--input-padding);
+  min-height: 50px;
   width: 100%;
   position: relative;
   transition: background var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
-    color var(--duration-fast) var(--timing-ease-out);
+    color var(--duration-fast) var(--timing-ease-out), box-shadow var(--duration-fast) var(--timing-ease-out);
+
+  &::placeholder {
+    color: var(--gray-400);
+  }
+
+  &:hover {
+    border-color: var(--accent-dark-hover);
+  }
 
+  &[data-focus='true'],
   &:focus,
   &:focus-within {
-    border-color: var(--typography-base);
-    box-shadow: none;
+    border-color: var(--accent-dark-active);
+    box-shadow: var(--elevation-100);
     outline: none;
   }
 
+  &[data-disabled='true'],
   &:disabled,
   &:disabled::placeholder {
     cursor: not-allowed;
-    color: var(--gray-400);
+    color: var(--gray-300);
     border-color: var(--gray-300);
   }
 
@@ -4120,6 +4187,99 @@ var placeholderCompact = css21`
   inset: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base);
 `;
 
+// src/components/Variables/styles/ParameterVariables.styles.ts
+import { css as css22 } from "@emotion/react";
+import { scrollbarStyles as scrollbarStyles3 } from "@uniformdev/design-system";
+var variableBindButton = css22`
+  align-items: center;
+  border: none;
+  border-radius: var(--rounded-base);
+  background: none;
+  display: flex;
+  height: 1.2rem;
+  padding: var(--spacing-2xs);
+  transition: background var(--duration-fast) var(--timing-ease-out),
+    color var(--duration-fast) var(--timing-ease-out);
+  width: 1.2rem;
+
+  &:hover,
+  &[aria-pressed='true']:not(:disabled) {
+    background: var(--brand-secondary-3);
+    color: var(--white);
+  }
+
+  &[aria-disabled='true'] {
+    background: none;
+    color: currentColor;
+  }
+
+  // fixes menu resizing issue within iframes
+  // see https://linear.app/uniform/issue/UNI-3068/mesh-integration-resizing-with-menus
+  + [role='menu'] {
+    max-height: unset;
+  }
+`;
+var input2 = css22`
+  display: block;
+  appearance: none;
+  box-sizing: border-box;
+  background: var(--white);
+  border: 1px solid var(--gray-200);
+  border-radius: var(--rounded-sm);
+  color: var(--gray-700);
+  font-size: var(--fs-sm);
+  line-height: 1.5;
+  min-height: 2rem;
+  padding: var(--spacing-sm);
+  width: 100%;
+  position: relative;
+  white-space: normal;
+  transition-property: background, border-color, color, box-shadow, border-radius;
+  transition-duration: var(--duration-fast);
+  transition-timing-function: var(--timing-ease-out);
+
+  &::placeholder {
+    color: var(--gray-400);
+  }
+
+  &:focus,
+  &:focus-within {
+    border-radius: var(--rounded-sm);
+    box-shadow: var(--elevation-100);
+    border: 1px solid var(--accent-dark-active);
+    outline: none;
+  }
+  &:hover {
+    border: 1px solid var(--accent-dark-hover);
+  }
+
+  &:disabled,
+  &:disabled::placeholder,
+  &:disabled:hover {
+    border-radius: var(--rounded-sm);
+    cursor: not-allowed;
+    color: var(--gray-400);
+  }
+
+  &[readonly],
+  &[contenteditable='false'] {
+    cursor: not-allowed;
+    color: var(--gray-400);
+  }
+
+  > p {
+    margin: 0;
+  }
+`;
+var inputMultiLine = (lines) => css22`
+  ${scrollbarStyles3}
+  // 1.5 = line height, spacing-sm = top and bottom padding + spacing-xs to give a slight increase in height
+  // as the text looked to close to the bottom of the input
+  height: calc(${lines * 1.5}em + var(--spacing-sm) + var(--spacing-xs));
+  resize: vertical;
+  overflow: auto;
+`;
+
 // src/components/Variables/toolbox/InputVariablesProvider.tsx
 import * as React10 from "react";
 import { useMemo as useMemo9 } from "react";
@@ -4198,15 +4358,15 @@ function useInputVariablesState({
 }
 
 // src/components/Variables/toolbox/VariableField.styles.ts
-import { css as css22 } from "@emotion/react";
-var labelText = css22`
+import { css as css23 } from "@emotion/react";
+var labelText = css23`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var variableBindButton = css22`
+var variableBindButton2 = css23`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -4249,6 +4409,7 @@ function SelectVariableMenu({
   tip,
   getEditorContext,
   menuTooltip = "Insert variable",
+  portal,
   filterVariable
 }) {
   const { variables, canDispatch, readOnly } = useVariables(true);
@@ -4263,8 +4424,8 @@ function SelectVariableMenu({
   return /* @__PURE__ */ jsxs19(
     Menu2,
     {
-      placement: "bottom-start",
-      withoutPortal: true,
+      placement: portal ? "bottom-end" : "bottom-start",
+      portal,
       menuTrigger: /* @__PURE__ */ jsx35(
         "button",
         {
@@ -4368,7 +4529,7 @@ function VariableField({
     VariablesComposerVariableMenu,
     {
       ...selectVariableMenuOptions,
-      buttonCss: [variableBindButton, selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.buttonCss],
+      buttonCss: [variableBindButton2, selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.buttonCss],
       buttonProps: isActive ? { "aria-pressed": "true" } : void 0
     }
   ) : null;
@@ -4519,8 +4680,8 @@ import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
 import { mergeRegister as mergeRegister4, objectKlassEquals } from "@lexical/utils";
 import {
-  $getSelection as $getSelection3,
-  $isNodeSelection as $isNodeSelection2,
+  $getSelection as $getSelection4,
+  $isNodeSelection as $isNodeSelection3,
   $isRangeSelection as $isRangeSelection3,
   COMMAND_PRIORITY_HIGH as COMMAND_PRIORITY_HIGH2,
   COPY_COMMAND,
@@ -4530,7 +4691,7 @@ import {
 import { useEffect as useEffect13 } from "react";
 import { Fragment as Fragment9, jsx as jsx39, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
 function VariablesComposerInput({
-  css: css37,
+  css: css38,
   placeholder,
   ...contentEditableProps
 }) {
@@ -4570,10 +4731,10 @@ function RichishCopyAndPastePlugin() {
             objectKlassEquals(event, ClipboardEvent) ? event : null
           );
           editor.update(() => {
-            const selection = $getSelection3();
+            const selection = $getSelection4();
             if ($isRangeSelection3(selection)) {
               selection.removeText();
-            } else if ($isNodeSelection2(selection)) {
+            } else if ($isNodeSelection3(selection)) {
               selection.getNodes().forEach((node) => node.remove());
             }
           });
@@ -4584,12 +4745,12 @@ function RichishCopyAndPastePlugin() {
       editor.registerCommand(
         PASTE_COMMAND2,
         (event) => {
-          const selection = $getSelection3();
+          const selection = $getSelection4();
           if ($isRangeSelection3(selection)) {
             event.preventDefault();
             editor.update(
               () => {
-                const selection2 = $getSelection3();
+                const selection2 = $getSelection4();
                 const clipboardData = event instanceof InputEvent || event instanceof KeyboardEvent ? null : event.clipboardData;
                 if (clipboardData != null && $isRangeSelection3(selection2)) {
                   const lexicalString = clipboardData.getData("application/x-lexical-editor");
@@ -4633,6 +4794,7 @@ function InputVariables(props) {
     value,
     enableEditingVariables,
     disableInlineMenu,
+    showMenuPosition,
     onChange,
     transformPaste,
     showAddVariableMenuOption,
@@ -4649,7 +4811,8 @@ function InputVariables(props) {
     disabled,
     editorRef,
     filterVariable,
-    styleVariant = "default"
+    styleVariant = "default",
+    renderMenuInPortal
   } = props;
   const [finalId] = useState13(id != null ? id : () => v42());
   const { dispatch, canDispatch, isEditing } = useVariables(true);
@@ -4665,33 +4828,58 @@ function InputVariables(props) {
       },
       css: disabled ? inputDisabled : "",
       children: [
-        useInputWithNoVariables ? inputWhenNoVariables : /* @__PURE__ */ jsx40(
-          InputVariablesOverlayMenu,
+        /* @__PURE__ */ jsxs23(
+          HorizontalRhythm4,
           {
-            ...sharedMenuProps,
-            disabled: disableVariablesForReals || disableInlineMenu === true || disableInlineMenu === "by-input",
-            replaceValueOnVariableInsert: useInputWithNoVariables,
-            useInputWhenNoVariables: useInputWithNoVariables,
-            children: /* @__PURE__ */ jsx40(
-              VariablesComposerInput,
-              {
-                id: finalId,
-                "aria-label": ariaLabel,
-                "data-testid": dataTestId ? dataTestId : "input-container",
-                "data-text-value": value,
-                css: [input, styleVariant === "compact" ? inputCompact : null],
-                placeholder: placeholder ? /* @__PURE__ */ jsx40(
-                  Caption,
-                  {
-                    css: [
-                      placeholderCaption,
-                      styleVariant === "compact" ? placeholderCompact : null
-                    ],
-                    children: placeholder
-                  }
-                ) : void 0
-              }
-            )
+            align: "center",
+            gap: "xs",
+            css: css24`
+          & > div:first-child {
+            flex-grow: 1;
+          }
+        `,
+            children: [
+              useInputWithNoVariables ? inputWhenNoVariables : /* @__PURE__ */ jsx40(
+                InputVariablesOverlayMenu,
+                {
+                  ...sharedMenuProps,
+                  disabled: disableVariablesForReals || showMenuPosition && showMenuPosition !== "label" || disableInlineMenu === true || disableInlineMenu === "by-input",
+                  portal: renderMenuInPortal,
+                  replaceValueOnVariableInsert: useInputWithNoVariables,
+                  useInputWhenNoVariables: useInputWithNoVariables,
+                  children: /* @__PURE__ */ jsx40(
+                    VariablesComposerInput,
+                    {
+                      id: finalId,
+                      "aria-label": ariaLabel,
+                      "data-testid": dataTestId ? dataTestId : "input-container",
+                      "data-text-value": value,
+                      css: [input, styleVariant === "compact" ? inputCompact : null],
+                      placeholder: placeholder ? /* @__PURE__ */ jsx40(
+                        Caption,
+                        {
+                          css: [
+                            placeholderCaption,
+                            styleVariant === "compact" ? placeholderCompact : null
+                          ],
+                          children: placeholder
+                        }
+                      ) : void 0
+                    }
+                  )
+                }
+              ),
+              disableVariablesForReals || showMenuPosition !== "inline-right" ? null : /* @__PURE__ */ jsx40(
+                VariablesComposerVariableMenu,
+                {
+                  ...sharedMenuProps,
+                  buttonCss: variableBindButton,
+                  tip: useInputWithNoVariables ? void 0 : "Tip: access this list by typing $$",
+                  buttonProps: hadVariablesInValue ? { "aria-pressed": "true" } : void 0,
+                  replaceValueOnVariableInsert: useInputWithNoVariables
+                }
+              )
+            ]
           }
         ),
         caption ? /* @__PURE__ */ jsx40(Caption, { children: caption }) : null,
@@ -4713,7 +4901,7 @@ function InputVariables(props) {
         },
         id: finalId,
         isActive: hadVariablesInValue,
-        disableVariables: disableVariablesForReals || disableInlineMenu === "by-label",
+        disableVariables: disableVariablesForReals || showMenuPosition && showMenuPosition !== "label" || disableInlineMenu === true || disableInlineMenu === "by-label",
         children: input3
       }
     );
@@ -4745,6 +4933,7 @@ function InputVariablesOverlayMenu({
   children,
   disabled,
   useInputWhenNoVariables,
+  portal,
   ...props
 }) {
   if (disabled) {
@@ -4756,6 +4945,7 @@ function InputVariablesOverlayMenu({
       VariablesComposerVariableMenu,
       {
         ...props,
+        portal,
         tip: useInputWhenNoVariables ? void 0 : "Tip: access this list by typing $$",
         buttonCss: menuBtn2
       }
@@ -4766,103 +4956,8 @@ function InputVariablesOverlayMenu({
 // src/components/Variables/ParameterConnectionIndicator.tsx
 import { CgUsbC as CgUsbC2 } from "@react-icons/all-files/cg/CgUsbC";
 import { bindVariablesToObject } from "@uniformdev/canvas";
-import { HorizontalRhythm as HorizontalRhythm4, Menu as Menu3 } from "@uniformdev/design-system";
+import { HorizontalRhythm as HorizontalRhythm5, Menu as Menu3 } from "@uniformdev/design-system";
 import { useMemo as useMemo11 } from "react";
-
-// src/components/Variables/styles/ParameterVariables.styles.ts
-import { css as css23 } from "@emotion/react";
-import { scrollbarStyles as scrollbarStyles3 } from "@uniformdev/design-system";
-var variableBindButton2 = css23`
-  align-items: center;
-  border: none;
-  border-radius: var(--rounded-base);
-  background: none;
-  display: flex;
-  height: 1.2rem;
-  padding: var(--spacing-2xs);
-  transition: background var(--duration-fast) var(--timing-ease-out),
-    color var(--duration-fast) var(--timing-ease-out);
-  width: 1.2rem;
-
-  &:hover,
-  &[aria-pressed='true']:not(:disabled) {
-    background: var(--brand-secondary-3);
-    color: var(--white);
-  }
-
-  &[aria-disabled='true'] {
-    background: none;
-    color: currentColor;
-  }
-
-  // fixes menu resizing issue within iframes
-  // see https://linear.app/uniform/issue/UNI-3068/mesh-integration-resizing-with-menus
-  + [role='menu'] {
-    max-height: unset;
-  }
-`;
-var input2 = css23`
-  display: block;
-  appearance: none;
-  box-sizing: border-box;
-  background: var(--white);
-  border: 1px solid var(--gray-200);
-  border-radius: var(--rounded-sm);
-  color: var(--gray-700);
-  font-size: var(--fs-sm);
-  line-height: 1.5;
-  min-height: 2rem;
-  padding: var(--spacing-sm);
-  width: 100%;
-  position: relative;
-  white-space: normal;
-  transition-property: background, border-color, color, box-shadow, border-radius;
-  transition-duration: var(--duration-fast);
-  transition-timing-function: var(--timing-ease-out);
-
-  &::placeholder {
-    color: var(--gray-400);
-  }
-
-  &:focus,
-  &:focus-within {
-    border-radius: var(--rounded-sm);
-    box-shadow: var(--elevation-100);
-    border: 1px solid var(--accent-dark-active);
-    outline: none;
-  }
-  &:hover {
-    border: 1px solid var(--accent-dark-hover);
-  }
-
-  &:disabled,
-  &:disabled::placeholder,
-  &:disabled:hover {
-    border-radius: var(--rounded-sm);
-    cursor: not-allowed;
-    color: var(--gray-400);
-  }
-
-  &[readonly],
-  &[contenteditable='false'] {
-    cursor: not-allowed;
-    color: var(--gray-400);
-  }
-
-  > p {
-    margin: 0;
-  }
-`;
-var inputMultiLine = (lines) => css23`
-  ${scrollbarStyles3}
-  // 1.5 = line height, spacing-sm = top and bottom padding + spacing-xs to give a slight increase in height
-  // as the text looked to close to the bottom of the input
-  height: calc(${lines * 1.5}em + var(--spacing-sm) + var(--spacing-xs));
-  resize: vertical;
-  overflow: auto;
-`;
-
-// src/components/Variables/ParameterConnectionIndicator.tsx
 import { jsx as jsx41, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
 function ParameterConnectionIndicator({
   children,
@@ -4882,7 +4977,7 @@ function ParameterConnectionIndicator({
     });
     return result;
   }, [value]);
-  return /* @__PURE__ */ jsxs24(HorizontalRhythm4, { align: "center", gap: "xs", css: { width: "100%" }, children: [
+  return /* @__PURE__ */ jsxs24(HorizontalRhythm5, { align: "center", gap: "xs", css: { width: "100%" }, children: [
     /* @__PURE__ */ jsx41("div", { css: { flex: 1 }, children }),
     disabled ? null : /* @__PURE__ */ jsx41(
       Menu3,
@@ -4894,7 +4989,7 @@ function ParameterConnectionIndicator({
           {
             title: menuTooltip,
             "aria-pressed": hasVariablesInValue,
-            css: [menuBtn, variableBindButton2],
+            css: [menuBtn, variableBindButton],
             type: "button",
             children: /* @__PURE__ */ jsx41(CgUsbC2, { size: "1.4rem" })
           }
@@ -4907,8 +5002,8 @@ function ParameterConnectionIndicator({
 }
 
 // src/components/Variables/ParameterOrSingleVariable.tsx
-import { HorizontalRhythm as HorizontalRhythm5 } from "@uniformdev/design-system";
-import { useCallback as useCallback3 } from "react";
+import { HorizontalRhythm as HorizontalRhythm6 } from "@uniformdev/design-system";
+import { useCallback as useCallback4 } from "react";
 
 // src/components/Variables/composer/OnDisconnectPlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexical/react/LexicalComposerContext";
@@ -4967,7 +5062,7 @@ function ParameterOrSingleVariable(props) {
     hasVariablesInValue,
     setHadVariablesInValue
   } = useInputVariablesState(props);
-  const handleDisconnect = useCallback3(
+  const handleDisconnect = useCallback4(
     (variable) => {
       setHadVariablesInValue(false);
       if (onDisconnect) {
@@ -4993,7 +5088,7 @@ function ParameterOrSingleVariable(props) {
           /* @__PURE__ */ jsx42(OnDisconnectPlugin, { onDisconnect: handleDisconnect }),
           editorRef ? /* @__PURE__ */ jsx42(EditorRefPlugin, { editorRef }) : null,
           /* @__PURE__ */ jsx42(ControlledValuePlugin, { enabled: true, value }),
-          /* @__PURE__ */ jsxs25(HorizontalRhythm5, { align: "center", gap: "xs", css: { width: "100%" }, children: [
+          /* @__PURE__ */ jsxs25(HorizontalRhythm6, { align: "center", gap: "xs", css: { width: "100%" }, children: [
             /* @__PURE__ */ jsx42("div", { css: { flex: 1 }, children: inputWhenNoVariables && !hadVariablesInValue ? inputWhenNoVariables : /* @__PURE__ */ jsx42(
               VariablesComposerInput,
               {
@@ -5006,7 +5101,7 @@ function ParameterOrSingleVariable(props) {
               VariablesComposerVariableMenu,
               {
                 ...sharedMenuProps,
-                buttonCss: [variableBindButton2],
+                buttonCss: [variableBindButton],
                 buttonProps: hasVariablesInValue ? { "aria-pressed": "true" } : void 0,
                 replaceValueOnVariableInsert: true,
                 filterVariable
@@ -5020,8 +5115,8 @@ function ParameterOrSingleVariable(props) {
 }
 
 // src/components/Variables/ParameterVariables.tsx
-import { css as css24 } from "@emotion/react";
-import { HorizontalRhythm as HorizontalRhythm6 } from "@uniformdev/design-system";
+import { css as css25 } from "@emotion/react";
+import { HorizontalRhythm as HorizontalRhythm7 } from "@uniformdev/design-system";
 import { jsx as jsx43, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
 function ParameterVariables(props) {
   const {
@@ -5060,7 +5155,7 @@ function ParameterVariables(props) {
         editorRef ? /* @__PURE__ */ jsx43(EditorRefPlugin, { editorRef }) : null,
         /* @__PURE__ */ jsx43(ControlledValuePlugin, { value, enabled: useInputWhenNoVariables }),
         /* @__PURE__ */ jsxs26(
-          HorizontalRhythm6,
+          HorizontalRhythm7,
           {
             align: "center",
             gap: "xs",
@@ -5079,8 +5174,8 @@ function ParameterVariables(props) {
                   "data-text-value": value,
                   css: [
                     input2,
-                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(2) : css24``,
-                    inputCss != null ? inputCss : css24``
+                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(2) : css25``,
+                    inputCss != null ? inputCss : css25``
                   ]
                 }
               ) }),
@@ -5088,7 +5183,7 @@ function ParameterVariables(props) {
                 VariablesComposerVariableMenu,
                 {
                   ...sharedMenuProps,
-                  buttonCss: [variableBindButton2],
+                  buttonCss: [variableBindButton],
                   tip: useInputWhenNoVariables ? void 0 : "Tip: access this list by typing $$",
                   buttonProps: hasVariablesInValue ? { "aria-pressed": "true" } : void 0,
                   replaceValueOnVariableInsert: useInputWhenNoVariables
@@ -5116,7 +5211,7 @@ ${prettifyBindExpression(bindExpression)}`
 }
 
 // src/components/Variables/VariablesList.tsx
-import { css as css26 } from "@emotion/react";
+import { css as css27 } from "@emotion/react";
 import {
   AddListButton,
   button,
@@ -5131,8 +5226,8 @@ import {
 import { Draggable as Draggable2, Droppable as Droppable2 } from "react-beautiful-dnd";
 
 // src/components/Variables/styles/VariablesList.styles.ts
-import { css as css25 } from "@emotion/react";
-var tableRow = (isDragging) => css25`
+import { css as css26 } from "@emotion/react";
+var tableRow = (isDragging) => css26`
   position: relative;
   ${isDragging ? `
   display: table;   
@@ -5140,7 +5235,7 @@ var tableRow = (isDragging) => css25`
   top: auto !important;
   ` : void 0}
 `;
-var tableCellDragIcon = css25`
+var tableCellDragIcon = css26`
   &::after {
     content: '';
     display: block;
@@ -5158,7 +5253,7 @@ var tableCellDragIcon = css25`
     opacity: 1;
   }
 `;
-var variableName = css25`
+var variableName = css26`
   border: none;
   font-weight: var(--fw-medium);
   padding: 0;
@@ -5168,7 +5263,7 @@ var variableName = css25`
   white-space: nowrap;
   max-width: 20ch;
 `;
-var variableValue = css25`
+var variableValue = css26`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -5186,13 +5281,13 @@ function VariablesList() {
       const result = [...sorted || []];
       const [removed] = (_b = result == null ? void 0 : result.splice(res.source.index, 1)) != null ? _b : [];
       result == null ? void 0 : result.splice(res.destination.index, 0, removed);
-      const resultAsObj = result.reduce(
-        (acc, item, index) => ({
+      const resultAsObj = result.reduce((acc, item, index) => {
+        const { name, ...variableDefinition } = item;
+        return {
           ...acc,
-          [item.name]: { type: item.type, default: item.default, order: index }
-        }),
-        {}
-      );
+          [item.name]: { ...variableDefinition, order: index }
+        };
+      }, {});
       dispatch({ type: "reorder", result: resultAsObj });
       return result;
     }
@@ -5245,7 +5340,7 @@ function VariablesList() {
                         title: `delete ${text}`,
                         css: [
                           button,
-                          css26`
+                          css27`
                                     background: transparent;
                                   `
                         ],
@@ -5374,7 +5469,7 @@ function TextVariableRenderer({ definition, value, setValue }) {
 }
 
 // src/components/Request/RequestBody.tsx
-import { css as css28 } from "@emotion/react";
+import { css as css29 } from "@emotion/react";
 import { InputSelect as InputSelect4, JsonEditor } from "@uniformdev/design-system";
 import { useState as useState14 } from "react";
 
@@ -5460,11 +5555,11 @@ function useRequest() {
 }
 
 // src/components/Request/styles/Request.styles.ts
-import { css as css27 } from "@emotion/react";
-var innerContentStyles = css27`
+import { css as css28 } from "@emotion/react";
+var innerContentStyles = css28`
   background: var(--white);
 `;
-var requestTypeContainer = (bgColor) => css27`
+var requestTypeContainer = (bgColor) => css28`
   align-items: start;
   background: ${bgColor};
   display: grid;
@@ -5506,7 +5601,7 @@ function RequestBody() {
   return /* @__PURE__ */ jsxs28(
     "div",
     {
-      css: css28`
+      css: css29`
         background: var(--white);
       `,
       children: [
@@ -5514,7 +5609,7 @@ function RequestBody() {
           RequestTypeContainer,
           {
             bgColor: "var(--gray-100)",
-            css: css28`
+            css: css29`
           padding: var(--spacing-sm) var(--spacing-base);
         `,
             children: /* @__PURE__ */ jsx49(
@@ -5803,7 +5898,7 @@ function RequestParameters({
 }
 
 // src/components/Request/RequestUrl.tsx
-import { css as css29 } from "@emotion/react";
+import { css as css30 } from "@emotion/react";
 import { useMemo as useMemo13 } from "react";
 
 // src/components/Request/urlEncodeRequestParameter.ts
@@ -5840,7 +5935,7 @@ function RequestUrl() {
   return /* @__PURE__ */ jsxs31(
     "small",
     {
-      css: css29`
+      css: css30`
         display: inline-block;
         margin-bottom: var(--spacing-xs);
         word-break: break-word;
@@ -6141,7 +6236,7 @@ var MeshApp = ({
 };
 
 // src/components/ObjectSearch/DataRefreshButton.tsx
-import { css as css30 } from "@emotion/react";
+import { css as css31 } from "@emotion/react";
 import { Button as Button3, LoadingIndicator as LoadingIndicator4 } from "@uniformdev/design-system";
 import { jsx as jsx58, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var DataRefreshButton = ({
@@ -6154,7 +6249,7 @@ var DataRefreshButton = ({
     !isLoading ? null : /* @__PURE__ */ jsx58(
       LoadingIndicator4,
       {
-        css: css30`
+        css: css31`
             ${isLoading ? "opacity: 0.2;" : void 0}
           `
       }
@@ -6164,7 +6259,7 @@ var DataRefreshButton = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-import { css as css32 } from "@emotion/react";
+import { css as css33 } from "@emotion/react";
 import { bindVariables } from "@uniformdev/canvas";
 import { Callout as Callout5, Container, IconsProvider, ScrollableList, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
 
@@ -6172,7 +6267,7 @@ import { Callout as Callout5, Container, IconsProvider, ScrollableList, Vertical
 import { bindVariablesToObject as bindVariablesToObject2 } from "@uniformdev/canvas";
 import {
   createContext as createContext5,
-  useCallback as useCallback4,
+  useCallback as useCallback5,
   useContext as useContext7,
   useDeferredValue,
   useMemo as useMemo14,
@@ -6209,7 +6304,7 @@ var ObjectSearchProvider = ({
   const querySearchDeferred = useDeferredValue(query);
   const [selectedItems, setSelectedItems] = useState16(currentlySelectedItems != null ? currentlySelectedItems : []);
   const [list, setList] = useState16({});
-  const onSetQuery = useCallback4(
+  const onSetQuery = useCallback5(
     (value2) => {
       if (Array.isArray(value2.contentType) && value2.contentType.length > 0) {
         return setQuery({
@@ -6221,7 +6316,7 @@ var ObjectSearchProvider = ({
     },
     [setQuery]
   );
-  const onSelectItem = useCallback4(
+  const onSelectItem = useCallback5(
     (selectedResult) => {
       if (Array.isArray(selectedResult)) {
         setSelectedItems(selectedResult);
@@ -6235,10 +6330,10 @@ var ObjectSearchProvider = ({
     },
     [setSelectedItems, selectedItems]
   );
-  const onRemoveAllSelectedItems = useCallback4(() => {
+  const onRemoveAllSelectedItems = useCallback5(() => {
     setSelectedItems([]);
   }, [setSelectedItems]);
-  const onSetList = useCallback4(
+  const onSetList = useCallback5(
     (value2) => {
       setList(value2);
     },
@@ -6290,9 +6385,9 @@ function bindQuery(query, inputs) {
 import { Chip, Popover } from "@uniformdev/design-system";
 
 // src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
-import { css as css31 } from "@emotion/react";
+import { css as css32 } from "@emotion/react";
 import { skeletonLoading } from "@uniformdev/design-system";
-var ObjectListItemContainer = css31`
+var ObjectListItemContainer = css32`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6301,11 +6396,11 @@ var ObjectListItemContainer = css31`
   grid-template-columns: 1fr auto;
   padding: var(--spacing-sm);
 `;
-var ObjectListItemContainerDisabled = css31`
+var ObjectListItemContainerDisabled = css32`
   opacity: var(--opacity-50);
   pointer-events: none;
 `;
-var ObjectListItemLoading = css31`
+var ObjectListItemLoading = css32`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   border-color: transparent;
   min-height: 42px;
@@ -6329,36 +6424,36 @@ var ObjectListItemLoading = css31`
     width: 1rem;
   }
 `;
-var ObjectListItemHeadingGroup = css31`
+var ObjectListItemHeadingGroup = css32`
   align-items: center;
   display: grid;
 `;
-var ObjectListItemThumbnail = css31`
+var ObjectListItemThumbnail = css32`
   width: 30px;
   object-fit: contain;
 `;
-var ObjectListItemTitle = css31`
+var ObjectListItemTitle = css32`
   color: var(--typography-base);
   display: block;
   font-size: var(--fs-sm);
 `;
-var ObjectListItemSubtitle = css31`
+var ObjectListItemSubtitle = css32`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectListItemInfoContainer = css31`
+var ObjectListItemInfoContainer = css32`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: center;
 `;
-var ObjectListItemControlledContent = css31`
+var ObjectListItemControlledContent = css32`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectListItemUnControlledContent = css31`
+var ObjectListItemUnControlledContent = css32`
   margin-top: var(--spacing-sm);
   grid-column: 1 / -1;
 `;
@@ -6375,7 +6470,8 @@ var ObjectSearchListItem = ({
   onSelect,
   isMulti,
   disabled,
-  children
+  children,
+  ...props
 }) => {
   const { onSelectItem, selectedListItems, isMulti: globalIsMulti } = useObjectSearchContext();
   const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
@@ -6395,6 +6491,7 @@ var ObjectSearchListItem = ({
       role: "listitem",
       css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
       "data-testid": "list-item",
+      ...props,
       children: [
         /* @__PURE__ */ jsxs34(
           "div",
@@ -6443,7 +6540,7 @@ var ObjectSearchContainer = ({
     ScrollableList,
     {
       role: "list",
-      css: css32`
+      css: css33`
         > div {
           transition: max-height var(--duration-slow) var(--timing-ease-out);
           max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
@@ -6515,12 +6612,12 @@ var DefaultResultList = () => {
 };
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
-import { InputKeywordSearch as InputKeywordSearch2, InputSelect as InputSelect6 } from "@uniformdev/design-system";
+import { DebouncedInputKeywordSearch, InputSelect as InputSelect6 } from "@uniformdev/design-system";
 import { useMemo as useMemo15, useState as useState17 } from "react";
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
-import { css as css33 } from "@emotion/react";
-var ObjectSearchFilterContainerLabel = css33`
+import { css as css34 } from "@emotion/react";
+var ObjectSearchFilterContainerLabel = css34`
   align-items: center;
   display: flex;
   font-size: var(--fs-sm);
@@ -6528,11 +6625,11 @@ var ObjectSearchFilterContainerLabel = css33`
   line-height: 1rem;
   margin-bottom: var(--spacing-sm);
 `;
-var ObjectSearchFilterContainer = css33`
+var ObjectSearchFilterContainer = css34`
   display: grid;
   gap: var(--spacing-base);
 `;
-var ObjectSearchFilterGrid = (gridColumns) => css33`
+var ObjectSearchFilterGrid = (gridColumns) => css34`
   display: grid;
   grid-template-columns: ${gridColumns};
   gap: var(--spacing-base);
@@ -6589,14 +6686,14 @@ var ObjectSearchFilter = ({
           }
         ) : null,
         /* @__PURE__ */ jsx62(
-          InputKeywordSearch2,
+          DebouncedInputKeywordSearch,
           {
             inputFieldName: searchInputName,
             placeholder: searchInputPlaceholderText,
-            onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+            onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
             disabledFieldSubmission: true,
-            onClear: () => handleFilterChange({ keyword: "" }),
-            value: searchState.keyword
+            defaultValue: searchState.keyword,
+            delay: 300
           }
         )
       ]
@@ -6618,9 +6715,9 @@ import { Badge, Button as Button4, Popover as Popover2 } from "@uniformdev/desig
 import { format as timeagoFormat } from "timeago.js";
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
-import { css as css34 } from "@emotion/react";
+import { css as css35 } from "@emotion/react";
 import { button as button2 } from "@uniformdev/design-system";
-var ButtonStyles = css34`
+var ButtonStyles = css35`
   ${button2}
   background: transparent;
   border: 1px solid var(--typography-base);
@@ -6647,7 +6744,7 @@ var ButtonStyles = css34`
     text-decoration: none;
   }
 `;
-var ButtonIcon = css34`
+var ButtonIcon = css35`
   width: 1rem;
   height: 1rem;
 `;
@@ -6676,8 +6773,8 @@ var LinkButton = ({
 };
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
-import { css as css35 } from "@emotion/react";
-var ObjectSearchResultItemContainer = css35`
+import { css as css36 } from "@emotion/react";
+var ObjectSearchResultItemContainer = css36`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6693,7 +6790,7 @@ var ObjectSearchResultItemContainer = css35`
     }
   }
 `;
-var ObjectSearchDragHandle = css35`
+var ObjectSearchDragHandle = css36`
   border-left: 2px dotted var(--gray-300);
   border-right: 2px dotted var(--gray-300);
   position: absolute;
@@ -6702,35 +6799,35 @@ var ObjectSearchDragHandle = css35`
   transition: opacity var(--duration-fast) var(--timing-ease-out);
   opacity: 0;
 `;
-var ObjectSearchResultItemSubtitle = css35`
+var ObjectSearchResultItemSubtitle = css36`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectSearchResultItemTitle = css35`
+var ObjectSearchResultItemTitle = css36`
   align-items: center;
   color: var(--typography-base);
   display: flex;
   gap: var(--spacing-xs);
 `;
-var ObjectSearchResultItemTimeStamp = css35`
+var ObjectSearchResultItemTimeStamp = css36`
   color: var(--gray-500);
   font-size: var(--fs-xs);
 `;
-var ObjectSearchAuthorStateGroup = css35`
+var ObjectSearchAuthorStateGroup = css36`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchUpdateGroup = css35`
+var ObjectSearchUpdateGroup = css36`
   display: grid;
 `;
-var ObjectSearchContentContainer = css35`
+var ObjectSearchContentContainer = css36`
   display: flex;
   gap: var(--spacing-base);
 `;
-var ObjectSearchImage = css35`
+var ObjectSearchImage = css36`
   width: 56px;
   object-fit: contain;
 `;
@@ -6798,26 +6895,26 @@ import { Button as Button5, Counter } from "@uniformdev/design-system";
 import { Draggable as Draggable3, Droppable as Droppable3 } from "react-beautiful-dnd";
 
 // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
-import { css as css36 } from "@emotion/react";
-var ObjectSearchResultListContainer = css36`
+import { css as css37 } from "@emotion/react";
+var ObjectSearchResultListContainer = css37`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: space-between;
 `;
-var ObjectSearchDragContainer = css36`
+var ObjectSearchDragContainer = css37`
   margin: 0 0 var(--spacing-sm);
 `;
-var ObjectSearchContainerDragging = css36`
+var ObjectSearchContainerDragging = css37`
   box-shadow: var(--shadow-base);
   opacity: var(--opacity-50);
 `;
-var ObjectSearchResultListCounterContainer = css36`
+var ObjectSearchResultListCounterContainer = css37`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchResultListTitle = css36`
+var ObjectSearchResultListTitle = css37`
   font-weight: var(--fw-bold);
   line-height: 1;
 `;
@@ -6829,6 +6926,7 @@ function ObjectSearchResultList({
   removeButtonText = "Remove all",
   onRemoveAllSelected,
   hideRemoveButton = false,
+  resultLabelOverride,
   additionalButtons,
   renderResultComponent = (value) => /* @__PURE__ */ jsx66(ObjectSearchResultItem, { ...value }),
   multiSelectId,
@@ -6874,11 +6972,11 @@ function ObjectSearchResultList({
   };
   return /* @__PURE__ */ jsxs40(Fragment13, { children: [
     /* @__PURE__ */ jsxs40("div", { role: "group", css: ObjectSearchResultListContainer, children: [
-      /* @__PURE__ */ jsxs40("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
+      !resultLabelOverride ? /* @__PURE__ */ jsxs40("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
         /* @__PURE__ */ jsx66("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
         " ",
         !selectedListItems.length ? null : /* @__PURE__ */ jsx66(Counter, { count: selectedListItems.length })
-      ] }),
+      ] }) : resultLabelOverride,
       /* @__PURE__ */ jsxs40("div", { css: ObjectSearchResultListCounterContainer, children: [
         additionalButtons,
         hideRemoveButton ? null : /* @__PURE__ */ jsx66(
@@ -6920,7 +7018,7 @@ function ObjectSearchResultList({
 }
 
 // src/components/ObjectSearch/QueryFilter.tsx
-import { Input as Input5, InputKeywordSearch as InputKeywordSearch3, InputSelect as InputSelect7, VerticalRhythm as VerticalRhythm3 } from "@uniformdev/design-system";
+import { DebouncedInputKeywordSearch as DebouncedInputKeywordSearch2, Input as Input5, InputSelect as InputSelect7, VerticalRhythm as VerticalRhythm3 } from "@uniformdev/design-system";
 import { useEffect as useEffect16, useState as useState18 } from "react";
 import { jsx as jsx67, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
 var QueryFilter = ({
@@ -6939,26 +7037,24 @@ var QueryFilter = ({
   sortOrderLabel = "Sort Order",
   sortOrderOptions = [
     {
-      name: "Ascending",
-      id: "asc",
+      value: "asc",
       label: "Ascending"
     },
     {
-      name: "Descending",
-      id: "desc",
+      value: "desc",
       label: "Descending"
     }
   ],
   children
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g;
   const { query, onSetQuery } = useObjectSearchContext();
   const [queryState, setQueryState] = useState18({
     contentType: (_a = query.contentType) != null ? _a : "",
-    keyword: (_b = query.contentType) != null ? _b : "",
-    count: countValue != null ? countValue : 5,
-    sortBy: (_c = sortOptions[0].id) != null ? _c : "",
-    sortOrder: (_d = sortOrderOptions[0].id) != null ? _d : ""
+    keyword: (_b = query.keyword) != null ? _b : "",
+    count: (_c = query.count) != null ? _c : countValue,
+    sortBy: (_d = query.sortBy) != null ? _d : "",
+    sortOrder: (_e = query.sortOrder) != null ? _e : ""
   });
   const handleFilterChange = (value) => {
     setQueryState((prev) => ({ ...prev, ...value }));
@@ -6966,7 +7062,7 @@ var QueryFilter = ({
   };
   useEffect16(() => {
     onSetQuery(queryState);
-  }, [onSetQuery, queryState]);
+  }, []);
   return /* @__PURE__ */ jsxs41("fieldset", { children: [
     /* @__PURE__ */ jsx67("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
     /* @__PURE__ */ jsx67("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ jsxs41(VerticalRhythm3, { children: [
@@ -6974,20 +7070,20 @@ var QueryFilter = ({
         InputVariables,
         {
           label: searchInputLabel,
-          value: (_e = queryState.keyword) != null ? _e : "",
+          value: (_f = queryState.keyword) != null ? _f : "",
           onChange: (newQuery) => handleFilterChange({ keyword: newQuery }),
           disableInlineMenu: true,
           id: "qf_searchText",
           inputWhenNoVariables: /* @__PURE__ */ jsx67(
-            InputKeywordSearch3,
+            DebouncedInputKeywordSearch2,
             {
               id: "qf_searchText",
               inputFieldName: searchInputName,
               placeholder: searchInputPlaceholderText,
-              onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+              onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
               disabledFieldSubmission: true,
-              onClear: () => handleFilterChange({ keyword: "" }),
-              value: queryState.keyword
+              delay: 300,
+              defaultValue: queryState.keyword
             }
           )
         }
@@ -6998,7 +7094,7 @@ var QueryFilter = ({
           {
             label: contentTypeLabel,
             id: "qf_contentType",
-            value: (_f = queryState.contentType) != null ? _f : "",
+            value: (_g = queryState.contentType) != null ? _g : "",
             onChange: (newType) => handleFilterChange({ contentType: newType }),
             disableInlineMenu: true,
             inputWhenNoVariables: /* @__PURE__ */ jsx67(
@@ -7007,13 +7103,8 @@ var QueryFilter = ({
                 id: "qf_contentType",
                 label: contentTypeLabel,
                 showLabel: false,
-                options: [
-                  ...!requireContentType ? [{ id: "", label: typeSelectorAllTypesOptionText }] : [],
-                  ...contentTypeOptions ? contentTypeOptions.map((option) => {
-                    var _a2;
-                    return { id: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
-                  }) : []
-                ],
+                defaultOption: requireContentType ? void 0 : typeSelectorAllTypesOptionText,
+                options: contentTypeOptions != null ? contentTypeOptions : [],
                 onChange: (e) => handleFilterChange({ contentType: e.target.value }),
                 value: queryState.contentType
               }
@@ -7028,6 +7119,7 @@ var QueryFilter = ({
             value: queryState.count.toString(10),
             onChange: (newCount) => handleFilterChange({ count: newCount }),
             disableInlineMenu: true,
+            valueToResetTo: "5",
             inputWhenNoVariables: /* @__PURE__ */ jsx67(
               Input5,
               {
@@ -7058,16 +7150,8 @@ var QueryFilter = ({
                 label: sortLabel,
                 id: "qf_sortBy",
                 showLabel: false,
-                options: [
-                  {
-                    label: "Select a sort",
-                    id: ""
-                  },
-                  ...sortOptions ? sortOptions.map((option) => {
-                    var _a2;
-                    return { id: option.id, name: option.name, label: (_a2 = option.label) != null ? _a2 : option.name };
-                  }) : []
-                ],
+                defaultOption: "Select a sort",
+                options: sortOptions != null ? sortOptions : [],
                 onChange: (e) => handleFilterChange({ sortBy: e.target.value }),
                 value: queryState.sortBy
               }
@@ -7088,12 +7172,7 @@ var QueryFilter = ({
                 label: sortOrderLabel,
                 id: "qf_sortOrder",
                 showLabel: false,
-                options: [
-                  ...sortOrderOptions ? sortOrderOptions.map((option) => {
-                    var _a2;
-                    return { value: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
-                  }) : []
-                ],
+                options: sortOrderOptions != null ? sortOrderOptions : [],
                 onChange: (e) => handleFilterChange({ sortOrder: e.target.value }),
                 value: queryState.sortOrder
               }
@@ -7159,6 +7238,60 @@ var JsonMeshVariableEditor = ({
   return null;
 };
 
+// src/components/SearchAndFilter/filtersMapper.tsx
+import {
+  filterMapper,
+  FilterMultiChoiceEditor
+} from "@uniformdev/design-system";
+import { DateEditor, FilterSingleChoiceEditor, NumberEditor, TextEditor } from "@uniformdev/design-system";
+import { jsx as jsx69 } from "@emotion/react/jsx-runtime";
+function withInputVariables(WrappedComponent) {
+  const WithInputVariables = (props) => {
+    if (Array.isArray(props.value) || !props.bindable || props.disabled || props.readOnly) {
+      return /* @__PURE__ */ jsx69(WrappedComponent, { ...props });
+    }
+    return /* @__PURE__ */ jsx69(
+      InputVariables,
+      {
+        disableInlineMenu: true,
+        showMenuPosition: "inline-right",
+        onChange: (newValue) => props.onChange(newValue != null ? newValue : ""),
+        value: props.value,
+        disabled: props.disabled,
+        inputWhenNoVariables: /* @__PURE__ */ jsx69(WrappedComponent, { ...props })
+      }
+    );
+  };
+  return WithInputVariables;
+}
+function withInputVariablesForMultiValue(WrappedComponent) {
+  const WithInputVariables = (props) => {
+    var _a;
+    if (!props.bindable || props.disabled || props.readOnly) {
+      return /* @__PURE__ */ jsx69(WrappedComponent, { ...props });
+    }
+    return /* @__PURE__ */ jsx69(
+      InputVariables,
+      {
+        disableInlineMenu: true,
+        showMenuPosition: "inline-right",
+        onChange: (newValue) => props.onChange(newValue ? [newValue] : []),
+        value: (_a = props.value) == null ? void 0 : _a[0],
+        inputWhenNoVariables: /* @__PURE__ */ jsx69(WrappedComponent, { ...props })
+      }
+    );
+  };
+  return WithInputVariables;
+}
+var bindableFiltersMapper = {
+  ...filterMapper,
+  multiChoice: withInputVariablesForMultiValue(FilterMultiChoiceEditor),
+  singleChoice: withInputVariables(FilterSingleChoiceEditor),
+  date: withInputVariables(DateEditor),
+  text: withInputVariables(TextEditor),
+  number: withInputVariables(NumberEditor)
+};
+
 // src/utils/createLocationValidator.ts
 function createLocationValidator(setValue, validate) {
   return (dispatch) => setValue((previous) => {
@@ -7198,7 +7331,7 @@ import {
   Heading,
   Input as Input6,
   InputComboBox,
-  InputKeywordSearch as InputKeywordSearch4,
+  InputKeywordSearch as InputKeywordSearch2,
   InputSelect as InputSelect8,
   InputToggle,
   Label,
@@ -7252,7 +7385,7 @@ export {
   icons_exports as Icons,
   Input6 as Input,
   InputComboBox,
-  InputKeywordSearch4 as InputKeywordSearch,
+  InputKeywordSearch2 as InputKeywordSearch,
   InputSelect8 as InputSelect,
   InputToggle,
   InputVariables,
@@ -7322,6 +7455,7 @@ export {
   VariablesPlugin,
   VariablesProvider,
   badgeIcon,
+  bindableFiltersMapper,
   convertConnectedDataToVariable,
   createLocationValidator,
   damSelectItemImage,