@uniformdev/mesh-sdk-react 20.35.0 → 20.35.1-alpha.58

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,
@@ -415,6 +416,11 @@ type VariablesPluginProps<TEditorContext = unknown> = {
     filterVariable?: SelectVariableMenuProps<TEditorContext>['filterVariable'];
     /** If true, the whole value of the editor is replaced when a variable is inserted */
     replaceValueOnVariableInsert: boolean;
+    /**
+     * Disables display names for variables; the variable's (prettified) name is used instead even if a DN exists
+     * Use this to render dynamic tokens as paths instead of bound values.
+     */
+    disableVariableDisplayNames?: boolean;
 };
 type UseVariablesMenuInput<TEditorContext> = Pick<VariablesPluginProps<TEditorContext>, 'showAddVariableMenuOption' | 'enableEditingVariables' | 'filterVariable' | 'getEditorContext'>;
 type OnVariableSelectInput = {
@@ -435,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, }: VariablesPluginProps<TEditorContext>): JSX.Element | null;
+declare function VariablesPlugin<TEditorContext = unknown>({ disableVariables, showAddVariableMenuOption, enableEditingVariables, getEditorContext, replaceValueOnVariableInsert, filterVariable, disableVariableDisplayNames, }: VariablesPluginProps<TEditorContext>): JSX.Element | null;
 
 type PasteTransformerPluginProps = {
     /**
@@ -552,6 +558,11 @@ type InputVariablesProps<TEditorContext = unknown> = {
      * any existing value on insert a new dynamic token.
      */
     singleTokenMode?: boolean;
+    /**
+     * Disables display names for variables; the variable's (prettified) name is used instead even if a DN exists
+     * Use this to render dynamic tokens as paths instead of bound values.
+     */
+    disableVariableDisplayNames?: boolean;
 } & PasteTransformerPluginProps & UseInputVariablesStateProps<TEditorContext>;
 /**
  * An input box that enables insertion of 'variables', provided by VariablesProvider,

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,
@@ -415,6 +416,11 @@ type VariablesPluginProps<TEditorContext = unknown> = {
     filterVariable?: SelectVariableMenuProps<TEditorContext>['filterVariable'];
     /** If true, the whole value of the editor is replaced when a variable is inserted */
     replaceValueOnVariableInsert: boolean;
