@uniformdev/mesh-sdk-react 19.23.1-alpha.12 → 19.23.1-alpha.13

package/dist/index.esm.js

@@ -2921,7 +2921,7 @@ function useMeshLocation(expectedLocation) {
 
 // src/components/Variables/InputVariables.tsx
 init_emotion_jsx_shim();
-import { Caption as Caption2, ErrorMessage, InfoMessage, WarningMessage } from "@uniformdev/design-system";
+import { Caption, ErrorMessage, InfoMessage, WarningMessage } from "@uniformdev/design-system";
 import * as React11 from "react";
 import { useMemo as useMemo8 } from "react";
 import { v4 as v43 } from "uuid";
@@ -3107,17 +3107,43 @@ import { CLEAR_EDITOR_COMMAND } from "lexical";
 
 // src/components/Variables/composer/VariablesPlugin.tsx
 init_emotion_jsx_shim();
-import { css as css21 } from "@emotion/react";
+import { css as css22 } from "@emotion/react";
 import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
 import {
   LexicalTypeaheadMenuPlugin,
   MenuOption
 } from "@lexical/react/LexicalTypeaheadMenuPlugin";
-import { Caption, MenuGroup, MenuItem as MenuItem2, MenuItemSeparator } from "@uniformdev/design-system";
+import { MenuGroup, MenuItem as MenuItem2, MenuItemSeparator } from "@uniformdev/design-system";
 import { $insertNodes, $nodesOfType, COMMAND_PRIORITY_NORMAL, createCommand } from "lexical";
 import { useCallback, useEffect as useEffect7, useMemo as useMemo6, useState as useState8 } from "react";
 import { createPortal } from "react-dom";
 
+// src/components/Variables/styles/InsertVariableMenu.styles.ts
+init_emotion_jsx_shim();
+import { css as css20 } from "@emotion/react";
+var menuBtn2 = css20`
+  background: none;
+  border: none;
+  color: var(--gray-500);
+  padding: 0;
+`;
+var menuItemTextGroup = css20`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  line-height: 1em;
+`;
+var smallText = css20`
+  font-size: var(--fs-xs);
+  color: var(--gray-500);
+`;
+var variablesTipText = css20`
+  ${smallText}
+  color: var(--gray-500);
+  padding: 0 var(--spacing-sm);
+`;
+
 // src/components/Variables/useOnVariableUpdated.ts
 init_emotion_jsx_shim();
 import { useEffect as useEffect6 } from "react";
@@ -3136,13 +3162,13 @@ import { z } from "zod";
 
 // src/components/Variables/styles/VariableEditor.styles.ts
 init_emotion_jsx_shim();
-import { css as css20 } from "@emotion/react";
-var variablesFormContainer = css20`
+import { css as css21 } from "@emotion/react";
+var variablesFormContainer = css21`
   > * {
     margin: var(--spacing-base) 0 0;
   }
 `;
-var variablesFormBtnGroup = css20`
+var variablesFormBtnGroup = css21`
   display: flex;
   gap: var(--spacing-sm);
 `;
@@ -3282,7 +3308,8 @@ function VariablesProvider({
     variables: value,
     isEditing: typeof editing !== "undefined",
     events,
-    canDispatch: true
+    canDispatch: true,
+    readOnly
   };
   return /* @__PURE__ */ jsxs17(VariablesContext.Provider, { value: contextValue, children: [
     children,
@@ -3523,6 +3550,7 @@ function VariablesPlugin({
   const [editor] = useLexicalComposerContext2();
   const { variables, dispatch, isEditing, canDispatch, readOnly } = useVariables();
   const canEditVariable = canDispatch && enableEditingVariables && !readOnly;
+  const canAddVariable = canDispatch && showAddVariableMenuOption && !readOnly;
   const [openedAdd, setOpenedAdd] = useState8(false);
   useOnVariableUpdated((varName) => {
     editor.update(() => {
@@ -3537,7 +3565,7 @@ function VariablesPlugin({
   const [queryString, setQueryString] = useState8(null);
   const { groupedVariables, menuOptions } = useMemo6(() => {
     const groupedVariables2 = variablesToGroupedList(variables);
-    if (showAddVariableMenuOption) {
+    if (canAddVariable) {
       groupedVariables2.push({
         name: SOURCE_SEPARATOR,
         variables: [{ name: ADD_VARIABLE_OPTION, displayName: "Add\u2026", default: "" }]
@@ -3550,7 +3578,7 @@ function VariablesPlugin({
       })
     );
     return { menuOptions: menuOptions2, groupedVariables: groupedVariables2 };
-  }, [variables, showAddVariableMenuOption]);
+  }, [variables, canAddVariable]);
   const { filteredGroupedVariables, filteredMenuOptions } = useMemo6(() => {
     if (!queryString) {
       return {
@@ -3657,12 +3685,14 @@ function VariablesPlugin({
           /* @__PURE__ */ jsx31(
             "div",
             {
-              css: css21`
+              css: css22`
               box-shadow: var(--shadow-base);
               border-radius: var(--rounded-base);
               background: var(--gray-50);
               display: flex;
               flex-direction: column;
+              // 1em = text height, spacing-sm for padding, to prevent menu overlapping text entry
+              margin-top: calc(1em + var(--spacing-sm));
               min-width: 250px;
               padding: var(--spacing-sm);
               outline: none;
@@ -3677,24 +3707,26 @@ function VariablesPlugin({
                   {
                     title: group.name === SOURCE_SEPARATOR ? "" : (_a = group.name) != null ? _a : "",
                     children: [
-                      group.name === SOURCE_SEPARATOR ? /* @__PURE__ */ jsx31(MenuItemSeparator, {}) : null,
+                      group.name === SOURCE_SEPARATOR && currentCumulativeMenuIndex > 0 ? /* @__PURE__ */ jsx31(MenuItemSeparator, {}) : null,
                       group.variables.map((variable) => {
                         var _a2;
                         currentCumulativeMenuIndex++;
+                        const myCumulativeIndex = currentCumulativeMenuIndex;
                         return /* @__PURE__ */ jsxs18(
                           MenuItem2,
                           {
-                            active: selectedIndex === currentCumulativeMenuIndex,
+                            active: selectedIndex === myCumulativeIndex,
                             onClick: () => {
-                              setHighlightedIndex(currentCumulativeMenuIndex);
+                              setHighlightedIndex(myCumulativeIndex);
                               selectOptionAndCleanUp(new MenuOption(variable.name));
                             },
                             onMouseEnter: () => {
-                              setHighlightedIndex(currentCumulativeMenuIndex);
+                              setHighlightedIndex(myCumulativeIndex);
                             },
+                            css: menuItemTextGroup,
                             children: [
-                              /* @__PURE__ */ jsx31("div", { children: (_a2 = variable.displayName) != null ? _a2 : variable.name }),
-                              variable.helpText ? /* @__PURE__ */ jsx31(Caption, { children: variable.helpText }) : null
+                              /* @__PURE__ */ jsx31("span", { children: (_a2 = variable.displayName) != null ? _a2 : variable.name }),
+                              variable.helpText ? /* @__PURE__ */ jsx31("small", { css: smallText, children: variable.helpText }) : null
                             ]
                           },
                           variable.name
@@ -3719,40 +3751,11 @@ init_emotion_jsx_shim();
 import { Menu as Menu2, MenuGroup as MenuGroup2, MenuItem as MenuItem3, MenuItemSeparator as MenuItemSeparator2 } from "@uniformdev/design-system";
 import { useEffect as useEffect8, useRef as useRef8, useState as useState9 } from "react";
 import { CgUsbC } from "react-icons/cg";
-
-// src/components/Variables/styles/InsertVariableMenu.styles.ts
-init_emotion_jsx_shim();
-import { css as css22 } from "@emotion/react";
-var menuBtn2 = css22`
-  background: none;
-  border: none;
-  color: var(--gray-500);
-  padding: 0;
-`;
-var menuItemTextGroup = css22`
-  align-items: flex-start;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  line-height: 1em;
-`;
-var smallText = css22`
-  font-size: var(--fs-xs);
-  color: var(--gray-500);
-`;
-var variablesTipText = css22`
-  ${smallText}
-  color: var(--gray-500);
-  padding: 0 var(--spacing-sm);
-`;
-
-// src/components/Variables/SelectVariableMenu.tsx
 import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 var SelectVariableMenu = ({
   onSelectVariable,
   onResetVariables,
   showAddVariableMenuOption = false,
-  forceVisible,
   buttonCss,
   buttonProps,
   tip
@@ -3774,7 +3777,6 @@ var SelectVariableMenu = ({
     Menu2,
     {
       placement: "bottom-start",
-      forceVisible,
       menuTrigger: /* @__PURE__ */ jsx32(
         "button",
         {
@@ -4072,7 +4074,7 @@ function InputVariables({
   infoMessage,
   "data-test-id": dataTestId
 }) {
-  const { variables, readOnly } = useVariables(true);
+  const { variables } = useVariables(true);
   const [finalId] = React11.useState(id != null ? id : () => v43());
   const hasVariablesInValue = getReferencedVariables(value).length > 0;
   const [hadVariablesInValue, setHadVariablesInValue] = React11.useState(hasVariablesInValue);
@@ -4081,7 +4083,7 @@ function InputVariables({
       setHadVariablesInValue(true);
     }
   }, [hasVariablesInValue]);
-  const disableVariablesForReals = disableVariables || Object.keys(variables).length === 0 && !showAddVariableMenuOption || readOnly;
+  const disableVariablesForReals = disableVariables || Object.keys(variables).length === 0 && !showAddVariableMenuOption;
   const disableInlineVariablesForReals = disableVariablesForReals || disableInlineMenu;
   const sharedMenuProps = useMemo8(
     () => ({
@@ -4102,7 +4104,7 @@ function InputVariables({
         "data-text-value": value
       }
     ) }),
-    caption ? /* @__PURE__ */ jsx36(Caption2, { children: caption }) : null,
+    caption ? /* @__PURE__ */ jsx36(Caption, { children: caption }) : null,
     errorMessage ? /* @__PURE__ */ jsx36(ErrorMessage, { message: errorMessage }) : null,
     warningMessage ? /* @__PURE__ */ jsx36(WarningMessage, { message: warningMessage }) : null,
     infoMessage ? /* @__PURE__ */ jsx36(InfoMessage, { message: infoMessage }) : null

package/dist/index.js

@@ -3262,17 +3262,43 @@ var import_lexical4 = require("lexical");
 
 // src/components/Variables/composer/VariablesPlugin.tsx
 init_emotion_jsx_shim();
-var import_react34 = require("@emotion/react");
+var import_react35 = require("@emotion/react");
 var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalTypeaheadMenuPlugin = require("@lexical/react/LexicalTypeaheadMenuPlugin");
 var import_design_system16 = require("@uniformdev/design-system");
 var import_lexical3 = require("lexical");
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_react_dom = require("react-dom");
 
+// src/components/Variables/styles/InsertVariableMenu.styles.ts
+init_emotion_jsx_shim();
+var import_react31 = require("@emotion/react");
+var menuBtn2 = import_react31.css`
+  background: none;
+  border: none;
+  color: var(--gray-500);
+  padding: 0;
+`;
+var menuItemTextGroup = import_react31.css`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  line-height: 1em;
+`;
+var smallText = import_react31.css`
+  font-size: var(--fs-xs);
+  color: var(--gray-500);
+`;
+var variablesTipText = import_react31.css`
+  ${smallText}
+  color: var(--gray-500);
+  padding: 0 var(--spacing-sm);
+`;
+
 // src/components/Variables/useOnVariableUpdated.ts
 init_emotion_jsx_shim();
-var import_react32 = require("react");
+var import_react33 = require("react");
 
 // src/components/Variables/VariablesProvider.tsx
 init_emotion_jsx_shim();
@@ -3288,13 +3314,13 @@ var import_zod2 = require("zod");
 
 // src/components/Variables/styles/VariableEditor.styles.ts
 init_emotion_jsx_shim();
-var import_react31 = require("@emotion/react");
-var variablesFormContainer = import_react31.css`
+var import_react32 = require("@emotion/react");
+var variablesFormContainer = import_react32.css`
   > * {
     margin: var(--spacing-base) 0 0;
   }
 `;
-var variablesFormBtnGroup = import_react31.css`
+var variablesFormBtnGroup = import_react32.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
@@ -3434,7 +3460,8 @@ function VariablesProvider({
     variables: value,
     isEditing: typeof editing !== "undefined",
     events,
-    canDispatch: true
+    canDispatch: true,
+    readOnly
   };
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(VariablesContext.Provider, { value: contextValue, children: [
     children,
@@ -3483,7 +3510,7 @@ function flattenVariables(variables) {
 // src/components/Variables/useOnVariableUpdated.ts
 function useOnVariableUpdated(fn2, disabled) {
   const { variables, events } = useVariables();
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (disabled) {
       return;
     }
@@ -3538,7 +3565,7 @@ function variablesToGroupedList(variables) {
 init_emotion_jsx_shim();
 var import_design_system15 = require("@uniformdev/design-system");
 var import_lexical2 = require("lexical");
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
 var VariableNode = class extends import_lexical2.DecoratorNode {
   constructor(reference, state, key) {
@@ -3598,7 +3625,7 @@ var VariableNode = class extends import_lexical2.DecoratorNode {
    */
   decorate(editor) {
     const { displayName, hasClickEvent, referenceIsValid } = this.__state;
-    const Wrapper = referenceIsValid ? import_react33.Fragment : UndefinedVariableReference;
+    const Wrapper = referenceIsValid ? import_react34.Fragment : UndefinedVariableReference;
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       import_design_system15.Chip,
       {
@@ -3675,21 +3702,22 @@ function VariablesPlugin({
   const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
   const { variables, dispatch, isEditing, canDispatch, readOnly } = useVariables();
   const canEditVariable = canDispatch && enableEditingVariables && !readOnly;
-  const [openedAdd, setOpenedAdd] = (0, import_react35.useState)(false);
+  const canAddVariable = canDispatch && showAddVariableMenuOption && !readOnly;
+  const [openedAdd, setOpenedAdd] = (0, import_react36.useState)(false);
   useOnVariableUpdated((varName) => {
     editor.update(() => {
       editor.dispatchCommand(INSERT_VARIABLE_COMMAND, { reference: varName });
     });
   }, !openedAdd);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (openedAdd && !isEditing) {
       setOpenedAdd(false);
     }
   }, [isEditing, openedAdd]);
-  const [queryString, setQueryString] = (0, import_react35.useState)(null);
-  const { groupedVariables, menuOptions } = (0, import_react35.useMemo)(() => {
+  const [queryString, setQueryString] = (0, import_react36.useState)(null);
+  const { groupedVariables, menuOptions } = (0, import_react36.useMemo)(() => {
     const groupedVariables2 = variablesToGroupedList(variables);
-    if (showAddVariableMenuOption) {
+    if (canAddVariable) {
       groupedVariables2.push({
         name: SOURCE_SEPARATOR,
         variables: [{ name: ADD_VARIABLE_OPTION, displayName: "Add\u2026", default: "" }]
@@ -3702,8 +3730,8 @@ function VariablesPlugin({
       })
     );
     return { menuOptions: menuOptions2, groupedVariables: groupedVariables2 };
-  }, [variables, showAddVariableMenuOption]);
-  const { filteredGroupedVariables, filteredMenuOptions } = (0, import_react35.useMemo)(() => {
+  }, [variables, canAddVariable]);
+  const { filteredGroupedVariables, filteredMenuOptions } = (0, import_react36.useMemo)(() => {
     if (!queryString) {
       return {
         filteredGroupedVariables: groupedVariables,
@@ -3723,7 +3751,7 @@ function VariablesPlugin({
       )
     };
   }, [queryString, groupedVariables, menuOptions]);
-  const onSelectOption = (0, import_react35.useCallback)(
+  const onSelectOption = (0, import_react36.useCallback)(
     (selectedOption, nodeToReplace, closeMenu) => {
       if (selectedOption.key === ADD_VARIABLE_OPTION) {
         setOpenedAdd(true);
@@ -3750,7 +3778,7 @@ function VariablesPlugin({
     },
     [editor, queryString, variables, canEditVariable]
   );
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     editor.registerCommand(
       EDIT_VARIABLE_COMMAND,
       ({ reference }) => {
@@ -3778,7 +3806,7 @@ function VariablesPlugin({
       import_lexical3.COMMAND_PRIORITY_NORMAL
     );
   }, [editor, disableVariables, variables, canDispatch, dispatch, canEditVariable, readOnly]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     editor.update(() => {
       (0, import_lexical3.$nodesOfType)(VariableNode).forEach((variableNode) => {
         const targetVar = variables[variableNode.reference];
@@ -3809,12 +3837,14 @@ function VariablesPlugin({
           /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             "div",
             {
-              css: import_react34.css`
+              css: import_react35.css`
               box-shadow: var(--shadow-base);
               border-radius: var(--rounded-base);
               background: var(--gray-50);
               display: flex;
               flex-direction: column;
+              // 1em = text height, spacing-sm for padding, to prevent menu overlapping text entry
+              margin-top: calc(1em + var(--spacing-sm));
               min-width: 250px;
               padding: var(--spacing-sm);
               outline: none;
@@ -3829,24 +3859,26 @@ function VariablesPlugin({
                   {
                     title: group.name === SOURCE_SEPARATOR ? "" : (_a = group.name) != null ? _a : "",
                     children: [
-                      group.name === SOURCE_SEPARATOR ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_design_system16.MenuItemSeparator, {}) : null,
+                      group.name === SOURCE_SEPARATOR && currentCumulativeMenuIndex > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_design_system16.MenuItemSeparator, {}) : null,
                       group.variables.map((variable) => {
                         var _a2;
                         currentCumulativeMenuIndex++;
+                        const myCumulativeIndex = currentCumulativeMenuIndex;
                         return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                           import_design_system16.MenuItem,
                           {
-                            active: selectedIndex === currentCumulativeMenuIndex,
+                            active: selectedIndex === myCumulativeIndex,
                             onClick: () => {
-                              setHighlightedIndex(currentCumulativeMenuIndex);
+                              setHighlightedIndex(myCumulativeIndex);
                               selectOptionAndCleanUp(new import_LexicalTypeaheadMenuPlugin.MenuOption(variable.name));
                             },
                             onMouseEnter: () => {
-                              setHighlightedIndex(currentCumulativeMenuIndex);
+                              setHighlightedIndex(myCumulativeIndex);
                             },
+                            css: menuItemTextGroup,
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: (_a2 = variable.displayName) != null ? _a2 : variable.name }),
-                              variable.helpText ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_design_system16.Caption, { children: variable.helpText }) : null
+                              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: (_a2 = variable.displayName) != null ? _a2 : variable.name }),
+                              variable.helpText ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("small", { css: smallText, children: variable.helpText }) : null
                             ]
                           },
                           variable.name
@@ -3871,40 +3903,11 @@ init_emotion_jsx_shim();
 var import_design_system17 = require("@uniformdev/design-system");
 var import_react37 = require("react");
 var import_cg5 = require("react-icons/cg");
-
-// src/components/Variables/styles/InsertVariableMenu.styles.ts
-init_emotion_jsx_shim();
-var import_react36 = require("@emotion/react");
-var menuBtn2 = import_react36.css`
-  background: none;
-  border: none;
-  color: var(--gray-500);
-  padding: 0;
-`;
-var menuItemTextGroup = import_react36.css`
-  align-items: flex-start;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  line-height: 1em;
-`;
-var smallText = import_react36.css`
-  font-size: var(--fs-xs);
-  color: var(--gray-500);
-`;
-var variablesTipText = import_react36.css`
-  ${smallText}
-  color: var(--gray-500);
-  padding: 0 var(--spacing-sm);
-`;
-
-// src/components/Variables/SelectVariableMenu.tsx
 var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
 var SelectVariableMenu = ({
   onSelectVariable,
   onResetVariables,
   showAddVariableMenuOption = false,
-  forceVisible,
   buttonCss,
   buttonProps,
   tip
@@ -3926,7 +3929,6 @@ var SelectVariableMenu = ({
     import_design_system17.Menu,
     {
       placement: "bottom-start",
-      forceVisible,
       menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "button",
         {
@@ -4221,7 +4223,7 @@ function InputVariables({
   infoMessage,
   "data-test-id": dataTestId
 }) {
-  const { variables, readOnly } = useVariables(true);
+  const { variables } = useVariables(true);
   const [finalId] = React11.useState(id != null ? id : () => (0, import_uuid3.v4)());
   const hasVariablesInValue = getReferencedVariables(value).length > 0;
   const [hadVariablesInValue, setHadVariablesInValue] = React11.useState(hasVariablesInValue);
@@ -4230,7 +4232,7 @@ function InputVariables({
       setHadVariablesInValue(true);
     }
   }, [hasVariablesInValue]);
-  const disableVariablesForReals = disableVariables || Object.keys(variables).length === 0 && !showAddVariableMenuOption || readOnly;
+  const disableVariablesForReals = disableVariables || Object.keys(variables).length === 0 && !showAddVariableMenuOption;
   const disableInlineVariablesForReals = disableVariablesForReals || disableInlineMenu;
   const sharedMenuProps = (0, import_react41.useMemo)(
     () => ({

package/dist/index.mjs

@@ -2921,7 +2921,7 @@ function useMeshLocation(expectedLocation) {
 
 // src/components/Variables/InputVariables.tsx
 init_emotion_jsx_shim();
-import { Caption as Caption2, ErrorMessage, InfoMessage, WarningMessage } from "@uniformdev/design-system";
+import { Caption, ErrorMessage, InfoMessage, WarningMessage } from "@uniformdev/design-system";
 import * as React11 from "react";
 import { useMemo as useMemo8 } from "react";
 import { v4 as v43 } from "uuid";
@@ -3107,17 +3107,43 @@ import { CLEAR_EDITOR_COMMAND } from "lexical";
 
 // src/components/Variables/composer/VariablesPlugin.tsx
 init_emotion_jsx_shim();
-import { css as css21 } from "@emotion/react";
+import { css as css22 } from "@emotion/react";
 import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
 import {
   LexicalTypeaheadMenuPlugin,
   MenuOption
 } from "@lexical/react/LexicalTypeaheadMenuPlugin";
-import { Caption, MenuGroup, MenuItem as MenuItem2, MenuItemSeparator } from "@uniformdev/design-system";
+import { MenuGroup, MenuItem as MenuItem2, MenuItemSeparator } from "@uniformdev/design-system";
 import { $insertNodes, $nodesOfType, COMMAND_PRIORITY_NORMAL, createCommand } from "lexical";
 import { useCallback, useEffect as useEffect7, useMemo as useMemo6, useState as useState8 } from "react";
 import { createPortal } from "react-dom";
 
+// src/components/Variables/styles/InsertVariableMenu.styles.ts
+init_emotion_jsx_shim();
+import { css as css20 } from "@emotion/react";
+var menuBtn2 = css20`
+  background: none;
+  border: none;
+  color: var(--gray-500);
+  padding: 0;
+`;
+var menuItemTextGroup = css20`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  line-height: 1em;
+`;
+var smallText = css20`
+  font-size: var(--fs-xs);
+  color: var(--gray-500);
+`;
+var variablesTipText = css20`
+  ${smallText}
+  color: var(--gray-500);
+  padding: 0 var(--spacing-sm);
+`;
+
 // src/components/Variables/useOnVariableUpdated.ts
 init_emotion_jsx_shim();
 import { useEffect as useEffect6 } from "react";
@@ -3136,13 +3162,13 @@ import { z } from "zod";
 
 // src/components/Variables/styles/VariableEditor.styles.ts
 init_emotion_jsx_shim();
-import { css as css20 } from "@emotion/react";
-var variablesFormContainer = css20`
+import { css as css21 } from "@emotion/react";
+var variablesFormContainer = css21`
   > * {
     margin: var(--spacing-base) 0 0;
   }
 `;
-var variablesFormBtnGroup = css20`
+var variablesFormBtnGroup = css21`
   display: flex;
   gap: var(--spacing-sm);
 `;
@@ -3282,7 +3308,8 @@ function VariablesProvider({
     variables: value,
     isEditing: typeof editing !== "undefined",
     events,
-    canDispatch: true
+    canDispatch: true,
+    readOnly
   };
   return /* @__PURE__ */ jsxs17(VariablesContext.Provider, { value: contextValue, children: [
     children,
@@ -3523,6 +3550,7 @@ function VariablesPlugin({
   const [editor] = useLexicalComposerContext2();
   const { variables, dispatch, isEditing, canDispatch, readOnly } = useVariables();
   const canEditVariable = canDispatch && enableEditingVariables && !readOnly;
+  const canAddVariable = canDispatch && showAddVariableMenuOption && !readOnly;
   const [openedAdd, setOpenedAdd] = useState8(false);
   useOnVariableUpdated((varName) => {
     editor.update(() => {
@@ -3537,7 +3565,7 @@ function VariablesPlugin({
   const [queryString, setQueryString] = useState8(null);
   const { groupedVariables, menuOptions } = useMemo6(() => {
     const groupedVariables2 = variablesToGroupedList(variables);
-    if (showAddVariableMenuOption) {
+    if (canAddVariable) {
       groupedVariables2.push({
         name: SOURCE_SEPARATOR,
         variables: [{ name: ADD_VARIABLE_OPTION, displayName: "Add\u2026", default: "" }]
@@ -3550,7 +3578,7 @@ function VariablesPlugin({
       })
     );
     return { menuOptions: menuOptions2, groupedVariables: groupedVariables2 };
-  }, [variables, showAddVariableMenuOption]);
+  }, [variables, canAddVariable]);
   const { filteredGroupedVariables, filteredMenuOptions } = useMemo6(() => {
     if (!queryString) {
       return {
@@ -3657,12 +3685,14 @@ function VariablesPlugin({
           /* @__PURE__ */ jsx31(
             "div",
             {
-              css: css21`
+              css: css22`
               box-shadow: var(--shadow-base);
               border-radius: var(--rounded-base);
               background: var(--gray-50);
               display: flex;
               flex-direction: column;
+              // 1em = text height, spacing-sm for padding, to prevent menu overlapping text entry
+              margin-top: calc(1em + var(--spacing-sm));
               min-width: 250px;
               padding: var(--spacing-sm);
               outline: none;
@@ -3677,24 +3707,26 @@ function VariablesPlugin({
                   {
                     title: group.name === SOURCE_SEPARATOR ? "" : (_a = group.name) != null ? _a : "",
                     children: [
-                      group.name === SOURCE_SEPARATOR ? /* @__PURE__ */ jsx31(MenuItemSeparator, {}) : null,
+                      group.name === SOURCE_SEPARATOR && currentCumulativeMenuIndex > 0 ? /* @__PURE__ */ jsx31(MenuItemSeparator, {}) : null,
                       group.variables.map((variable) => {
                         var _a2;
                         currentCumulativeMenuIndex++;
+                        const myCumulativeIndex = currentCumulativeMenuIndex;
                         return /* @__PURE__ */ jsxs18(
                           MenuItem2,
                           {
-                            active: selectedIndex === currentCumulativeMenuIndex,
+                            active: selectedIndex === myCumulativeIndex,
                             onClick: () => {
-                              setHighlightedIndex(currentCumulativeMenuIndex);
+                              setHighlightedIndex(myCumulativeIndex);
                               selectOptionAndCleanUp(new MenuOption(variable.name));
                             },
                             onMouseEnter: () => {
-                              setHighlightedIndex(currentCumulativeMenuIndex);
+                              setHighlightedIndex(myCumulativeIndex);
                             },
+                            css: menuItemTextGroup,
                             children: [
-                              /* @__PURE__ */ jsx31("div", { children: (_a2 = variable.displayName) != null ? _a2 : variable.name }),
-                              variable.helpText ? /* @__PURE__ */ jsx31(Caption, { children: variable.helpText }) : null
+                              /* @__PURE__ */ jsx31("span", { children: (_a2 = variable.displayName) != null ? _a2 : variable.name }),
+                              variable.helpText ? /* @__PURE__ */ jsx31("small", { css: smallText, children: variable.helpText }) : null
                             ]
                           },
                           variable.name
@@ -3719,40 +3751,11 @@ init_emotion_jsx_shim();
 import { Menu as Menu2, MenuGroup as MenuGroup2, MenuItem as MenuItem3, MenuItemSeparator as MenuItemSeparator2 } from "@uniformdev/design-system";
 import { useEffect as useEffect8, useRef as useRef8, useState as useState9 } from "react";
 import { CgUsbC } from "react-icons/cg";
-
-// src/components/Variables/styles/InsertVariableMenu.styles.ts
-init_emotion_jsx_shim();
-import { css as css22 } from "@emotion/react";
-var menuBtn2 = css22`
-  background: none;
-  border: none;
-  color: var(--gray-500);
-  padding: 0;
-`;
-var menuItemTextGroup = css22`
-  align-items: flex-start;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  line-height: 1em;
-`;
-var smallText = css22`
-  font-size: var(--fs-xs);
-  color: var(--gray-500);
-`;
-var variablesTipText = css22`
-  ${smallText}
-  color: var(--gray-500);
-  padding: 0 var(--spacing-sm);
-`;
-
-// src/components/Variables/SelectVariableMenu.tsx
 import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 var SelectVariableMenu = ({
   onSelectVariable,
   onResetVariables,
   showAddVariableMenuOption = false,
-  forceVisible,
   buttonCss,
   buttonProps,
   tip
@@ -3774,7 +3777,6 @@ var SelectVariableMenu = ({
     Menu2,
     {
       placement: "bottom-start",
-      forceVisible,
       menuTrigger: /* @__PURE__ */ jsx32(
         "button",
         {
@@ -4072,7 +4074,7 @@ function InputVariables({
   infoMessage,
   "data-test-id": dataTestId
 }) {
-  const { variables, readOnly } = useVariables(true);
+  const { variables } = useVariables(true);
   const [finalId] = React11.useState(id != null ? id : () => v43());
   const hasVariablesInValue = getReferencedVariables(value).length > 0;
   const [hadVariablesInValue, setHadVariablesInValue] = React11.useState(hasVariablesInValue);
@@ -4081,7 +4083,7 @@ function InputVariables({
       setHadVariablesInValue(true);
     }
   }, [hasVariablesInValue]);
-  const disableVariablesForReals = disableVariables || Object.keys(variables).length === 0 && !showAddVariableMenuOption || readOnly;
+  const disableVariablesForReals = disableVariables || Object.keys(variables).length === 0 && !showAddVariableMenuOption;
   const disableInlineVariablesForReals = disableVariablesForReals || disableInlineMenu;
   const sharedMenuProps = useMemo8(
     () => ({
@@ -4102,7 +4104,7 @@ function InputVariables({
         "data-text-value": value
       }
     ) }),
-    caption ? /* @__PURE__ */ jsx36(Caption2, { children: caption }) : null,
+    caption ? /* @__PURE__ */ jsx36(Caption, { children: caption }) : null,
     errorMessage ? /* @__PURE__ */ jsx36(ErrorMessage, { message: errorMessage }) : null,
     warningMessage ? /* @__PURE__ */ jsx36(WarningMessage, { message: warningMessage }) : null,
     infoMessage ? /* @__PURE__ */ jsx36(InfoMessage, { message: infoMessage }) : null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "19.23.1-alpha.12+669adf812",
+  "version": "19.23.1-alpha.13+9373933c0",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -45,8 +45,8 @@
   "dependencies": {
     "@hookform/resolvers": "^3.0.1",
     "@lexical/react": "^0.11.0",
-    "@uniformdev/design-system": "19.23.1-alpha.12+669adf812",
-    "@uniformdev/mesh-sdk": "19.23.1-alpha.12+669adf812",
+    "@uniformdev/design-system": "19.23.1-alpha.13+9373933c0",
+    "@uniformdev/mesh-sdk": "19.23.1-alpha.13+9373933c0",
     "lexical": "^0.11.0",
     "mitt": "^3.0.0",
     "react-beautiful-dnd": "13.1.1",
@@ -80,5 +80,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "669adf812df13a7856fb9bc5c4332c77e0697f3f"
+  "gitHead": "9373933c0734ad2de988ed99278b61623ddfa920"
 }