@uniformdev/mesh-sdk-react 20.31.1-alpha.1 → 20.31.1-alpha.185

package/dist/index.d.mts

@@ -8,7 +8,7 @@ import { DataVariableDefinition, DataResourceVariables, DataType, DataSourceVari
 import { Emitter } from 'mitt';
 import { TDate } from 'timeago.js';
 import * as lexical from 'lexical';
-import { SerializedEditorState, SerializedLexicalNode, Spread, DecoratorNode, NodeKey, LexicalNode, LexicalEditor, EditorState, SerializedRootNode } from 'lexical';
+import { SerializedEditorState, SerializedLexicalNode, Spread, DecoratorNode, NodeKey, DOMConversionMap, LexicalNode, LexicalEditor, EditorState, SerializedRootNode } from 'lexical';
 import { Interpolation, Theme, SerializedStyles } from '@emotion/react';
 import { InputSelectProps, IconType } from '@uniformdev/design-system';
 export { AddListButton, AddListButtonProps, Button, ButtonProps, Callout, CalloutProps, DrawerContent, Heading, HeadingProps, Input, InputComboBox, InputComboBoxProps, InputKeywordSearch, InputProps, InputSelect, InputToggle, InputToggleProps, Label, LabelProps, LoadingIndicator, LoadingOverlay, Menu, MenuItem, MenuItemProps, MenuProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, ScrollableList, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, Switch, SwitchProps, Textarea, TextareaProps, Theme, ThemeProps, useParameterShell, utilityColors } from '@uniformdev/design-system';
@@ -248,6 +248,7 @@ declare class VariableNode extends DecoratorNode<JSX.Element> {
     /** Creates the DOM wrapper that hosts the node */
     createDOM(): HTMLSpanElement;
     updateDOM(): boolean;
+    static importDOM(): DOMConversionMap | null;
     /**
      * Render the variable node using React.
      * NOTE: this is effectively an island of React, and you may not call hooks,

package/dist/index.d.ts

@@ -8,7 +8,7 @@ import { DataVariableDefinition, DataResourceVariables, DataType, DataSourceVari
 import { Emitter } from 'mitt';
 import { TDate } from 'timeago.js';
 import * as lexical from 'lexical';
-import { SerializedEditorState, SerializedLexicalNode, Spread, DecoratorNode, NodeKey, LexicalNode, LexicalEditor, EditorState, SerializedRootNode } from 'lexical';
+import { SerializedEditorState, SerializedLexicalNode, Spread, DecoratorNode, NodeKey, DOMConversionMap, LexicalNode, LexicalEditor, EditorState, SerializedRootNode } from 'lexical';
 import { Interpolation, Theme, SerializedStyles } from '@emotion/react';
 import { InputSelectProps, IconType } from '@uniformdev/design-system';
 export { AddListButton, AddListButtonProps, Button, ButtonProps, Callout, CalloutProps, DrawerContent, Heading, HeadingProps, Input, InputComboBox, InputComboBoxProps, InputKeywordSearch, InputProps, InputSelect, InputToggle, InputToggleProps, Label, LabelProps, LoadingIndicator, LoadingOverlay, Menu, MenuItem, MenuItemProps, MenuProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, ScrollableList, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, Switch, SwitchProps, Textarea, TextareaProps, Theme, ThemeProps, useParameterShell, utilityColors } from '@uniformdev/design-system';
@@ -248,6 +248,7 @@ declare class VariableNode extends DecoratorNode<JSX.Element> {
     /** Creates the DOM wrapper that hosts the node */
     createDOM(): HTMLSpanElement;
     updateDOM(): boolean;
+    static importDOM(): DOMConversionMap | null;
     /**
      * Render the variable node using React.
      * NOTE: this is effectively an island of React, and you may not call hooks,

package/dist/index.esm.js

@@ -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 { z } from "zod";
+import * as z from "zod";
 
 // src/components/Variables/styles/VariableEditor.styles.ts
 import { css as css2 } from "@emotion/react";
@@ -1616,6 +1616,14 @@ var VariableNode = class _VariableNode extends DecoratorNode {
   updateDOM() {
     return false;
   }
+  static importDOM() {
+    return {
+      binding: () => ({
+        conversion: $convertBindingElement,
+        priority: 0
+      })
+    };
+  }
   /**
    * Render the variable node using React.
    * NOTE: this is effectively an island of React, and you may not call hooks,
@@ -1625,6 +1633,21 @@ var VariableNode = class _VariableNode extends DecoratorNode {
     return /* @__PURE__ */ jsx22(VariableNodeComponent, { state: this.__state, reference: this.reference, nodeKey: this.__key });
   }
 };
