@uniformdev/mesh-sdk-react 20.36.2-alpha.90 → 20.37.1-alpha.1

package/dist/index.d.mts

@@ -416,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 = {
@@ -436,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 = {
     /**
@@ -553,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

@@ -416,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 = {
@@ -436,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 = {
     /**
@@ -553,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;
@@ -2485,7 +2491,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);
@@ -2594,6 +2601,7 @@ function InputVariables(props) {
       replaceValueOnVariableInsert: useInputWithNoVariables,
       autoFocus,
       filterVariable,
+      disableVariableDisplayNames,
       children: [
         /* @__PURE__ */ jsx28(PasteTransformerPlugin, { transformPaste }),
         /* @__PURE__ */ jsx28(ControlledValuePlugin, { value, enabled: singleTokenMode || useInputWithNoVariables }),

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;
@@ -2613,7 +2619,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);
@@ -2722,6 +2729,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 }),

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;
@@ -2485,7 +2491,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);
@@ -2594,6 +2601,7 @@ function InputVariables(props) {
       replaceValueOnVariableInsert: useInputWithNoVariables,
       autoFocus,
       filterVariable,
+      disableVariableDisplayNames,
       children: [
         /* @__PURE__ */ jsx28(PasteTransformerPlugin, { transformPaste }),
         /* @__PURE__ */ jsx28(ControlledValuePlugin, { value, enabled: singleTokenMode || useInputWithNoVariables }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "20.36.2-alpha.90+94c3a288ac",
+  "version": "20.37.1-alpha.1+5ac67f77a7",
   "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.36.2-alpha.90+94c3a288ac",
-    "@uniformdev/design-system": "20.36.2-alpha.90+94c3a288ac",
-    "@uniformdev/mesh-sdk": "20.36.2-alpha.90+94c3a288ac",
-    "@uniformdev/richtext": "20.36.2-alpha.90+94c3a288ac",
+    "@uniformdev/canvas": "20.37.1-alpha.1+5ac67f77a7",
+    "@uniformdev/design-system": "20.37.1-alpha.1+5ac67f77a7",
+    "@uniformdev/mesh-sdk": "20.37.1-alpha.1+5ac67f77a7",
+    "@uniformdev/richtext": "20.37.1-alpha.1+5ac67f77a7",
     "dequal": "^2.0.3",
     "lexical": "0.25.0",
     "mitt": "3.0.1",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "94c3a288acbde88c1229222ae50bd289b7c5749e"
+  "gitHead": "5ac67f77a77da73d93c76b9ec23d86acbd0a2123"
 }