@uniformdev/mesh-sdk-react 20.46.1-alpha.9 → 20.47.1-alpha.3

package/dist/index.js

@@ -646,14 +646,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",
@@ -920,7 +920,7 @@ var import_zod = require("@hookform/resolvers/zod");
 var import_design_system4 = require("@uniformdev/design-system");
 var import_react12 = require("react");
 var import_react_hook_form = require("react-hook-form");
-var z = __toESM(require("zod"));
+var z = __toESM(require("zod/v3"));
 
 // src/components/Variables/styles/VariableEditor.styles.ts
 var import_react11 = require("@emotion/react");
@@ -1292,18 +1292,17 @@ var DISCONNECT_VARIABLE_COMMAND = (0, import_lexical4.createCommand)(
   "uniform:disconnect-variable"
 );
 var INSERT_VARIABLE_COMMAND = (0, import_lexical4.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;
@@ -1423,7 +1422,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(
@@ -1714,13 +1716,13 @@ var VariableNode = class _VariableNode extends import_lexical5.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) {
@@ -1735,14 +1737,14 @@ var VariableNode = class _VariableNode extends import_lexical5.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
@@ -1782,7 +1784,7 @@ var VariableNode = class _VariableNode extends import_lexical5.DecoratorNode {
    * rely on Context, etc in this renderer.
    */
   decorate() {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(VariableNodeComponent, { state: this.__state, reference: this.reference, nodeKey: this.__key });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(VariableNodeComponent, { state: this.__variableState, reference: this.reference, nodeKey: this.__key });
   }
 };
 function $convertBindingElement(domNode) {
@@ -2048,27 +2050,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
@@ -2142,7 +2157,6 @@ var inputMultiLine = (lines) => import_react19.css`
 
 // src/components/Variables/toolbox/InputVariablesProvider.tsx
 var import_canvas6 = require("@uniformdev/canvas");
-var React4 = __toESM(require("react"));
 var import_react20 = require("react");
 function useInputVariablesState({
   value,
@@ -2159,14 +2173,14 @@ function useInputVariablesState({
 }) {
   const { variables } = useVariables(true);
   const variableReferenceCountInValue = (0, import_canvas6.hasReferencedVariables)(value != null ? value : "");
-  const [lastKnownId, setLastKnownId] = React4.useState(id);
-  const [hadVariablesInValue, setHadVariablesInValue] = React4.useState(variableReferenceCountInValue > 0);
-  React4.useEffect(() => {
+  const [lastKnownId, setLastKnownId] = (0, import_react20.useState)(id);
+  const [hadVariablesInValue, setHadVariablesInValue] = (0, import_react20.useState)(variableReferenceCountInValue > 0);
+  (0, import_react20.useEffect)(() => {
     if (variableReferenceCountInValue) {
       setHadVariablesInValue(true);
     }
   }, [variableReferenceCountInValue]);
-  React4.useEffect(() => {
+  (0, import_react20.useEffect)(() => {
     if (id !== lastKnownId) {
       setLastKnownId(id);
       setHadVariablesInValue(variableReferenceCountInValue > 0);
@@ -2216,30 +2230,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");
@@ -2286,7 +2276,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: [
@@ -2379,7 +2369,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;
@@ -2450,8 +2440,8 @@ function VariablesComposer(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const editorState = (0, import_react25.useRef)();
-  const updateTimeout = (0, import_react25.useRef)();
+  const editorState = (0, import_react25.useRef)(void 0);
+  const updateTimeout = (0, import_react25.useRef)(void 0);
   if (typeof document === "undefined") return null;
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_LexicalComposer.LexicalComposer, { initialConfig: editorConfig, children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -2488,7 +2478,7 @@ function VariablesComposer(props) {
 var import_clipboard = require("@lexical/clipboard");
 var import_LexicalComposerContext9 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
-var import_LexicalErrorBoundary = __toESM(require("@lexical/react/LexicalErrorBoundary"));
+var import_LexicalErrorBoundary = require("@lexical/react/LexicalErrorBoundary");
 var import_LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin");
 var import_LexicalPlainTextPlugin = require("@lexical/react/LexicalPlainTextPlugin");
 var import_utils4 = require("@lexical/utils");
@@ -2506,7 +2496,7 @@ function VariablesComposerInput({
       {
         contentEditable: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_LexicalContentEditable.ContentEditable, { ...contentEditableProps, placeholder: null, "aria-placeholder": void 0 }),
         placeholder: placeholder ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: placeholder }) : null,
-        ErrorBoundary: import_LexicalErrorBoundary.default
+        ErrorBoundary: import_LexicalErrorBoundary.LexicalErrorBoundary
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RichishCopyAndPastePlugin, {}),
@@ -2656,6 +2646,7 @@ function InputVariables(props) {
                   portal: renderMenuInPortal,
                   replaceValueOnVariableInsert: useInputWithNoVariables,
                   useInputWhenNoVariables: useInputWithNoVariables,
+                  isActive: hadVariablesInValue,
                   children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     VariablesComposerInput,
                     {
@@ -2744,6 +2735,7 @@ function InputVariablesOverlayMenu({
   disabled,
   useInputWhenNoVariables,
   portal,
+  isActive,
   ...props
 }) {
   if (disabled) {
@@ -2757,7 +2749,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
       }
     )
   ] });
@@ -2810,7 +2803,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" })
               }
             )
           }
@@ -3030,13 +3023,13 @@ ${prettifyBindExpression(bindExpression)}`
 
 // src/components/Variables/VariablesList.tsx
 var import_react35 = require("@emotion/react");
+var import_dnd2 = require("@hello-pangea/dnd");
 var import_CgTrash = require("@react-icons/all-files/cg/CgTrash");
 var import_design_system13 = require("@uniformdev/design-system");
-var import_react_beautiful_dnd2 = require("react-beautiful-dnd");
 
 // src/components/DragDropContext.tsx
+var import_dnd = require("@hello-pangea/dnd");
 var import_react33 = require("react");
-var import_react_beautiful_dnd = require("react-beautiful-dnd");
 var import_react_use = require("react-use");
 var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
 function DragDropContext({ children, ...props }) {
@@ -3048,7 +3041,7 @@ function DragDropContext({ children, ...props }) {
     300,
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_beautiful_dnd.DragDropContext, { ...props, children: isReady ? children : null });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dnd.DragDropContext, { ...props, children: isReady ? children : null });
 }
 
 // src/components/Variables/styles/VariablesList.styles.ts
@@ -3098,8 +3091,8 @@ var variableValue = import_react34.css`
 
 // src/components/Variables/VariablesList.tsx
 var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
-var DroppableHack = import_react_beautiful_dnd2.Droppable;
-var DraggableHack = import_react_beautiful_dnd2.Draggable;
+var DroppableHack = import_dnd2.Droppable;
+var DraggableHack = import_dnd2.Draggable;
 function VariablesList() {
   const { variables, dispatch, readOnly } = useVariables();
   const sorted = variablesToList(variables).filter((variable) => !variable.system);
@@ -3291,7 +3284,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"
     }
   ) });
 }
@@ -3302,11 +3296,12 @@ var import_design_system15 = require("@uniformdev/design-system");
 var import_react38 = require("react");
 
 // src/components/Request/RequestProvider.tsx
-var React5 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_jsx_runtime35 = require("@emotion/react/jsx-runtime");
-var RequestContext = React5.createContext(null);
+var RequestContext = React4.createContext(null);
 function RequestProvider({ value, onChange, children }) {
-  const contextValue = React5.useMemo(() => {
+  const [listVersion, setListVersion] = React4.useState(0);
+  const contextValue = React4.useMemo(() => {
     return {
       dispatch: (event) => {
         if (event.type === "setRelativeUrl") {
@@ -3325,6 +3320,7 @@ function RequestProvider({ value, onChange, children }) {
             return { ...old, parameters: newParameters };
           });
         } else if (event.type === "removeParameter") {
+          setListVersion((v) => v + 1);
           onChange((old) => {
             const newParameters = [...old.parameters];
             newParameters.splice(event.index, 1);
@@ -3341,6 +3337,7 @@ function RequestProvider({ value, onChange, children }) {
             return { ...old, headers: newHeaders };
           });
         } else if (event.type === "removeHeader") {
+          setListVersion((v) => v + 1);
           onChange((old) => {
             const newHeaders = [...old.headers];
             newHeaders.splice(event.index, 1);
@@ -3369,13 +3366,14 @@ function RequestProvider({ value, onChange, children }) {
           throw new Error(`Unknown event ${JSON.stringify(event)}`);
         }
       },
-      request: value
+      request: value,
+      listVersion
     };
-  }, [onChange, value]);
+  }, [onChange, value, listVersion]);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(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");
   }
@@ -3488,7 +3486,7 @@ function RequestHeaders({
   addOmitIfEmpty
 }) {
   var _a, _b;
-  const { dispatch, request } = useRequest();
+  const { dispatch, request, listVersion } = useRequest();
   const deezHeaders = [...request.headers, { key: "", value: "" }];
   const handleUpdateParamFromMenu = ({
     key,
@@ -3574,7 +3572,7 @@ function RequestHeaders({
               })
             }
           ) : null }) : null
-        ] }, index);
+        ] }, `${index}-${listVersion}`);
       })
     ] })
   ] }) });
@@ -3609,7 +3607,7 @@ function RequestParameters({
   addOmitIfEmpty
 }) {
   var _a, _b;
-  const { dispatch, request } = useRequest();
+  const { dispatch, request, listVersion } = useRequest();
   const deezParameters = [...request.parameters, { key: "", value: "" }];
   const handleUpdateParamFromMenu = ({
     key,
@@ -3707,7 +3705,7 @@ function RequestParameters({
               }
             }
           ) : null }) : null
-        ] }, index);
+        ] }, `${index}-${listVersion}`);
       })
     ] })
   ] }) });
@@ -4751,8 +4749,8 @@ function legacyThemeMapper(theme) {
 }
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
+var import_dnd3 = require("@hello-pangea/dnd");
 var import_design_system27 = require("@uniformdev/design-system");
-var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
 
 // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
 var import_react50 = require("@emotion/react");
@@ -4781,8 +4779,8 @@ var ObjectSearchResultListTitle = import_react50.css`
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
 var import_jsx_runtime55 = require("@emotion/react/jsx-runtime");
-var DroppableHack2 = import_react_beautiful_dnd3.Droppable;
-var DraggableHack2 = import_react_beautiful_dnd3.Draggable;
+var DroppableHack2 = import_dnd3.Droppable;
+var DraggableHack2 = import_dnd3.Draggable;
 function ObjectSearchResultList({
   resultLabelText = "Selected",
   removeButtonText = "Remove all",