+function $convertBindingElement(domNode) {
+  const element = domNode;
+  const reference = element.textContent.replace(variablePrefix, "").replace(variableSuffix, "");
+  const node = $createVariableNode(reference, {
+    displayName: prettifyBindExpression(reference),
+    hasClickEvent: true,
+    referenceIsValid: true,
+    tooltip: void 0,
+    isFresh: true,
+    isLoading: false
+  });
+  return {
+    node
+  };
+}
 function $createVariableNode(variableReference, state) {
   return new VariableNode(variableReference, state);
 }
@@ -1945,6 +1968,7 @@ var input2 = css5`
   &:disabled,
   &:disabled::placeholder,
   &:disabled:hover {
+    border-color: var(--gray-200);
     border-radius: var(--rounded-sm);
     cursor: not-allowed;
     color: var(--gray-400);
@@ -1954,6 +1978,7 @@ var input2 = css5`
   &[contenteditable='false'] {
     cursor: not-allowed;
     color: var(--gray-400);
+    border-color: var(--gray-200);
   }
 
   > p {
@@ -2947,6 +2972,8 @@ var variableValue = css9`
 
 // src/components/Variables/VariablesList.tsx
 import { Fragment as Fragment8, jsx as jsx33, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
+var DroppableHack = Droppable;
+var DraggableHack = Draggable;
 function VariablesList() {
   const { variables, dispatch, readOnly } = useVariables();
   const sorted = variablesToList(variables).filter((variable) => !variable.system);
@@ -2968,7 +2995,7 @@ function VariablesList() {
     }
   };
   return /* @__PURE__ */ jsxs16(Fragment8, { children: [
-    /* @__PURE__ */ jsx33(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx33(Droppable, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ jsxs16(Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
+    /* @__PURE__ */ jsx33(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx33(DroppableHack, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ jsxs16(Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
       /* @__PURE__ */ jsx33(TableHead, { children: /* @__PURE__ */ jsxs16(TableRow, { children: [
         /* @__PURE__ */ jsx33(TableCellHead, { children: "Name" }),
         /* @__PURE__ */ jsx33(TableCellHead, { children: "Default Value" }),
@@ -2979,7 +3006,7 @@ function VariablesList() {
           const text = displayName != null ? displayName : name2;
           const textValue = variableDefaultTextValue(defaultValue);
           return /* @__PURE__ */ jsx33(
-            Draggable,
+            DraggableHack,
             {
               draggableId: name2,
               index,
@@ -3594,8 +3621,8 @@ function urlEncodeRequestParameter(parameter, varValues) {
     value: decodeVariablesInUrlEncodedString(encodeURIComponent(parameter.value), varValues)
   };
 }
-function decodeVariablesInUrlEncodedString(string, varValues) {
-  return string.replace(/(\$|%24)%7B(.*?)%7D/g, (_all, _money, body) => {
+function decodeVariablesInUrlEncodedString(string2, varValues) {
+  return string2.replace(/(\$|%24)%7B(.*?)%7D/g, (_all, _money, body) => {
     var _a;
     const varName = decodeURIComponent(body);
     return ((_a = varValues == null ? void 0 : varValues[varName]) == null ? void 0 : _a.default) ? variableDefaultTextValue(varValues[varName].default) : `\${${varName}}`;
@@ -4202,7 +4229,7 @@ var ObjectSearchListItem = ({
         ),
         /* @__PURE__ */ jsxs23("div", { css: ObjectListItemInfoContainer, children: [
           selected ? /* @__PURE__ */ jsx49(Chip, { text: "selected", size: "xs" }) : null,
-          !popoverData ? null : /* @__PURE__ */ jsx49(Popover, { ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
+          !popoverData ? null : /* @__PURE__ */ jsx49(Popover, { ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
         !children ? null : /* @__PURE__ */ jsx49("div", { css: ObjectListItemUnControlledContent, children })
       ]
@@ -4232,7 +4259,6 @@ var ObjectSearchContainer = ({
       role: "list",
       css: css16`
         > div {
-          transition: max-height var(--duration-slow) var(--timing-ease-out);
           max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
         }
       `,
@@ -4627,7 +4653,10 @@ 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";
+import {
+  Draggable as Draggable2,
+  Droppable as Droppable2
+} from "react-beautiful-dnd";
 
 // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
 import { css as css20 } from "@emotion/react";
@@ -4656,6 +4685,8 @@ var ObjectSearchResultListTitle = css20`
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
 import { Fragment as Fragment10, jsx as jsx56, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
+var DroppableHack2 = Droppable2;
+var DraggableHack2 = Draggable2;
 function ObjectSearchResultList({
   resultLabelText = "Selected",
   removeButtonText = "Remove all",
@@ -4727,7 +4758,7 @@ function ObjectSearchResultList({
       ] })
     ] }),
     !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ jsx56(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx56(
-      Droppable2,
+      DroppableHack2,
       {
         droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select",
         renderClone: getContainerForDnDReparenting ? getDraggableItem : void 0,
@@ -4735,7 +4766,7 @@ function ObjectSearchResultList({
         children: (provided) => /* @__PURE__ */ jsxs28("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
           selectedListItems.map((item, i) => {
             return /* @__PURE__ */ jsx56(
-              Draggable2,
+              DraggableHack2,
               {
                 draggableId: item.id,
                 index: i,

package/dist/index.js

@@ -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 import_zod2 = require("zod");
+var z = __toESM(require("zod"));
 
 // src/components/Variables/styles/VariableEditor.styles.ts
 var import_react11 = require("@emotion/react");
@@ -932,13 +932,13 @@ var variablesFormContainer = import_react11.css`
 
 // src/components/Variables/VariableEditor.tsx
 var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
-var schema = import_zod2.z.object({
-  name: import_zod2.z.string().nonempty("Name can't be empty").regex(/^[^${}]+$/, "$, {, and } are reserved characters and cannot be used in a variable name"),
-  default: import_zod2.z.string(),
-  displayName: import_zod2.z.string().optional(),
-  helpText: import_zod2.z.string().optional(),
-  order: import_zod2.z.number().optional(),
-  type: import_zod2.z.string().optional()
+var schema = z.object({
+  name: z.string().nonempty("Name can't be empty").regex(/^[^${}]+$/, "$, {, and } are reserved characters and cannot be used in a variable name"),
+  default: z.string(),
+  displayName: z.string().optional(),
+  helpText: z.string().optional(),
+  order: z.number().optional(),
+  type: z.string().optional()
 });
 function VariableEditor({
   variable,
@@ -1762,6 +1762,14 @@ var VariableNode = class _VariableNode extends import_lexical5.DecoratorNode {
   updateDOM() {
     return false;
   }
+  static importDOM() {
+    return {
+      binding: () => ({
+        conversion: $convertBindingElement,
+        priority: 0
+      })
+    };
+  }
   /**
    * Render the variable node using React.
    * NOTE: this is effectively an island of React, and you may not call hooks,
@@ -1771,6 +1779,21 @@ var VariableNode = class _VariableNode extends import_lexical5.DecoratorNode {
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(VariableNodeComponent, { state: this.__state, reference: this.reference, nodeKey: this.__key });
   }
 };
+function $convertBindingElement(domNode) {
+  const element = domNode;
+  const reference = element.textContent.replace(variablePrefix, "").replace(variableSuffix, "");
+  const node = $createVariableNode(reference, {
+    displayName: prettifyBindExpression(reference),
+    hasClickEvent: true,
+    referenceIsValid: true,
+    tooltip: void 0,
+    isFresh: true,
+    isLoading: false
+  });
+  return {
+    node
+  };
+}
 function $createVariableNode(variableReference, state) {
   return new VariableNode(variableReference, state);
 }
@@ -2085,6 +2108,7 @@ var input2 = import_react19.css`
   &:disabled,
   &:disabled::placeholder,
   &:disabled:hover {
+    border-color: var(--gray-200);
     border-radius: var(--rounded-sm);
     cursor: not-allowed;
     color: var(--gray-400);
@@ -2094,6 +2118,7 @@ var input2 = import_react19.css`
   &[contenteditable='false'] {
     cursor: not-allowed;
     color: var(--gray-400);
+    border-color: var(--gray-200);
   }
 
   > p {
@@ -3065,6 +3090,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;
 function VariablesList() {
   const { variables, dispatch, readOnly } = useVariables();
   const sorted = variablesToList(variables).filter((variable) => !variable.system);
@@ -3086,7 +3113,7 @@ function VariablesList() {
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_beautiful_dnd2.Droppable, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_design_system13.Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DroppableHack, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_design_system13.Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system13.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_design_system13.TableRow, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system13.TableCellHead, { children: "Name" }),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system13.TableCellHead, { children: "Default Value" }),
@@ -3097,7 +3124,7 @@ function VariablesList() {
           const text = displayName != null ? displayName : name2;
           const textValue = variableDefaultTextValue(defaultValue);
           return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-            import_react_beautiful_dnd2.Draggable,
+            DraggableHack,
             {
               draggableId: name2,
               index,
@@ -3692,8 +3719,8 @@ function urlEncodeRequestParameter(parameter, varValues) {
     value: decodeVariablesInUrlEncodedString(encodeURIComponent(parameter.value), varValues)
   };
 }
-function decodeVariablesInUrlEncodedString(string, varValues) {
-  return string.replace(/(\$|%24)%7B(.*?)%7D/g, (_all, _money, body) => {
+function decodeVariablesInUrlEncodedString(string2, varValues) {
+  return string2.replace(/(\$|%24)%7B(.*?)%7D/g, (_all, _money, body) => {
     var _a;
     const varName = decodeURIComponent(body);
     return ((_a = varValues == null ? void 0 : varValues[varName]) == null ? void 0 : _a.default) ? variableDefaultTextValue(varValues[varName].default) : `\${${varName}}`;
@@ -4293,7 +4320,7 @@ var ObjectSearchListItem = ({
         ),
         /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { css: ObjectListItemInfoContainer, children: [
           selected ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system22.Chip, { text: "selected", size: "xs" }) : null,
-          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system22.Popover, { ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
+          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system22.Popover, { ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
         !children ? null : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { css: ObjectListItemUnControlledContent, children })
       ]
@@ -4323,7 +4350,6 @@ var ObjectSearchContainer = ({
       role: "list",
       css: import_react45.css`
         > div {
-          transition: max-height var(--duration-slow) var(--timing-ease-out);
           max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
         }
       `,
@@ -4747,6 +4773,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;
 function ObjectSearchResultList({
   resultLabelText = "Selected",
   removeButtonText = "Remove all",
@@ -4818,7 +4846,7 @@ function ObjectSearchResultList({
       ] })
     ] }),
     !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-      import_react_beautiful_dnd3.Droppable,
+      DroppableHack2,
       {
         droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select",
         renderClone: getContainerForDnDReparenting ? getDraggableItem : void 0,
@@ -4826,7 +4854,7 @@ function ObjectSearchResultList({
         children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
           selectedListItems.map((item, i) => {
             return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-              import_react_beautiful_dnd3.Draggable,
+              DraggableHack2,
               {
                 draggableId: item.id,
                 index: i,

package/dist/index.mjs

@@ -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 { z } from "zod";
+import * as z from "zod";
 
 // src/components/Variables/styles/VariableEditor.styles.ts
 import { css as css2 } from "@emotion/react";
@@ -1616,6 +1616,14 @@ var VariableNode = class _VariableNode extends DecoratorNode {
   updateDOM() {
     return false;
   }
+  static importDOM() {
+    return {
+      binding: () => ({
+        conversion: $convertBindingElement,
+        priority: 0
+      })
+    };
+  }
   /**
    * Render the variable node using React.
    * NOTE: this is effectively an island of React, and you may not call hooks,
@@ -1625,6 +1633,21 @@ var VariableNode = class _VariableNode extends DecoratorNode {
     return /* @__PURE__ */ jsx22(VariableNodeComponent, { state: this.__state, reference: this.reference, nodeKey: this.__key });
   }
 };
+function $convertBindingElement(domNode) {
+  const element = domNode;
+  const reference = element.textContent.replace(variablePrefix, "").replace(variableSuffix, "");
+  const node = $createVariableNode(reference, {
+    displayName: prettifyBindExpression(reference),
+    hasClickEvent: true,
+    referenceIsValid: true,
+    tooltip: void 0,
+    isFresh: true,
+    isLoading: false
+  });
+  return {
+    node
+  };
+}
 function $createVariableNode(variableReference, state) {
   return new VariableNode(variableReference, state);
 }
@@ -1945,6 +1968,7 @@ var input2 = css5`
   &:disabled,
   &:disabled::placeholder,
   &:disabled:hover {
+    border-color: var(--gray-200);
     border-radius: var(--rounded-sm);
     cursor: not-allowed;
     color: var(--gray-400);
@@ -1954,6 +1978,7 @@ var input2 = css5`
   &[contenteditable='false'] {
     cursor: not-allowed;
     color: var(--gray-400);
+    border-color: var(--gray-200);
   }
 
   > p {
@@ -2947,6 +2972,8 @@ var variableValue = css9`
 
 // src/components/Variables/VariablesList.tsx
 import { Fragment as Fragment8, jsx as jsx33, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
+var DroppableHack = Droppable;
+var DraggableHack = Draggable;
 function VariablesList() {
   const { variables, dispatch, readOnly } = useVariables();
   const sorted = variablesToList(variables).filter((variable) => !variable.system);
@@ -2968,7 +2995,7 @@ function VariablesList() {
     }
   };
   return /* @__PURE__ */ jsxs16(Fragment8, { children: [
-    /* @__PURE__ */ jsx33(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx33(Droppable, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ jsxs16(Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
+    /* @__PURE__ */ jsx33(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx33(DroppableHack, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ jsxs16(Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
       /* @__PURE__ */ jsx33(TableHead, { children: /* @__PURE__ */ jsxs16(TableRow, { children: [
         /* @__PURE__ */ jsx33(TableCellHead, { children: "Name" }),
         /* @__PURE__ */ jsx33(TableCellHead, { children: "Default Value" }),
@@ -2979,7 +3006,7 @@ function VariablesList() {
           const text = displayName != null ? displayName : name2;
           const textValue = variableDefaultTextValue(defaultValue);
           return /* @__PURE__ */ jsx33(
-            Draggable,
+            DraggableHack,
             {
               draggableId: name2,
               index,
@@ -3594,8 +3621,8 @@ function urlEncodeRequestParameter(parameter, varValues) {
     value: decodeVariablesInUrlEncodedString(encodeURIComponent(parameter.value), varValues)
   };
 }
-function decodeVariablesInUrlEncodedString(string, varValues) {
-  return string.replace(/(\$|%24)%7B(.*?)%7D/g, (_all, _money, body) => {
+function decodeVariablesInUrlEncodedString(string2, varValues) {
+  return string2.replace(/(\$|%24)%7B(.*?)%7D/g, (_all, _money, body) => {
     var _a;
     const varName = decodeURIComponent(body);
     return ((_a = varValues == null ? void 0 : varValues[varName]) == null ? void 0 : _a.default) ? variableDefaultTextValue(varValues[varName].default) : `\${${varName}}`;
@@ -4202,7 +4229,7 @@ var ObjectSearchListItem = ({
         ),
         /* @__PURE__ */ jsxs23("div", { css: ObjectListItemInfoContainer, children: [
           selected ? /* @__PURE__ */ jsx49(Chip, { text: "selected", size: "xs" }) : null,
-          !popoverData ? null : /* @__PURE__ */ jsx49(Popover, { ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
+          !popoverData ? null : /* @__PURE__ */ jsx49(Popover, { ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
         !children ? null : /* @__PURE__ */ jsx49("div", { css: ObjectListItemUnControlledContent, children })
       ]
@@ -4232,7 +4259,6 @@ var ObjectSearchContainer = ({
       role: "list",
       css: css16`
         > div {
-          transition: max-height var(--duration-slow) var(--timing-ease-out);
           max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
         }
       `,
@@ -4627,7 +4653,10 @@ 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";
+import {
+  Draggable as Draggable2,
+  Droppable as Droppable2
+} from "react-beautiful-dnd";
 
 // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
 import { css as css20 } from "@emotion/react";
@@ -4656,6 +4685,8 @@ var ObjectSearchResultListTitle = css20`
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
 import { Fragment as Fragment10, jsx as jsx56, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
+var DroppableHack2 = Droppable2;
+var DraggableHack2 = Draggable2;
 function ObjectSearchResultList({
   resultLabelText = "Selected",
   removeButtonText = "Remove all",
@@ -4727,7 +4758,7 @@ function ObjectSearchResultList({
       ] })
     ] }),
     !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ jsx56(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx56(
-      Droppable2,
+      DroppableHack2,
       {
         droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select",
         renderClone: getContainerForDnDReparenting ? getDraggableItem : void 0,
@@ -4735,7 +4766,7 @@ function ObjectSearchResultList({
         children: (provided) => /* @__PURE__ */ jsxs28("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
           selectedListItems.map((item, i) => {
             return /* @__PURE__ */ jsx56(
-              Draggable2,
+              DraggableHack2,
               {
                 draggableId: item.id,
                 index: i,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "20.31.1-alpha.1+b3b021f551",
+  "version": "20.31.1-alpha.185+f4131987e9",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -50,10 +50,10 @@
     "@lexical/selection": "0.25.0",
     "@lexical/utils": "0.25.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.31.1-alpha.1+b3b021f551",
-    "@uniformdev/design-system": "20.31.1-alpha.1+b3b021f551",
-    "@uniformdev/mesh-sdk": "20.31.1-alpha.1+b3b021f551",
-    "@uniformdev/richtext": "20.31.1-alpha.1+b3b021f551",
+    "@uniformdev/canvas": "20.31.1-alpha.185+f4131987e9",
+    "@uniformdev/design-system": "20.31.1-alpha.185+f4131987e9",
+    "@uniformdev/mesh-sdk": "20.31.1-alpha.185+f4131987e9",
+    "@uniformdev/richtext": "20.31.1-alpha.185+f4131987e9",
     "dequal": "^2.0.3",
     "lexical": "0.25.0",
     "mitt": "3.0.1",
@@ -73,9 +73,9 @@
     "@emotion/react": "11.13.5",
     "@storybook/react": "8.3.3",
     "@svgr/cli": "6.5.1",
-    "@types/react": "18.3.11",
+    "@types/react": "18.3.24",
     "@types/react-beautiful-dnd": "13.1.8",
-    "@types/react-dom": "18.3.1",
+    "@types/react-dom": "18.3.7",
     "@types/uuid": "9.0.4",
     "react": "18.3.1",
     "react-dom": "18.3.1"
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b3b021f551f35362f521966890475a86353ee1f3"
+  "gitHead": "f4131987e95aa361d3061636de450994ffb65651"
 }