@uniformdev/mesh-sdk-react 20.47.0 → 20.47.1-alpha.9

package/dist/index.d.mts

@@ -186,7 +186,7 @@ declare function ControlledValuePlugin({ enabled, value, extraDependencies, }: {
     enabled: boolean;
     value: string | undefined | SerializedEditorState<SerializedLexicalNode>;
     extraDependencies?: unknown[];
-}): JSX.Element | null;
+}): ReactNode | null;
 
 type SerializedVariableNode = Spread<{
     reference: string;
@@ -217,9 +217,9 @@ type VariableNodeState = {
     isLoading: boolean;
 };
 /** Renders a variable reference node within a Lexical editor */
-declare class VariableNode extends DecoratorNode<JSX.Element> {
+declare class VariableNode extends DecoratorNode<ReactNode> {
     reference: Readonly<string>;
-    private __state;
+    private __variableState;
     static getType(): string;
     static clone(node: VariableNode): VariableNode;
     /** Imports the node from serialized JSON (i.e. the data provided to the editor's initial state) */
@@ -441,7 +441,7 @@ declare function useVariablesMenu<TEditorContext>({ showAddVariableMenuOption, e
  * Enables variables auto-complete and reference management to a Lexical editor.
  * Must also activate the VariableNode node to make this work.
  */
-declare function VariablesPlugin<TEditorContext = unknown>({ disableVariables, showAddVariableMenuOption, enableEditingVariables, getEditorContext, replaceValueOnVariableInsert, filterVariable, disableVariableDisplayNames, }: VariablesPluginProps<TEditorContext>): JSX.Element | null;
+declare function VariablesPlugin<TEditorContext = unknown>({ disableVariables, showAddVariableMenuOption, enableEditingVariables, getEditorContext, replaceValueOnVariableInsert, filterVariable, disableVariableDisplayNames, }: VariablesPluginProps<TEditorContext>): ReactNode | null;
 
 type PasteTransformerPluginProps = {
     /**
@@ -481,7 +481,7 @@ type UseInputVariablesStateProps<TEditorContext = unknown> = {
      * in the input will be replaced with the variable reference. Once in variables-mode, additional
      * insertions are inserted at the current selection (or end) of the variables value.
      */
-    inputWhenNoVariables?: JSX.Element;
+    inputWhenNoVariables?: ReactNode;
     /** Computes the editor context when a variable is added or edited from this composer */
     getEditorContext?: () => TEditorContext;
     /** Filters available variables in menus and auto-completes */
@@ -599,7 +599,7 @@ declare function ParameterConnectionIndicator({ children, value, menuOptions, di
 
 type ParameterOrSingleVariableProps<TEditorContext = unknown> = {
     disabled?: boolean;
-    inputWhenNoVariables: JSX.Element;
+    inputWhenNoVariables: ReactNode;
     enableEditingVariables?: boolean;
     /**
      * Optional ref to get a handle to the variables editor.

package/dist/index.d.ts

@@ -186,7 +186,7 @@ declare function ControlledValuePlugin({ enabled, value, extraDependencies, }: {
     enabled: boolean;
     value: string | undefined | SerializedEditorState<SerializedLexicalNode>;
     extraDependencies?: unknown[];
-}): JSX.Element | null;
+}): ReactNode | null;
 
 type SerializedVariableNode = Spread<{
     reference: string;
@@ -217,9 +217,9 @@ type VariableNodeState = {
     isLoading: boolean;
 };
 /** Renders a variable reference node within a Lexical editor */
-declare class VariableNode extends DecoratorNode<JSX.Element> {
+declare class VariableNode extends DecoratorNode<ReactNode> {
     reference: Readonly<string>;
-    private __state;
+    private __variableState;
     static getType(): string;
     static clone(node: VariableNode): VariableNode;
     /** Imports the node from serialized JSON (i.e. the data provided to the editor's initial state) */
@@ -441,7 +441,7 @@ declare function useVariablesMenu<TEditorContext>({ showAddVariableMenuOption, e
  * Enables variables auto-complete and reference management to a Lexical editor.
  * Must also activate the VariableNode node to make this work.
  */
-declare function VariablesPlugin<TEditorContext = unknown>({ disableVariables, showAddVariableMenuOption, enableEditingVariables, getEditorContext, replaceValueOnVariableInsert, filterVariable, disableVariableDisplayNames, }: VariablesPluginProps<TEditorContext>): JSX.Element | null;
+declare function VariablesPlugin<TEditorContext = unknown>({ disableVariables, showAddVariableMenuOption, enableEditingVariables, getEditorContext, replaceValueOnVariableInsert, filterVariable, disableVariableDisplayNames, }: VariablesPluginProps<TEditorContext>): ReactNode | null;
 
 type PasteTransformerPluginProps = {
     /**
@@ -481,7 +481,7 @@ type UseInputVariablesStateProps<TEditorContext = unknown> = {
      * in the input will be replaced with the variable reference. Once in variables-mode, additional
      * insertions are inserted at the current selection (or end) of the variables value.
      */
-    inputWhenNoVariables?: JSX.Element;
+    inputWhenNoVariables?: ReactNode;
     /** Computes the editor context when a variable is added or edited from this composer */
     getEditorContext?: () => TEditorContext;
     /** Filters available variables in menus and auto-completes */
@@ -599,7 +599,7 @@ declare function ParameterConnectionIndicator({ children, value, menuOptions, di
 
 type ParameterOrSingleVariableProps<TEditorContext = unknown> = {
     disabled?: boolean;
-    inputWhenNoVariables: JSX.Element;
+    inputWhenNoVariables: ReactNode;
     enableEditingVariables?: boolean;
     /**
      * Optional ref to get a handle to the variables editor.

package/dist/index.esm.js

@@ -471,14 +471,14 @@ function deserializeVariablesEditorState(serialized) {
       children: [
         {
           children: result,
-          direction: "ltr",
+          direction: null,
           format: "",
           indent: 0,
           type: "paragraph",
           version: 1
         }
       ],
-      direction: "ltr",
+      direction: null,
       format: "",
       indent: 0,
       type: "root",
@@ -774,7 +774,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Button, Callout, HorizontalRhythm, Input, useShortcut } from "@uniformdev/design-system";
 import { useLayoutEffect, useRef as useRef2 } from "react";
 import { useForm } from "react-hook-form";
-import * as z from "zod";
+import * as z from "zod/v3";
 
 // src/components/Variables/styles/VariableEditor.styles.ts
 import { css as css2 } from "@emotion/react";
@@ -1146,18 +1146,17 @@ var DISCONNECT_VARIABLE_COMMAND = createCommand(
   "uniform:disconnect-variable"
 );
 var INSERT_VARIABLE_COMMAND = createCommand("uniform:insert-variable");
-var TRIGGER = "\\$\\$";
-var LENGTH_LIMIT = 20;
-var DollarSignVariablesRegex = new RegExp(`(^.*)(${TRIGGER}(.{0,${LENGTH_LIMIT}}))$`);
+var DollarSignVariablesRegex = /(^.*)(\$\$(.{0,20}))$/;
 function getPossibleQueryMatch(text) {
   const match = DollarSignVariablesRegex.exec(text);
   if (match !== null) {
     const maybeLeadingWhitespace = match[1];
     const matchingString = match[3];
+    const replaceableString = match[2];
     return {
       leadOffset: match.index + maybeLeadingWhitespace.length,
       matchingString,
-      replaceableString: match[2]
+      replaceableString
     };
   }
   return null;
@@ -1277,7 +1276,10 @@ function VariablesPlugin({
       filteredGroupedVariables: groupedVariables.map((group) => ({
         name: group.name,
         variables: group.variables.filter(
-          (option) => option.name.toLowerCase().includes(query) || option.name === ADD_VARIABLE_OPTION
+          (option) => {
+            var _a;
+            return option.name === ADD_VARIABLE_OPTION || option.name.toLowerCase().includes(query) || ((_a = option.displayName) == null ? void 0 : _a.toLowerCase().includes(query));
+          }
         )
       })).filter((group) => group.variables.length > 0),
       filteredMenuOptions: menuOptions.filter(
@@ -1568,13 +1570,13 @@ var VariableNode = class _VariableNode extends DecoratorNode {
   constructor(reference, state, key) {
     super(key);
     this.reference = reference;
-    this.__state = state;
+    this.__variableState = state;
   }
   static getType() {
     return "variable";
   }
   static clone(node) {
-    return new _VariableNode(node.reference, { ...node.__state }, node.__key);
+    return new _VariableNode(node.reference, { ...node.__variableState }, node.__key);
   }
   /** Imports the node from serialized JSON (i.e. the data provided to the editor's initial state) */
   static importJSON(serializedNode) {
@@ -1589,14 +1591,14 @@ var VariableNode = class _VariableNode extends DecoratorNode {
   }
   /** Gets the node's current state */
   getState() {
-    return this.getLatest().__state;
+    return this.getLatest().__variableState;
   }
   /**
    * Updates the node's variables state so it knows its current validity, display name, etc
    * The plugin updates this whenever the variables prop changes.
    */
   setState(state) {
-    this.getWritable().__state = state;
+    this.getWritable().__variableState = state;
   }
   /**
    * Serializes the node to JSON for editor initial state
@@ -1636,7 +1638,7 @@ var VariableNode = class _VariableNode extends DecoratorNode {
    * rely on Context, etc in this renderer.
    */
   decorate() {
-    return /* @__PURE__ */ jsx22(VariableNodeComponent, { state: this.__state, reference: this.reference, nodeKey: this.__key });
+    return /* @__PURE__ */ jsx22(VariableNodeComponent, { state: this.__variableState, reference: this.reference, nodeKey: this.__key });
   }
 };
 function $convertBindingElement(domNode) {
@@ -1908,27 +1910,40 @@ var placeholderCompact = css4`
 import { css as css5 } from "@emotion/react";
 import { scrollbarStyles } from "@uniformdev/design-system";
 var variableBindButton = css5`
-  align-items: center;
-  border: none;
+  --hover-color: var(--accent-dark-hover);
+  --active-color: var(--accent-dark-active);
+  border: 1px solid transparent;
   border-radius: var(--rounded-base);
   background: none;
+  color: var(--gray-300);
   display: flex;
-  height: 1.2rem;
-  padding: var(--spacing-2xs);
+  align-items: center;
+  justify-content: center;
+  max-width: fit-content;
+  padding: 0.125rem;
   transition:
+    border-color var(--duration-fast) var(--timing-ease-out),
     background var(--duration-fast) var(--timing-ease-out),
-    color var(--duration-fast) var(--timing-ease-out);
-  width: 1.2rem;
+    color var(--duration-fast) var(--timing-ease-out),
+    box-shadow var(--duration-fast) var(--timing-ease-out);
 
-  &:hover,
-  &[aria-pressed='true']:not(:disabled) {
-    background: var(--brand-secondary-3);
-    color: var(--white);
+  &:hover:not([aria-disabled='true']),
+  &:focus:not([aria-disabled='true']),
+  &:focus-within:not([aria-disabled='true']) {
+    color: var(--gray-500);
+    border-color: var(--hover-color);
+  }
+
+  &:active:not([aria-disabled='true']),
+  &[aria-pressed='true']:not([aria-disabled='true']) {
+    color: var(--active-color);
   }
 
   &[aria-disabled='true'] {
     background: none;
     color: currentColor;
+    opacity: var(--opacity-50);
+    cursor: default;
   }
 
   // fixes menu resizing issue within iframes
@@ -2002,8 +2017,7 @@ var inputMultiLine = (lines) => css5`
 
 // src/components/Variables/toolbox/InputVariablesProvider.tsx
 import { hasReferencedVariables } from "@uniformdev/canvas";
-import * as React4 from "react";
-import { useMemo as useMemo7 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo7, useState as useState5 } from "react";
 function useInputVariablesState({
   value,
   onChange,
@@ -2019,14 +2033,14 @@ function useInputVariablesState({
 }) {
   const { variables } = useVariables(true);
   const variableReferenceCountInValue = hasReferencedVariables(value != null ? value : "");
-  const [lastKnownId, setLastKnownId] = React4.useState(id);
-  const [hadVariablesInValue, setHadVariablesInValue] = React4.useState(variableReferenceCountInValue > 0);
-  React4.useEffect(() => {
+  const [lastKnownId, setLastKnownId] = useState5(id);
+  const [hadVariablesInValue, setHadVariablesInValue] = useState5(variableReferenceCountInValue > 0);
+  useEffect7(() => {
     if (variableReferenceCountInValue) {
       setHadVariablesInValue(true);
     }
   }, [variableReferenceCountInValue]);
-  React4.useEffect(() => {
+  useEffect7(() => {
     if (id !== lastKnownId) {
       setLastKnownId(id);
       setHadVariablesInValue(variableReferenceCountInValue > 0);
@@ -2076,30 +2090,6 @@ var labelText = css6`
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var variableBindButton2 = css6`
-  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;
-  }
-`;
 
 // src/components/Variables/toolbox/VariablesComposerVariableMenu.tsx
 import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
@@ -2146,7 +2136,7 @@ function SelectVariableMenu({
           css: [menuBtn, buttonCss],
           type: "button",
           "data-testid": "insert-variable",
-          children: /* @__PURE__ */ jsx23(CgUsbC, { size: "1.4rem" })
+          children: /* @__PURE__ */ jsx23(CgUsbC, { size: "1rem" })
         }
       ),
       children: [
@@ -2239,7 +2229,7 @@ function VariableField({
     VariablesComposerVariableMenu,
     {
       ...selectVariableMenuOptions,
-      buttonCss: [variableBindButton2, selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.buttonCss],
+      buttonCss: [variableBindButton, selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.buttonCss],
       buttonProps: isActive ? { "aria-pressed": "true" } : void 0
     }
   ) }) : null;
@@ -2310,8 +2300,8 @@ function VariablesComposer(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const editorState = useRef5();
-  const updateTimeout = useRef5();
+  const editorState = useRef5(void 0);
+  const updateTimeout = useRef5(void 0);
   if (typeof document === "undefined") return null;
   return /* @__PURE__ */ jsxs10(LexicalComposer, { initialConfig: editorConfig, children: [
     /* @__PURE__ */ jsx26(
@@ -2352,7 +2342,7 @@ import {
 } from "@lexical/clipboard";
 import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexical/react/LexicalComposerContext";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
 import { mergeRegister as mergeRegister4, objectKlassEquals } from "@lexical/utils";
@@ -2528,6 +2518,7 @@ function InputVariables(props) {
                   portal: renderMenuInPortal,
                   replaceValueOnVariableInsert: useInputWithNoVariables,
                   useInputWhenNoVariables: useInputWithNoVariables,
+                  isActive: hadVariablesInValue,
                   children: /* @__PURE__ */ jsx28(
                     VariablesComposerInput,
                     {
@@ -2616,6 +2607,7 @@ function InputVariablesOverlayMenu({
   disabled,
   useInputWhenNoVariables,
   portal,
+  isActive,
   ...props
 }) {
   if (disabled) {
@@ -2629,7 +2621,8 @@ function InputVariablesOverlayMenu({
         ...props,
         portal,
         tip: useInputWhenNoVariables ? void 0 : "Tip: access this list by typing $$",
-        buttonCss: menuBtn2
+        buttonCss: [menuBtn2, variableBindButton],
+        buttonProps: isActive ? { "aria-pressed": "true" } : void 0
       }
     )
   ] });
@@ -2682,7 +2675,7 @@ function ParameterConnectionIndicator({
                 css: [menuBtn, variableBindButton],
                 type: "button",
                 "data-testid": "insert-variable",
-                children: /* @__PURE__ */ jsx29(CgUsbC2, { size: "1.4rem" })
+                children: /* @__PURE__ */ jsx29(CgUsbC2, { size: "1rem" })
               }
             )
           }
@@ -2902,6 +2895,7 @@ ${prettifyBindExpression(bindExpression)}`
 
 // src/components/Variables/VariablesList.tsx
 import { css as css10 } from "@emotion/react";
+import { Draggable, Droppable } from "@hello-pangea/dnd";
 import { CgTrash } from "@react-icons/all-files/cg/CgTrash";
 import {
   AddListButton,
@@ -2914,11 +2908,10 @@ import {
   TableHead,
   TableRow
 } from "@uniformdev/design-system";
-import { Draggable, Droppable } from "react-beautiful-dnd";
 
 // src/components/DragDropContext.tsx
+import { DragDropContext as BaseDragDropContext } from "@hello-pangea/dnd";
 import { useState as useState8 } from "react";
-import { DragDropContext as BaseDragDropContext } from "react-beautiful-dnd";
 import { useDebounce } from "react-use";
 import { jsx as jsx32 } from "@emotion/react/jsx-runtime";
 function DragDropContext({ children, ...props }) {
@@ -3173,7 +3166,8 @@ function TextVariableRenderer({ definition, value, setValue }) {
       value: value != null ? value : "",
       caption: (_a = definition.helpText) != null ? _a : definition.default !== "" ? `Default value: ${definition.default}` : void 0,
       onChange: setValue,
-      "data-testid": "variable-input"
+      "data-testid": "variable-input",
+      disableInlineMenu: "by-label"
     }
   ) });
 }
@@ -3184,12 +3178,12 @@ import { InputSelect, JsonEditor } from "@uniformdev/design-system";
 import { useState as useState10 } from "react";
 
 // src/components/Request/RequestProvider.tsx
-import * as React5 from "react";
+import * as React4 from "react";
 import { jsx as jsx36 } from "@emotion/react/jsx-runtime";
-var RequestContext = React5.createContext(null);
+var RequestContext = React4.createContext(null);
 function RequestProvider({ value, onChange, children }) {
-  const [listVersion, setListVersion] = React5.useState(0);
-  const contextValue = React5.useMemo(() => {
+  const [listVersion, setListVersion] = React4.useState(0);
+  const contextValue = React4.useMemo(() => {
     return {
       dispatch: (event) => {
         if (event.type === "setRelativeUrl") {
@@ -3261,7 +3255,7 @@ function RequestProvider({ value, onChange, children }) {
   return /* @__PURE__ */ jsx36(RequestContext.Provider, { value: contextValue, children });
 }
 function useRequest() {
-  const context = React5.useContext(RequestContext);
+  const context = React4.useContext(RequestContext);
   if (!context) {
     throw new Error("No RequestProvider present");
   }
@@ -4664,11 +4658,11 @@ function legacyThemeMapper(theme) {
 }
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
-import { Button as Button4, Counter } from "@uniformdev/design-system";
 import {
   Draggable as Draggable2,
   Droppable as Droppable2
-} from "react-beautiful-dnd";
+} from "@hello-pangea/dnd";
+import { Button as Button4, Counter } from "@uniformdev/design-system";
 
 // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
 import { css as css20 } from "@emotion/react";
@@ -6788,7 +6782,7 @@ import { Icon as Icon5 } from "@uniformdev/design-system";
 
 // src/components/SearchAndFilter/FilterMenu.tsx
 import { HorizontalRhythm as HorizontalRhythm8, VerticalRhythm as VerticalRhythm6 } from "@uniformdev/design-system";
-import React7, { useEffect as useEffect19 } from "react";
+import React6, { useEffect as useEffect19 } from "react";
 import { jsx as jsx76, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
 var SearchAndFilterOptionsContainer2 = ({
   buttonRow,
@@ -6820,7 +6814,7 @@ var FilterMenu = ({
   resetButtonText = "reset"
 }) => {
   const { filterVisibility, setFilterVisibility, handleResetFilters, filters } = useSearchAndFilter();
-  const innerMenuRef = React7.useRef(null);
+  const innerMenuRef = React6.useRef(null);
   useEffect19(() => {
     var _a;
     if (filterVisibility) {

package/dist/index.js

@@ -646,14 +646,14 @@ function deserializeVariablesEditorState(serialized) {
       children: [
         {
           children: result,
-          direction: "ltr",
+          direction: null,
           format: "",
           indent: 0,
           type: "paragraph",
           version: 1
         }
       ],
-      direction: "ltr",
+      direction: null,
       format: "",
       indent: 0,
       type: "root",
@@ -920,7 +920,7 @@ var import_zod = require("@hookform/resolvers/zod");
 var import_design_system4 = require("@uniformdev/design-system");
 var import_react12 = require("react");
 var import_react_hook_form = require("react-hook-form");
-var z = __toESM(require("zod"));
+var z = __toESM(require("zod/v3"));
 
 // src/components/Variables/styles/VariableEditor.styles.ts
 var import_react11 = require("@emotion/react");
@@ -1292,18 +1292,17 @@ var DISCONNECT_VARIABLE_COMMAND = (0, import_lexical4.createCommand)(
   "uniform:disconnect-variable"
 );
 var INSERT_VARIABLE_COMMAND = (0, import_lexical4.createCommand)("uniform:insert-variable");
-var TRIGGER = "\\$\\$";
-var LENGTH_LIMIT = 20;
-var DollarSignVariablesRegex = new RegExp(`(^.*)(${TRIGGER}(.{0,${LENGTH_LIMIT}}))$`);
+var DollarSignVariablesRegex = /(^.*)(\$\$(.{0,20}))$/;
 function getPossibleQueryMatch(text) {
   const match = DollarSignVariablesRegex.exec(text);
   if (match !== null) {
     const maybeLeadingWhitespace = match[1];
     const matchingString = match[3];
+    const replaceableString = match[2];
     return {
       leadOffset: match.index + maybeLeadingWhitespace.length,
       matchingString,
-      replaceableString: match[2]
+      replaceableString
     };
   }
   return null;
@@ -1423,7 +1422,10 @@ function VariablesPlugin({
       filteredGroupedVariables: groupedVariables.map((group) => ({
         name: group.name,
         variables: group.variables.filter(
-          (option) => option.name.toLowerCase().includes(query) || option.name === ADD_VARIABLE_OPTION
+          (option) => {
+            var _a;
+            return option.name === ADD_VARIABLE_OPTION || option.name.toLowerCase().includes(query) || ((_a = option.displayName) == null ? void 0 : _a.toLowerCase().includes(query));
+          }
         )
       })).filter((group) => group.variables.length > 0),
       filteredMenuOptions: menuOptions.filter(
@@ -1714,13 +1716,13 @@ var VariableNode = class _VariableNode extends import_lexical5.DecoratorNode {
   constructor(reference, state, key) {
     super(key);
     this.reference = reference;
-    this.__state = state;
+    this.__variableState = state;
   }
   static getType() {
     return "variable";
   }
   static clone(node) {
-    return new _VariableNode(node.reference, { ...node.__state }, node.__key);
+    return new _VariableNode(node.reference, { ...node.__variableState }, node.__key);
   }
   /** Imports the node from serialized JSON (i.e. the data provided to the editor's initial state) */
   static importJSON(serializedNode) {
@@ -1735,14 +1737,14 @@ var VariableNode = class _VariableNode extends import_lexical5.DecoratorNode {
   }
   /** Gets the node's current state */
   getState() {
-    return this.getLatest().__state;
+    return this.getLatest().__variableState;
   }
   /**
    * Updates the node's variables state so it knows its current validity, display name, etc
    * The plugin updates this whenever the variables prop changes.
    */
   setState(state) {
-    this.getWritable().__state = state;
+    this.getWritable().__variableState = state;
   }
   /**
    * Serializes the node to JSON for editor initial state
@@ -1782,7 +1784,7 @@ var VariableNode = class _VariableNode extends import_lexical5.DecoratorNode {
    * rely on Context, etc in this renderer.
    */
   decorate() {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(VariableNodeComponent, { state: this.__state, reference: this.reference, nodeKey: this.__key });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(VariableNodeComponent, { state: this.__variableState, reference: this.reference, nodeKey: this.__key });
   }
 };
 function $convertBindingElement(domNode) {
@@ -2048,27 +2050,40 @@ var placeholderCompact = import_react18.css`
 var import_react19 = require("@emotion/react");
 var import_design_system7 = require("@uniformdev/design-system");
 var variableBindButton = import_react19.css`
-  align-items: center;
-  border: none;
+  --hover-color: var(--accent-dark-hover);
+  --active-color: var(--accent-dark-active);
+  border: 1px solid transparent;
   border-radius: var(--rounded-base);
   background: none;
+  color: var(--gray-300);
   display: flex;
-  height: 1.2rem;
-  padding: var(--spacing-2xs);
+  align-items: center;
+  justify-content: center;
+  max-width: fit-content;
+  padding: 0.125rem;
   transition:
+    border-color var(--duration-fast) var(--timing-ease-out),
     background var(--duration-fast) var(--timing-ease-out),
-    color var(--duration-fast) var(--timing-ease-out);
-  width: 1.2rem;
+    color var(--duration-fast) var(--timing-ease-out),
+    box-shadow var(--duration-fast) var(--timing-ease-out);
 
-  &:hover,
-  &[aria-pressed='true']:not(:disabled) {
-    background: var(--brand-secondary-3);
-    color: var(--white);
+  &:hover:not([aria-disabled='true']),
+  &:focus:not([aria-disabled='true']),
+  &:focus-within:not([aria-disabled='true']) {
+    color: var(--gray-500);
+    border-color: var(--hover-color);
+  }
+
+  &:active:not([aria-disabled='true']),
+  &[aria-pressed='true']:not([aria-disabled='true']) {
+    color: var(--active-color);
   }
 
   &[aria-disabled='true'] {
     background: none;
     color: currentColor;
+    opacity: var(--opacity-50);
+    cursor: default;
   }
 
   // fixes menu resizing issue within iframes
@@ -2142,7 +2157,6 @@ var inputMultiLine = (lines) => import_react19.css`
 
 // src/components/Variables/toolbox/InputVariablesProvider.tsx
 var import_canvas6 = require("@uniformdev/canvas");
-var React4 = __toESM(require("react"));
 var import_react20 = require("react");
 function useInputVariablesState({
   value,
@@ -2159,14 +2173,14 @@ function useInputVariablesState({
 }) {
   const { variables } = useVariables(true);
   const variableReferenceCountInValue = (0, import_canvas6.hasReferencedVariables)(value != null ? value : "");
-  const [lastKnownId, setLastKnownId] = React4.useState(id);
-  const [hadVariablesInValue, setHadVariablesInValue] = React4.useState(variableReferenceCountInValue > 0);
-  React4.useEffect(() => {
+  const [lastKnownId, setLastKnownId] = (0, import_react20.useState)(id);
+  const [hadVariablesInValue, setHadVariablesInValue] = (0, import_react20.useState)(variableReferenceCountInValue > 0);
+  (0, import_react20.useEffect)(() => {
     if (variableReferenceCountInValue) {
       setHadVariablesInValue(true);
     }
   }, [variableReferenceCountInValue]);
-  React4.useEffect(() => {
+  (0, import_react20.useEffect)(() => {
     if (id !== lastKnownId) {
       setLastKnownId(id);
       setHadVariablesInValue(variableReferenceCountInValue > 0);
@@ -2216,30 +2230,6 @@ var labelText = import_react21.css`
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var variableBindButton2 = import_react21.css`
-  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;
-  }
-`;
 
 // src/components/Variables/toolbox/VariablesComposerVariableMenu.tsx
 var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
@@ -2286,7 +2276,7 @@ function SelectVariableMenu({
           css: [menuBtn, buttonCss],
           type: "button",
           "data-testid": "insert-variable",
-          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_CgUsbC.CgUsbC, { size: "1.4rem" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_CgUsbC.CgUsbC, { size: "1rem" })
         }
       ),
       children: [
@@ -2379,7 +2369,7 @@ function VariableField({
     VariablesComposerVariableMenu,
     {
       ...selectVariableMenuOptions,
-      buttonCss: [variableBindButton2, selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.buttonCss],
+      buttonCss: [variableBindButton, selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.buttonCss],
       buttonProps: isActive ? { "aria-pressed": "true" } : void 0
     }
   ) }) : null;
@@ -2450,8 +2440,8 @@ function VariablesComposer(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const editorState = (0, import_react25.useRef)();
-  const updateTimeout = (0, import_react25.useRef)();
+  const editorState = (0, import_react25.useRef)(void 0);
+  const updateTimeout = (0, import_react25.useRef)(void 0);
   if (typeof document === "undefined") return null;
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_LexicalComposer.LexicalComposer, { initialConfig: editorConfig, children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -2488,7 +2478,7 @@ function VariablesComposer(props) {
 var import_clipboard = require("@lexical/clipboard");
 var import_LexicalComposerContext9 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
-var import_LexicalErrorBoundary = __toESM(require("@lexical/react/LexicalErrorBoundary"));
+var import_LexicalErrorBoundary = require("@lexical/react/LexicalErrorBoundary");
 var import_LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin");
 var import_LexicalPlainTextPlugin = require("@lexical/react/LexicalPlainTextPlugin");
 var import_utils4 = require("@lexical/utils");
@@ -2506,7 +2496,7 @@ function VariablesComposerInput({
       {
         contentEditable: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_LexicalContentEditable.ContentEditable, { ...contentEditableProps, placeholder: null, "aria-placeholder": void 0 }),
         placeholder: placeholder ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: placeholder }) : null,
-        ErrorBoundary: import_LexicalErrorBoundary.default
+        ErrorBoundary: import_LexicalErrorBoundary.LexicalErrorBoundary
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RichishCopyAndPastePlugin, {}),
@@ -2656,6 +2646,7 @@ function InputVariables(props) {
                   portal: renderMenuInPortal,
                   replaceValueOnVariableInsert: useInputWithNoVariables,
                   useInputWhenNoVariables: useInputWithNoVariables,
+                  isActive: hadVariablesInValue,
                   children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     VariablesComposerInput,
                     {
@@ -2744,6 +2735,7 @@ function InputVariablesOverlayMenu({
   disabled,
   useInputWhenNoVariables,
   portal,
+  isActive,
   ...props
 }) {
   if (disabled) {
@@ -2757,7 +2749,8 @@ function InputVariablesOverlayMenu({
         ...props,
         portal,
         tip: useInputWhenNoVariables ? void 0 : "Tip: access this list by typing $$",
-        buttonCss: menuBtn2
+        buttonCss: [menuBtn2, variableBindButton],
+        buttonProps: isActive ? { "aria-pressed": "true" } : void 0
       }
     )
   ] });
@@ -2810,7 +2803,7 @@ function ParameterConnectionIndicator({
                 css: [menuBtn, variableBindButton],
                 type: "button",
                 "data-testid": "insert-variable",
-                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_CgUsbC2.CgUsbC, { size: "1.4rem" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_CgUsbC2.CgUsbC, { size: "1rem" })
               }
             )
           }
@@ -3030,13 +3023,13 @@ ${prettifyBindExpression(bindExpression)}`
 
 // src/components/Variables/VariablesList.tsx
 var import_react35 = require("@emotion/react");
+var import_dnd2 = require("@hello-pangea/dnd");
 var import_CgTrash = require("@react-icons/all-files/cg/CgTrash");
 var import_design_system13 = require("@uniformdev/design-system");
-var import_react_beautiful_dnd2 = require("react-beautiful-dnd");
 
 // src/components/DragDropContext.tsx
+var import_dnd = require("@hello-pangea/dnd");
 var import_react33 = require("react");
-var import_react_beautiful_dnd = require("react-beautiful-dnd");
 var import_react_use = require("react-use");
 var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
 function DragDropContext({ children, ...props }) {
@@ -3048,7 +3041,7 @@ function DragDropContext({ children, ...props }) {
     300,
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_beautiful_dnd.DragDropContext, { ...props, children: isReady ? children : null });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dnd.DragDropContext, { ...props, children: isReady ? children : null });
 }
 
 // src/components/Variables/styles/VariablesList.styles.ts
@@ -3098,8 +3091,8 @@ var variableValue = import_react34.css`
 
 // src/components/Variables/VariablesList.tsx
 var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
-var DroppableHack = import_react_beautiful_dnd2.Droppable;
-var DraggableHack = import_react_beautiful_dnd2.Draggable;
+var DroppableHack = import_dnd2.Droppable;
+var DraggableHack = import_dnd2.Draggable;
 function VariablesList() {
   const { variables, dispatch, readOnly } = useVariables();
   const sorted = variablesToList(variables).filter((variable) => !variable.system);
@@ -3291,7 +3284,8 @@ function TextVariableRenderer({ definition, value, setValue }) {
       value: value != null ? value : "",
       caption: (_a = definition.helpText) != null ? _a : definition.default !== "" ? `Default value: ${definition.default}` : void 0,
       onChange: setValue,
-      "data-testid": "variable-input"
+      "data-testid": "variable-input",
+      disableInlineMenu: "by-label"
     }
   ) });
 }
@@ -3302,12 +3296,12 @@ var import_design_system15 = require("@uniformdev/design-system");
 var import_react38 = require("react");
 
 // src/components/Request/RequestProvider.tsx
-var React5 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_jsx_runtime35 = require("@emotion/react/jsx-runtime");
-var RequestContext = React5.createContext(null);
+var RequestContext = React4.createContext(null);
 function RequestProvider({ value, onChange, children }) {
-  const [listVersion, setListVersion] = React5.useState(0);
-  const contextValue = React5.useMemo(() => {
+  const [listVersion, setListVersion] = React4.useState(0);
+  const contextValue = React4.useMemo(() => {
     return {
       dispatch: (event) => {
         if (event.type === "setRelativeUrl") {
@@ -3379,7 +3373,7 @@ function RequestProvider({ value, onChange, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RequestContext.Provider, { value: contextValue, children });
 }
 function useRequest() {
-  const context = React5.useContext(RequestContext);
+  const context = React4.useContext(RequestContext);
   if (!context) {
     throw new Error("No RequestProvider present");
   }
@@ -4755,8 +4749,8 @@ function legacyThemeMapper(theme) {
 }
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
+var import_dnd3 = require("@hello-pangea/dnd");
 var import_design_system27 = require("@uniformdev/design-system");
-var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
 
 // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
 var import_react50 = require("@emotion/react");
@@ -4785,8 +4779,8 @@ var ObjectSearchResultListTitle = import_react50.css`
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
 var import_jsx_runtime55 = require("@emotion/react/jsx-runtime");
-var DroppableHack2 = import_react_beautiful_dnd3.Droppable;
-var DraggableHack2 = import_react_beautiful_dnd3.Draggable;
+var DroppableHack2 = import_dnd3.Droppable;
+var DraggableHack2 = import_dnd3.Draggable;
 function ObjectSearchResultList({
   resultLabelText = "Selected",
   removeButtonText = "Remove all",

package/dist/index.mjs

@@ -471,14 +471,14 @@ function deserializeVariablesEditorState(serialized) {
       children: [
         {
           children: result,
-          direction: "ltr",
+          direction: null,
           format: "",
           indent: 0,
           type: "paragraph",
           version: 1
         }
       ],
-      direction: "ltr",
+      direction: null,
       format: "",
       indent: 0,
       type: "root",
@@ -774,7 +774,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Button, Callout, HorizontalRhythm, Input, useShortcut } from "@uniformdev/design-system";
 import { useLayoutEffect, useRef as useRef2 } from "react";
 import { useForm } from "react-hook-form";
-import * as z from "zod";
+import * as z from "zod/v3";
 
 // src/components/Variables/styles/VariableEditor.styles.ts
 import { css as css2 } from "@emotion/react";
@@ -1146,18 +1146,17 @@ var DISCONNECT_VARIABLE_COMMAND = createCommand(
   "uniform:disconnect-variable"
 );
 var INSERT_VARIABLE_COMMAND = createCommand("uniform:insert-variable");
-var TRIGGER = "\\$\\$";
-var LENGTH_LIMIT = 20;
-var DollarSignVariablesRegex = new RegExp(`(^.*)(${TRIGGER}(.{0,${LENGTH_LIMIT}}))$`);
+var DollarSignVariablesRegex = /(^.*)(\$\$(.{0,20}))$/;
 function getPossibleQueryMatch(text) {
   const match = DollarSignVariablesRegex.exec(text);
   if (match !== null) {
     const maybeLeadingWhitespace = match[1];
     const matchingString = match[3];
+    const replaceableString = match[2];
     return {
       leadOffset: match.index + maybeLeadingWhitespace.length,
       matchingString,
-      replaceableString: match[2]
+      replaceableString
     };
   }
   return null;
@@ -1277,7 +1276,10 @@ function VariablesPlugin({
       filteredGroupedVariables: groupedVariables.map((group) => ({
         name: group.name,
         variables: group.variables.filter(
-          (option) => option.name.toLowerCase().includes(query) || option.name === ADD_VARIABLE_OPTION
+          (option) => {
+            var _a;
+            return option.name === ADD_VARIABLE_OPTION || option.name.toLowerCase().includes(query) || ((_a = option.displayName) == null ? void 0 : _a.toLowerCase().includes(query));
+          }
         )
       })).filter((group) => group.variables.length > 0),
       filteredMenuOptions: menuOptions.filter(
@@ -1568,13 +1570,13 @@ var VariableNode = class _VariableNode extends DecoratorNode {
   constructor(reference, state, key) {
     super(key);
     this.reference = reference;
-    this.__state = state;
+    this.__variableState = state;
   }
   static getType() {
     return "variable";
   }
   static clone(node) {
-    return new _VariableNode(node.reference, { ...node.__state }, node.__key);
+    return new _VariableNode(node.reference, { ...node.__variableState }, node.__key);
   }
   /** Imports the node from serialized JSON (i.e. the data provided to the editor's initial state) */
   static importJSON(serializedNode) {
@@ -1589,14 +1591,14 @@ var VariableNode = class _VariableNode extends DecoratorNode {
   }
   /** Gets the node's current state */
   getState() {
-    return this.getLatest().__state;
+    return this.getLatest().__variableState;
   }
   /**
    * Updates the node's variables state so it knows its current validity, display name, etc
    * The plugin updates this whenever the variables prop changes.
    */
   setState(state) {
-    this.getWritable().__state = state;
+    this.getWritable().__variableState = state;
   }
   /**
    * Serializes the node to JSON for editor initial state
@@ -1636,7 +1638,7 @@ var VariableNode = class _VariableNode extends DecoratorNode {
    * rely on Context, etc in this renderer.
    */
   decorate() {
-    return /* @__PURE__ */ jsx22(VariableNodeComponent, { state: this.__state, reference: this.reference, nodeKey: this.__key });
+    return /* @__PURE__ */ jsx22(VariableNodeComponent, { state: this.__variableState, reference: this.reference, nodeKey: this.__key });
   }
 };
 function $convertBindingElement(domNode) {
@@ -1908,27 +1910,40 @@ var placeholderCompact = css4`
 import { css as css5 } from "@emotion/react";
 import { scrollbarStyles } from "@uniformdev/design-system";
 var variableBindButton = css5`
-  align-items: center;
-  border: none;
+  --hover-color: var(--accent-dark-hover);
+  --active-color: var(--accent-dark-active);
+  border: 1px solid transparent;
   border-radius: var(--rounded-base);
   background: none;
+  color: var(--gray-300);
   display: flex;
-  height: 1.2rem;
-  padding: var(--spacing-2xs);
+  align-items: center;
+  justify-content: center;
+  max-width: fit-content;
+  padding: 0.125rem;
   transition:
+    border-color var(--duration-fast) var(--timing-ease-out),
     background var(--duration-fast) var(--timing-ease-out),
-    color var(--duration-fast) var(--timing-ease-out);
-  width: 1.2rem;
+    color var(--duration-fast) var(--timing-ease-out),
+    box-shadow var(--duration-fast) var(--timing-ease-out);
 
-  &:hover,
-  &[aria-pressed='true']:not(:disabled) {
-    background: var(--brand-secondary-3);
-    color: var(--white);
+  &:hover:not([aria-disabled='true']),
+  &:focus:not([aria-disabled='true']),
+  &:focus-within:not([aria-disabled='true']) {
+    color: var(--gray-500);
+    border-color: var(--hover-color);
+  }
+
+  &:active:not([aria-disabled='true']),
+  &[aria-pressed='true']:not([aria-disabled='true']) {
+    color: var(--active-color);
   }
 
   &[aria-disabled='true'] {
     background: none;
     color: currentColor;
+    opacity: var(--opacity-50);
+    cursor: default;
   }
 
   // fixes menu resizing issue within iframes
@@ -2002,8 +2017,7 @@ var inputMultiLine = (lines) => css5`
 
 // src/components/Variables/toolbox/InputVariablesProvider.tsx
 import { hasReferencedVariables } from "@uniformdev/canvas";
-import * as React4 from "react";
-import { useMemo as useMemo7 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo7, useState as useState5 } from "react";
 function useInputVariablesState({
   value,
   onChange,
@@ -2019,14 +2033,14 @@ function useInputVariablesState({
 }) {
   const { variables } = useVariables(true);
   const variableReferenceCountInValue = hasReferencedVariables(value != null ? value : "");
-  const [lastKnownId, setLastKnownId] = React4.useState(id);
-  const [hadVariablesInValue, setHadVariablesInValue] = React4.useState(variableReferenceCountInValue > 0);
-  React4.useEffect(() => {
+  const [lastKnownId, setLastKnownId] = useState5(id);
+  const [hadVariablesInValue, setHadVariablesInValue] = useState5(variableReferenceCountInValue > 0);
+  useEffect7(() => {
     if (variableReferenceCountInValue) {
       setHadVariablesInValue(true);
     }
   }, [variableReferenceCountInValue]);
-  React4.useEffect(() => {
+  useEffect7(() => {
     if (id !== lastKnownId) {
       setLastKnownId(id);
       setHadVariablesInValue(variableReferenceCountInValue > 0);
@@ -2076,30 +2090,6 @@ var labelText = css6`
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var variableBindButton2 = css6`
-  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;
-  }
-`;
 
 // src/components/Variables/toolbox/VariablesComposerVariableMenu.tsx
 import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
@@ -2146,7 +2136,7 @@ function SelectVariableMenu({
           css: [menuBtn, buttonCss],
           type: "button",
           "data-testid": "insert-variable",
-          children: /* @__PURE__ */ jsx23(CgUsbC, { size: "1.4rem" })
+          children: /* @__PURE__ */ jsx23(CgUsbC, { size: "1rem" })
         }
       ),
       children: [
@@ -2239,7 +2229,7 @@ function VariableField({
     VariablesComposerVariableMenu,
     {
       ...selectVariableMenuOptions,
-      buttonCss: [variableBindButton2, selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.buttonCss],
+      buttonCss: [variableBindButton, selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.buttonCss],
       buttonProps: isActive ? { "aria-pressed": "true" } : void 0
     }
   ) }) : null;
@@ -2310,8 +2300,8 @@ function VariablesComposer(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const editorState = useRef5();
-  const updateTimeout = useRef5();
+  const editorState = useRef5(void 0);
+  const updateTimeout = useRef5(void 0);
   if (typeof document === "undefined") return null;
   return /* @__PURE__ */ jsxs10(LexicalComposer, { initialConfig: editorConfig, children: [
     /* @__PURE__ */ jsx26(
@@ -2352,7 +2342,7 @@ import {
 } from "@lexical/clipboard";
 import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexical/react/LexicalComposerContext";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
 import { mergeRegister as mergeRegister4, objectKlassEquals } from "@lexical/utils";
@@ -2528,6 +2518,7 @@ function InputVariables(props) {
                   portal: renderMenuInPortal,
                   replaceValueOnVariableInsert: useInputWithNoVariables,
                   useInputWhenNoVariables: useInputWithNoVariables,
+                  isActive: hadVariablesInValue,
                   children: /* @__PURE__ */ jsx28(
                     VariablesComposerInput,
                     {
@@ -2616,6 +2607,7 @@ function InputVariablesOverlayMenu({
   disabled,
   useInputWhenNoVariables,
   portal,
+  isActive,
   ...props
 }) {
   if (disabled) {
@@ -2629,7 +2621,8 @@ function InputVariablesOverlayMenu({
         ...props,
         portal,
         tip: useInputWhenNoVariables ? void 0 : "Tip: access this list by typing $$",
-        buttonCss: menuBtn2
+        buttonCss: [menuBtn2, variableBindButton],
+        buttonProps: isActive ? { "aria-pressed": "true" } : void 0
       }
     )
   ] });
@@ -2682,7 +2675,7 @@ function ParameterConnectionIndicator({
                 css: [menuBtn, variableBindButton],
                 type: "button",
                 "data-testid": "insert-variable",
-                children: /* @__PURE__ */ jsx29(CgUsbC2, { size: "1.4rem" })
+                children: /* @__PURE__ */ jsx29(CgUsbC2, { size: "1rem" })
               }
             )
           }
@@ -2902,6 +2895,7 @@ ${prettifyBindExpression(bindExpression)}`
 
 // src/components/Variables/VariablesList.tsx
 import { css as css10 } from "@emotion/react";
+import { Draggable, Droppable } from "@hello-pangea/dnd";
 import { CgTrash } from "@react-icons/all-files/cg/CgTrash";
 import {
   AddListButton,
@@ -2914,11 +2908,10 @@ import {
   TableHead,
   TableRow
 } from "@uniformdev/design-system";
-import { Draggable, Droppable } from "react-beautiful-dnd";
 
 // src/components/DragDropContext.tsx
+import { DragDropContext as BaseDragDropContext } from "@hello-pangea/dnd";
 import { useState as useState8 } from "react";
-import { DragDropContext as BaseDragDropContext } from "react-beautiful-dnd";
 import { useDebounce } from "react-use";
 import { jsx as jsx32 } from "@emotion/react/jsx-runtime";
 function DragDropContext({ children, ...props }) {
@@ -3173,7 +3166,8 @@ function TextVariableRenderer({ definition, value, setValue }) {
       value: value != null ? value : "",
       caption: (_a = definition.helpText) != null ? _a : definition.default !== "" ? `Default value: ${definition.default}` : void 0,
       onChange: setValue,
-      "data-testid": "variable-input"
+      "data-testid": "variable-input",
+      disableInlineMenu: "by-label"
     }
   ) });
 }
@@ -3184,12 +3178,12 @@ import { InputSelect, JsonEditor } from "@uniformdev/design-system";
 import { useState as useState10 } from "react";
 
 // src/components/Request/RequestProvider.tsx
-import * as React5 from "react";
+import * as React4 from "react";
 import { jsx as jsx36 } from "@emotion/react/jsx-runtime";
-var RequestContext = React5.createContext(null);
+var RequestContext = React4.createContext(null);
 function RequestProvider({ value, onChange, children }) {
-  const [listVersion, setListVersion] = React5.useState(0);
-  const contextValue = React5.useMemo(() => {
+  const [listVersion, setListVersion] = React4.useState(0);
+  const contextValue = React4.useMemo(() => {
     return {
       dispatch: (event) => {
         if (event.type === "setRelativeUrl") {
@@ -3261,7 +3255,7 @@ function RequestProvider({ value, onChange, children }) {
   return /* @__PURE__ */ jsx36(RequestContext.Provider, { value: contextValue, children });
 }
 function useRequest() {
-  const context = React5.useContext(RequestContext);
+  const context = React4.useContext(RequestContext);
   if (!context) {
     throw new Error("No RequestProvider present");
   }
@@ -4664,11 +4658,11 @@ function legacyThemeMapper(theme) {
 }
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
-import { Button as Button4, Counter } from "@uniformdev/design-system";
 import {
   Draggable as Draggable2,
   Droppable as Droppable2
-} from "react-beautiful-dnd";
+} from "@hello-pangea/dnd";
+import { Button as Button4, Counter } from "@uniformdev/design-system";
 
 // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
 import { css as css20 } from "@emotion/react";
@@ -6788,7 +6782,7 @@ import { Icon as Icon5 } from "@uniformdev/design-system";
 
 // src/components/SearchAndFilter/FilterMenu.tsx
 import { HorizontalRhythm as HorizontalRhythm8, VerticalRhythm as VerticalRhythm6 } from "@uniformdev/design-system";
-import React7, { useEffect as useEffect19 } from "react";
+import React6, { useEffect as useEffect19 } from "react";
 import { jsx as jsx76, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
 var SearchAndFilterOptionsContainer2 = ({
   buttonRow,
@@ -6820,7 +6814,7 @@ var FilterMenu = ({
   resetButtonText = "reset"
 }) => {
   const { filterVisibility, setFilterVisibility, handleResetFilters, filters } = useSearchAndFilter();
-  const innerMenuRef = React7.useRef(null);
+  const innerMenuRef = React6.useRef(null);
   useEffect19(() => {
     var _a;
     if (filterVisibility) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "20.47.0",
+  "version": "20.47.1-alpha.9+38d1d052b6",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -44,25 +44,25 @@
     "document:prebuild": "api-extractor run --local"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.3.1",
-    "@lexical/clipboard": "0.25.0",
-    "@lexical/react": "0.25.0",
-    "@lexical/selection": "0.25.0",
-    "@lexical/utils": "0.25.0",
+    "@hello-pangea/dnd": "18.0.1",
+    "@hookform/resolvers": "^5.2.2",
+    "@lexical/clipboard": "0.39.0",
+    "@lexical/react": "0.39.0",
+    "@lexical/selection": "0.39.0",
+    "@lexical/utils": "0.39.0",
     "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v5.5.0/react-icons-all-files-5.5.0.tgz",
-    "@uniformdev/canvas": "20.47.0",
-    "@uniformdev/design-system": "20.47.0",
-    "@uniformdev/mesh-sdk": "20.47.0",
-    "@uniformdev/richtext": "20.47.0",
+    "@uniformdev/canvas": "20.47.1-alpha.9+38d1d052b6",
+    "@uniformdev/design-system": "20.47.1-alpha.9+38d1d052b6",
+    "@uniformdev/mesh-sdk": "20.47.1-alpha.9+38d1d052b6",
+    "@uniformdev/richtext": "20.47.1-alpha.9+38d1d052b6",
     "dequal": "^2.0.3",
-    "lexical": "0.25.0",
+    "lexical": "0.39.0",
     "mitt": "3.0.1",
-    "react-beautiful-dnd": "13.1.1",
-    "react-hook-form": "^7.47.0",
-    "react-use": "17.5.1",
+    "react-hook-form": "7.65.0",
+    "react-use": "17.6.0",
     "timeago.js": "4.0.2",
     "uuid": "9.0.1",
-    "zod": "3.23.8"
+    "zod": "3.25.76"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.13.5",
@@ -70,15 +70,14 @@
     "react-dom": ">=16.8"
   },
   "devDependencies": {
-    "@emotion/react": "11.13.5",
+    "@emotion/react": "11.14.0",
     "@storybook/react": "10.1.0",
     "@svgr/cli": "6.5.1",
-    "@types/react": "18.3.24",
-    "@types/react-beautiful-dnd": "13.1.8",
-    "@types/react-dom": "18.3.7",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
     "@types/uuid": "9.0.4",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "19.2.1",
+    "react-dom": "19.2.1"
   },
   "files": [
     "/dist"
@@ -86,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "446f701d32eee97220ab693e69b0952ed95cc1c5"
+  "gitHead": "38d1d052b632b873208982e8aefa300e871ba5b7"
 }