+    /**
+     * Disables display names for variables; the variable's (prettified) name is used instead even if a DN exists
+     * Use this to render dynamic tokens as paths instead of bound values.
+     */
+    disableVariableDisplayNames?: boolean;
 };
 type UseVariablesMenuInput<TEditorContext> = Pick<VariablesPluginProps<TEditorContext>, 'showAddVariableMenuOption' | 'enableEditingVariables' | 'filterVariable' | 'getEditorContext'>;
 type OnVariableSelectInput = {
@@ -435,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, }: VariablesPluginProps<TEditorContext>): JSX.Element | null;
+declare function VariablesPlugin<TEditorContext = unknown>({ disableVariables, showAddVariableMenuOption, enableEditingVariables, getEditorContext, replaceValueOnVariableInsert, filterVariable, disableVariableDisplayNames, }: VariablesPluginProps<TEditorContext>): JSX.Element | null;
 
 type PasteTransformerPluginProps = {
     /**
@@ -552,6 +558,11 @@ type InputVariablesProps<TEditorContext = unknown> = {
      * any existing value on insert a new dynamic token.
      */
     singleTokenMode?: boolean;
+    /**
+     * Disables display names for variables; the variable's (prettified) name is used instead even if a DN exists
+     * Use this to render dynamic tokens as paths instead of bound values.
+     */
+    disableVariableDisplayNames?: boolean;
 } & PasteTransformerPluginProps & UseInputVariablesStateProps<TEditorContext>;
 /**
  * An input box that enables insertion of 'variables', provided by VariablesProvider,

package/dist/index.esm.js

@@ -1244,7 +1244,8 @@ function VariablesPlugin({
   enableEditingVariables,
   getEditorContext,
   replaceValueOnVariableInsert,
-  filterVariable
+  filterVariable,
+  disableVariableDisplayNames
 }) {
   const [editor] = useLexicalComposerContext2();
   const { variables, dispatch, isEditing, canDispatch, readOnly, knownUndefinedValues, isLoading } = useVariables(true);
@@ -1322,9 +1323,10 @@ function VariablesPlugin({
                 });
                 return;
               }
+              const initialDisplayName = disableVariableDisplayNames ? prettifyBindExpression(result.selectedVariable.name) : result.selectedVariable.displayName;
               editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {
                 variable: result.selectedVariable.name,
-                initialDisplayName: result.selectedVariable.displayName,
+                initialDisplayName,
                 targetKey: sourceKey,
                 overwriteExistingValue: replaceValueOnVariableInsert
               });
@@ -1372,9 +1374,10 @@ function VariablesPlugin({
               if (result.canceled) {
                 return;
               }
+              const initialDisplayName = disableVariableDisplayNames ? prettifyBindExpression(result.selectedVariable.name) : result.selectedVariable.displayName;
               editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {
                 variable: result.selectedVariable.name,
-                initialDisplayName: result.selectedVariable.displayName,
+                initialDisplayName,
                 targetKey: void 0,
                 overwriteExistingValue: replaceValueOnVariableInsert
               });
@@ -1393,8 +1396,9 @@ function VariablesPlugin({
           var _a, _b;
           if (!disableVariables) {
             const targetVariable = variablesRef.current.variables[reference];
+            const displayName = disableVariableDisplayNames ? prettifyBindExpression(reference) : initialDisplayName != null ? initialDisplayName : (targetVariable == null ? void 0 : targetVariable.displayName) || prettifyBindExpression(reference);
             const variableNode = $createVariableNode(reference, {
-              displayName: initialDisplayName != null ? initialDisplayName : (targetVariable == null ? void 0 : targetVariable.displayName) || prettifyBindExpression(reference),
+              displayName,
               hasClickEvent: canEditVariable(reference, targetVariable),
               referenceIsValid: true,
               tooltip: (_a = targetVariable == null ? void 0 : targetVariable.tooltip) != null ? _a : targetVariable == null ? void 0 : targetVariable.helpText,
@@ -1431,7 +1435,8 @@ function VariablesPlugin({
     readOnly,
     getEditorContext,
     editVariable,
-    replaceValueOnVariableInsert
+    replaceValueOnVariableInsert,
+    disableVariableDisplayNames
   ]);
   const updateExistingNodeIfChanged = useCallback2(
     (variableNode) => {
@@ -1444,9 +1449,10 @@ function VariablesPlugin({
         return;
       }
       const tooltip = (_d = (_c = (_b = (_a = targetVar == null ? void 0 : targetVar.tooltip) != null ? _a : targetVar == null ? void 0 : targetVar.helpText) != null ? _b : targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) != null ? _c : targetUndefinedVar == null ? void 0 : targetUndefinedVar.warning) != null ? _d : targetUndefinedVar == null ? void 0 : targetUndefinedVar.info;
+      const displayName = disableVariableDisplayNames ? prettifyBindExpression(variableNode.reference) : (targetVar == null ? void 0 : targetVar.displayName) || (targetUndefinedVar == null ? void 0 : targetUndefinedVar.displayName) || prettifyBindExpression(variableNode.reference);
       const newState = {
         ...currentState,
-        displayName: (targetVar == null ? void 0 : targetVar.displayName) || (targetUndefinedVar == null ? void 0 : targetUndefinedVar.displayName) || prettifyBindExpression(variableNode.reference),
+        displayName,
         isLoading: isLoadingVariables && !targetVar && !(targetUndefinedVar == null ? void 0 : targetUndefinedVar.info),
         hasClickEvent: canEditVariable(variableNode.reference, targetVar),
         referenceIsValid: (targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) ? false : (targetUndefinedVar == null ? void 0 : targetUndefinedVar.warning) ? "warning" : (targetUndefinedVar == null ? void 0 : targetUndefinedVar.info) ? "info" : isLoadingVariables ? true : Boolean(targetVar),
@@ -1457,7 +1463,7 @@ function VariablesPlugin({
         variableNode.setState(newState);
       }
     },
-    [canEditVariable]
+    [canEditVariable, disableVariableDisplayNames]
   );
   useEffect4(() => {
     let selection;
@@ -1616,6 +1622,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 +1639,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);
 }
@@ -1879,27 +1908,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
@@ -1945,6 +1987,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 +1997,7 @@ var input2 = css5`
   &[contenteditable='false'] {
     cursor: not-allowed;
     color: var(--gray-400);
+    border-color: var(--gray-200);
   }
 
   > p {
@@ -2045,30 +2089,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";
@@ -2115,7 +2135,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: [
@@ -2208,7 +2228,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;
@@ -2460,7 +2480,8 @@ function InputVariables(props) {
     styleVariant = "default",
     renderMenuInPortal,
     disableDismissEditorOnChange,
-    singleTokenMode
+    singleTokenMode,
+    disableVariableDisplayNames
   } = props;
   const [finalId] = useState7(id != null ? id : () => v4());
   const { dispatch, canDispatch, isEditing } = useVariables(true);
@@ -2496,6 +2517,7 @@ function InputVariables(props) {
                   portal: renderMenuInPortal,
                   replaceValueOnVariableInsert: useInputWithNoVariables,
                   useInputWhenNoVariables: useInputWithNoVariables,
+                  isActive: hadVariablesInValue,
                   children: /* @__PURE__ */ jsx28(
                     VariablesComposerInput,
                     {
@@ -2569,6 +2591,7 @@ function InputVariables(props) {
       replaceValueOnVariableInsert: useInputWithNoVariables,
       autoFocus,
       filterVariable,
+      disableVariableDisplayNames,
       children: [
         /* @__PURE__ */ jsx28(PasteTransformerPlugin, { transformPaste }),
         /* @__PURE__ */ jsx28(ControlledValuePlugin, { value, enabled: singleTokenMode || useInputWithNoVariables }),
@@ -2583,6 +2606,7 @@ function InputVariablesOverlayMenu({
   disabled,
   useInputWhenNoVariables,
   portal,
+  isActive,
   ...props
 }) {
   if (disabled) {
@@ -2596,7 +2620,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
       }
     )
   ] });
@@ -2649,7 +2674,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" })
               }
             )
           }
