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

package/dist/index.esm.js

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