@@ -3140,7 +3165,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"
     }
   ) });
 }
@@ -4204,7 +4230,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 })
       ]

package/dist/index.js

@@ -1390,7 +1390,8 @@ function VariablesPlugin({
   enableEditingVariables,
   getEditorContext,
   replaceValueOnVariableInsert,
-  filterVariable
+  filterVariable,
+  disableVariableDisplayNames
 }) {
   const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
   const { variables, dispatch, isEditing, canDispatch, readOnly, knownUndefinedValues, isLoading } = useVariables(true);
@@ -1468,9 +1469,10 @@ function VariablesPlugin({
                 });
                 return;
               }
+              const initialDisplayName = disableVariableDisplayNames ? prettifyBindExpression(result.selectedVariable.name) : result.selectedVariable.displayName;
               editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {
                 variable: result.selectedVariable.name,
-                initialDisplayName: result.selectedVariable.displayName,
+                initialDisplayName,
                 targetKey: sourceKey,
                 overwriteExistingValue: replaceValueOnVariableInsert
               });
@@ -1518,9 +1520,10 @@ function VariablesPlugin({
               if (result.canceled) {
                 return;
               }
+              const initialDisplayName = disableVariableDisplayNames ? prettifyBindExpression(result.selectedVariable.name) : result.selectedVariable.displayName;
               editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {
                 variable: result.selectedVariable.name,
-                initialDisplayName: result.selectedVariable.displayName,
+                initialDisplayName,
                 targetKey: void 0,
                 overwriteExistingValue: replaceValueOnVariableInsert
               });
@@ -1539,8 +1542,9 @@ function VariablesPlugin({
           var _a, _b;
           if (!disableVariables) {
             const targetVariable = variablesRef.current.variables[reference];
+            const displayName = disableVariableDisplayNames ? prettifyBindExpression(reference) : initialDisplayName != null ? initialDisplayName : (targetVariable == null ? void 0 : targetVariable.displayName) || prettifyBindExpression(reference);
             const variableNode = $createVariableNode(reference, {
-              displayName: initialDisplayName != null ? initialDisplayName : (targetVariable == null ? void 0 : targetVariable.displayName) || prettifyBindExpression(reference),
+              displayName,
               hasClickEvent: canEditVariable(reference, targetVariable),
               referenceIsValid: true,
               tooltip: (_a = targetVariable == null ? void 0 : targetVariable.tooltip) != null ? _a : targetVariable == null ? void 0 : targetVariable.helpText,
@@ -1577,7 +1581,8 @@ function VariablesPlugin({
     readOnly,
     getEditorContext,
     editVariable,
-    replaceValueOnVariableInsert
+    replaceValueOnVariableInsert,
+    disableVariableDisplayNames
   ]);
   const updateExistingNodeIfChanged = (0, import_react15.useCallback)(
     (variableNode) => {
@@ -1590,9 +1595,10 @@ function VariablesPlugin({
         return;
       }
       const tooltip = (_d = (_c = (_b = (_a = targetVar == null ? void 0 : targetVar.tooltip) != null ? _a : targetVar == null ? void 0 : targetVar.helpText) != null ? _b : targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) != null ? _c : targetUndefinedVar == null ? void 0 : targetUndefinedVar.warning) != null ? _d : targetUndefinedVar == null ? void 0 : targetUndefinedVar.info;
+      const displayName = disableVariableDisplayNames ? prettifyBindExpression(variableNode.reference) : (targetVar == null ? void 0 : targetVar.displayName) || (targetUndefinedVar == null ? void 0 : targetUndefinedVar.displayName) || prettifyBindExpression(variableNode.reference);
       const newState = {
         ...currentState,
-        displayName: (targetVar == null ? void 0 : targetVar.displayName) || (targetUndefinedVar == null ? void 0 : targetUndefinedVar.displayName) || prettifyBindExpression(variableNode.reference),
+        displayName,
         isLoading: isLoadingVariables && !targetVar && !(targetUndefinedVar == null ? void 0 : targetUndefinedVar.info),
         hasClickEvent: canEditVariable(variableNode.reference, targetVar),
         referenceIsValid: (targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) ? false : (targetUndefinedVar == null ? void 0 : targetUndefinedVar.warning) ? "warning" : (targetUndefinedVar == null ? void 0 : targetUndefinedVar.info) ? "info" : isLoadingVariables ? true : Boolean(targetVar),
@@ -1603,7 +1609,7 @@ function VariablesPlugin({
         variableNode.setState(newState);
       }
     },
-    [canEditVariable]
+    [canEditVariable, disableVariableDisplayNames]
   );
   (0, import_react15.useEffect)(() => {
     let selection;
@@ -1762,6 +1768,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 +1785,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);
 }
@@ -2019,27 +2048,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
@@ -2085,6 +2127,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 +2137,7 @@ var input2 = import_react19.css`
   &[contenteditable='false'] {
     cursor: not-allowed;
     color: var(--gray-400);
+    border-color: var(--gray-200);
   }
 
   > p {
@@ -2185,30 +2229,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");
@@ -2255,7 +2275,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: [
@@ -2348,7 +2368,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;
@@ -2588,7 +2608,8 @@ function InputVariables(props) {
     styleVariant = "default",
     renderMenuInPortal,
     disableDismissEditorOnChange,
-    singleTokenMode
+    singleTokenMode,
+    disableVariableDisplayNames
   } = props;
   const [finalId] = (0, import_react28.useState)(id != null ? id : () => (0, import_uuid.v4)());
   const { dispatch, canDispatch, isEditing } = useVariables(true);
@@ -2624,6 +2645,7 @@ function InputVariables(props) {
                   portal: renderMenuInPortal,
                   replaceValueOnVariableInsert: useInputWithNoVariables,
                   useInputWhenNoVariables: useInputWithNoVariables,
+                  isActive: hadVariablesInValue,
                   children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     VariablesComposerInput,
                     {
@@ -2697,6 +2719,7 @@ function InputVariables(props) {
       replaceValueOnVariableInsert: useInputWithNoVariables,
       autoFocus,
       filterVariable,
+      disableVariableDisplayNames,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PasteTransformerPlugin, { transformPaste }),
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ControlledValuePlugin, { value, enabled: singleTokenMode || useInputWithNoVariables }),
@@ -2711,6 +2734,7 @@ function InputVariablesOverlayMenu({
   disabled,
   useInputWhenNoVariables,
   portal,
+  isActive,
   ...props
 }) {
   if (disabled) {
@@ -2724,7 +2748,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
       }
     )
   ] });
@@ -2777,7 +2802,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" })
               }
             )
           }
@@ -3258,7 +3283,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"
     }
   ) });
 }
@@ -4295,7 +4321,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 })
       ]

package/dist/index.mjs

@@ -1244,7 +1244,8 @@ function VariablesPlugin({
   enableEditingVariables,
   getEditorContext,
   replaceValueOnVariableInsert,
-  filterVariable
+  filterVariable,
+  disableVariableDisplayNames
 }) {
   const [editor] = useLexicalComposerContext2();
   const { variables, dispatch, isEditing, canDispatch, readOnly, knownUndefinedValues, isLoading } = useVariables(true);
@@ -1322,9 +1323,10 @@ function VariablesPlugin({
                 });
                 return;
               }
+              const initialDisplayName = disableVariableDisplayNames ? prettifyBindExpression(result.selectedVariable.name) : result.selectedVariable.displayName;
               editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {
                 variable: result.selectedVariable.name,
-                initialDisplayName: result.selectedVariable.displayName,
+                initialDisplayName,
                 targetKey: sourceKey,
                 overwriteExistingValue: replaceValueOnVariableInsert
               });
@@ -1372,9 +1374,10 @@ function VariablesPlugin({
               if (result.canceled) {
                 return;
               }
+              const initialDisplayName = disableVariableDisplayNames ? prettifyBindExpression(result.selectedVariable.name) : result.selectedVariable.displayName;
               editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {
                 variable: result.selectedVariable.name,
-                initialDisplayName: result.selectedVariable.displayName,
+                initialDisplayName,
                 targetKey: void 0,
                 overwriteExistingValue: replaceValueOnVariableInsert
               });
@@ -1393,8 +1396,9 @@ function VariablesPlugin({
           var _a, _b;
           if (!disableVariables) {
             const targetVariable = variablesRef.current.variables[reference];
+            const displayName = disableVariableDisplayNames ? prettifyBindExpression(reference) : initialDisplayName != null ? initialDisplayName : (targetVariable == null ? void 0 : targetVariable.displayName) || prettifyBindExpression(reference);
             const variableNode = $createVariableNode(reference, {
-              displayName: initialDisplayName != null ? initialDisplayName : (targetVariable == null ? void 0 : targetVariable.displayName) || prettifyBindExpression(reference),
+              displayName,
               hasClickEvent: canEditVariable(reference, targetVariable),
               referenceIsValid: true,
               tooltip: (_a = targetVariable == null ? void 0 : targetVariable.tooltip) != null ? _a : targetVariable == null ? void 0 : targetVariable.helpText,
@@ -1431,7 +1435,8 @@ function VariablesPlugin({
     readOnly,
     getEditorContext,
     editVariable,
-    replaceValueOnVariableInsert
+    replaceValueOnVariableInsert,
+    disableVariableDisplayNames
   ]);
   const updateExistingNodeIfChanged = useCallback2(
     (variableNode) => {
@@ -1444,9 +1449,10 @@ function VariablesPlugin({
         return;
       }
       const tooltip = (_d = (_c = (_b = (_a = targetVar == null ? void 0 : targetVar.tooltip) != null ? _a : targetVar == null ? void 0 : targetVar.helpText) != null ? _b : targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) != null ? _c : targetUndefinedVar == null ? void 0 : targetUndefinedVar.warning) != null ? _d : targetUndefinedVar == null ? void 0 : targetUndefinedVar.info;
+      const displayName = disableVariableDisplayNames ? prettifyBindExpression(variableNode.reference) : (targetVar == null ? void 0 : targetVar.displayName) || (targetUndefinedVar == null ? void 0 : targetUndefinedVar.displayName) || prettifyBindExpression(variableNode.reference);
       const newState = {
         ...currentState,
-        displayName: (targetVar == null ? void 0 : targetVar.displayName) || (targetUndefinedVar == null ? void 0 : targetUndefinedVar.displayName) || prettifyBindExpression(variableNode.reference),
+        displayName,
         isLoading: isLoadingVariables && !targetVar && !(targetUndefinedVar == null ? void 0 : targetUndefinedVar.info),
         hasClickEvent: canEditVariable(variableNode.reference, targetVar),
         referenceIsValid: (targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) ? false : (targetUndefinedVar == null ? void 0 : targetUndefinedVar.warning) ? "warning" : (targetUndefinedVar == null ? void 0 : targetUndefinedVar.info) ? "info" : isLoadingVariables ? true : Boolean(targetVar),
@@ -1457,7 +1463,7 @@ function VariablesPlugin({
         variableNode.setState(newState);
       }
     },
-    [canEditVariable]
+    [canEditVariable, disableVariableDisplayNames]
   );
   useEffect4(() => {
     let selection;
@@ -1616,6 +1622,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 +1639,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);
 }
@@ -1879,27 +1908,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
@@ -1945,6 +1987,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 +1997,7 @@ var input2 = css5`
   &[contenteditable='false'] {
     cursor: not-allowed;
     color: var(--gray-400);
+    border-color: var(--gray-200);
   }
 
   > p {
@@ -2045,30 +2089,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";
@@ -2115,7 +2135,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: [
@@ -2208,7 +2228,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;
@@ -2460,7 +2480,8 @@ function InputVariables(props) {
     styleVariant = "default",
     renderMenuInPortal,
     disableDismissEditorOnChange,
-    singleTokenMode
+    singleTokenMode,
+    disableVariableDisplayNames
   } = props;
   const [finalId] = useState7(id != null ? id : () => v4());
   const { dispatch, canDispatch, isEditing } = useVariables(true);
@@ -2496,6 +2517,7 @@ function InputVariables(props) {
                   portal: renderMenuInPortal,
                   replaceValueOnVariableInsert: useInputWithNoVariables,
                   useInputWhenNoVariables: useInputWithNoVariables,
+                  isActive: hadVariablesInValue,
                   children: /* @__PURE__ */ jsx28(
                     VariablesComposerInput,
                     {
@@ -2569,6 +2591,7 @@ function InputVariables(props) {
       replaceValueOnVariableInsert: useInputWithNoVariables,
       autoFocus,
       filterVariable,
+      disableVariableDisplayNames,
       children: [
         /* @__PURE__ */ jsx28(PasteTransformerPlugin, { transformPaste }),
         /* @__PURE__ */ jsx28(ControlledValuePlugin, { value, enabled: singleTokenMode || useInputWithNoVariables }),
@@ -2583,6 +2606,7 @@ function InputVariablesOverlayMenu({
   disabled,
   useInputWhenNoVariables,
   portal,
+  isActive,
   ...props
 }) {
   if (disabled) {
@@ -2596,7 +2620,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
       }
     )
   ] });
@@ -2649,7 +2674,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" })
               }
             )
           }
@@ -3140,7 +3165,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"
     }
   ) });
 }
@@ -4204,7 +4230,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 })
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "20.35.0",
+  "version": "20.35.1-alpha.58+f229d40de4",
   "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.35.0",
-    "@uniformdev/design-system": "20.35.0",
-    "@uniformdev/mesh-sdk": "20.35.0",
-    "@uniformdev/richtext": "20.35.0",
+    "@uniformdev/canvas": "20.35.1-alpha.58+f229d40de4",
+    "@uniformdev/design-system": "20.35.1-alpha.58+f229d40de4",
+    "@uniformdev/mesh-sdk": "20.35.1-alpha.58+f229d40de4",
+    "@uniformdev/richtext": "20.35.1-alpha.58+f229d40de4",
     "dequal": "^2.0.3",
     "lexical": "0.25.0",
     "mitt": "3.0.1",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f228361828ef49a596ca3841e5b79768c64418cf"
+  "gitHead": "f229d40de49a1a7e2bba9d2e0a36d4aae6251c81"
 }