@uniformdev/mesh-sdk-react 19.80.1-alpha.170 → 19.80.1-alpha.200

package/dist/index.d.mts

@@ -1177,7 +1177,10 @@ type ObjectSearchContainerProps = {
     enableDynamicInputToResultId?: boolean;
     /** a child node that places components within the search location */
     searchFilters: ReactNode;
-    /** a child node that places components within a scrollable list location */
+    /**
+     * a child node that places components within a scrollable list location
+     * set to `null` expl
+     */
     resultList?: ReactNode;
     /** allows any child element */
     children?: ReactNode;
@@ -1200,9 +1203,10 @@ type ObjectSearchFilterProps = {
     selectLabel?: string;
     /** sets the select input options, if empty - only keyword search field will be rendered */
     selectOptions?: Array<{
-        id: string;
+        id?: string;
         name?: string;
         label: string;
+        value?: string;
     }>;
     /** sets the search input name value
      * @default 'searchText'

package/dist/index.d.ts

@@ -1177,7 +1177,10 @@ type ObjectSearchContainerProps = {
     enableDynamicInputToResultId?: boolean;
     /** a child node that places components within the search location */
     searchFilters: ReactNode;
-    /** a child node that places components within a scrollable list location */
+    /**
+     * a child node that places components within a scrollable list location
+     * set to `null` expl
+     */
     resultList?: ReactNode;
     /** allows any child element */
     children?: ReactNode;
@@ -1200,9 +1203,10 @@ type ObjectSearchFilterProps = {
     selectLabel?: string;
     /** sets the select input options, if empty - only keyword search field will be rendered */
     selectOptions?: Array<{
-        id: string;
+        id?: string;
         name?: string;
         label: string;
+        value?: string;
     }>;
     /** sets the search input name value
      * @default 'searchText'

package/dist/index.esm.js

@@ -2654,13 +2654,14 @@ function useConnectedDataAsVariables(connectedData) {
 }
 
 // src/hooks/useDynamicInputsAsVariables.tsx
+import { LOCALE_DYNAMIC_INPUT_NAME } from "@uniformdev/canvas";
 import { useMemo as useMemo4 } from "react";
 import { Fragment as Fragment4, jsx as jsx26 } from "@emotion/react/jsx-runtime";
 function useDynamicInputsAsVariables(dynamicInputs) {
   return useMemo4(() => {
     const result = Object.entries(dynamicInputs).reduce(
       (acc, [name, input3]) => {
-        const source = `from ${input3.type === "path" ? "URL path" : "query string"}`;
+        const source = `from ${name === LOCALE_DYNAMIC_INPUT_NAME ? "current locale" : input3.type === "path" ? "URL path" : "query string"}`;
         acc[name] = {
           readOnly: true,
           type: input3.type,
@@ -2944,6 +2945,7 @@ function VariableChip({
   tooltip,
   reference,
   onClick,
+  clickToEdit,
   isFresh,
   selected,
   disabled
@@ -2951,7 +2953,7 @@ function VariableChip({
   const hasClickEvent = !!onClick;
   const referenceIsValidFr = isFresh ? true : referenceIsValid;
   const Wrapper = referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? Fragment5 : UndefinedVariableReference;
-  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent ? "Click to edit" : void 0;
+  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
   return /* @__PURE__ */ jsx29(
     MultilineChip,
     {
@@ -3968,6 +3970,7 @@ function VariableNodeComponent({
       displayName: state.isLoading ? /* @__PURE__ */ jsx33(LoadingIndicator2, { size: "sm" }) : state.displayName,
       selected: isSelected,
       disabled: readOnly,
+      clickToEdit: state.hasClickEvent,
       onClick: state.hasClickEvent ? () => {
         setSelected(!isSelected);
         editor.dispatchCommand(EDIT_VARIABLE_COMMAND, {
@@ -4459,6 +4462,7 @@ function VariablesComposer(props) {
     /* @__PURE__ */ jsx37(
       OnChangePlugin,
       {
+        ignoreSelectionChange: true,
         onChange: (state) => {
           editorState.current = state;
           if (updateTimeout.current) {
@@ -6415,22 +6419,22 @@ var ObjectSearchContainer = ({
   const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
   const { flatVariables } = useVariables(true);
   const inputValue = (_b = (_a = selectedListItems == null ? void 0 : selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
-  const listItems = resultList != null ? resultList : /* @__PURE__ */ jsx60(DefaultResultList, {});
+  const listItems = resultList != null ? resultList : /* @__PURE__ */ jsx60(
+    ScrollableList,
+    {
+      role: "list",
+      css: css32`
+        > div {
+          transition: max-height var(--duration-slow) var(--timing-ease-out);
+          max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
+        }
+      `,
+      children: /* @__PURE__ */ jsx60(DefaultResultList, {})
+    }
+  );
   const body = /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
     searchFilters,
-    /* @__PURE__ */ jsx60(
-      ScrollableList,
-      {
-        role: "list",
-        css: css32`
-          > div {
-            transition: max-height var(--duration-slow) var(--timing-ease-out);
-            max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
-          }
-        `,
-        children: listItems
-      }
-    )
+    listItems
   ] });
   const handleSelectedVariableChange = (selectedValue) => {
     var _a2;
@@ -6542,10 +6546,7 @@ var ObjectSearchFilter = ({
     }
     return [
       ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
-      ...selectOptions ? selectOptions.map((option) => {
-        var _a2;
-        return { name: option == null ? void 0 : option.name, label: (_a2 = option.label) != null ? _a2 : option == null ? void 0 : option.name, id: option.id };
-      }) : []
+      ...selectOptions != null ? selectOptions : []
     ];
   }, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
   const shouldRenderSelect = memoizedSelectOptions.length > 0;

package/dist/index.js

@@ -2856,13 +2856,14 @@ function useConnectedDataAsVariables(connectedData) {
 }
 
 // src/hooks/useDynamicInputsAsVariables.tsx
+var import_canvas = require("@uniformdev/canvas");
 var import_react26 = require("react");
 var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
 function useDynamicInputsAsVariables(dynamicInputs) {
   return (0, import_react26.useMemo)(() => {
     const result = Object.entries(dynamicInputs).reduce(
       (acc, [name, input3]) => {
-        const source = `from ${input3.type === "path" ? "URL path" : "query string"}`;
+        const source = `from ${name === import_canvas.LOCALE_DYNAMIC_INPUT_NAME ? "current locale" : input3.type === "path" ? "URL path" : "query string"}`;
         acc[name] = {
           readOnly: true,
           type: input3.type,
@@ -2981,11 +2982,11 @@ var import_lite = require("dequal/lite");
 var import_react30 = require("react");
 
 // src/components/Variables/util/deserializeVariablesEditorState.ts
-var import_canvas = require("@uniformdev/canvas");
+var import_canvas2 = require("@uniformdev/canvas");
 var import_lexical = require("lexical");
 function deserializeVariablesEditorState(serialized) {
   const result = [];
-  (0, import_canvas.parseVariableExpression)(serialized != null ? serialized : "", (token, type) => {
+  (0, import_canvas2.parseVariableExpression)(serialized != null ? serialized : "", (token, type) => {
     if (type === "text") {
       const node = {
         type: import_lexical.TextNode.getType(),
@@ -3112,7 +3113,7 @@ var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerCont
 var import_useLexicalNodeSelection = require("@lexical/react/useLexicalNodeSelection");
 var import_selection = require("@lexical/selection");
 var import_utils2 = require("@lexical/utils");
-var import_canvas3 = require("@uniformdev/canvas");
+var import_canvas4 = require("@uniformdev/canvas");
 var import_design_system18 = require("@uniformdev/design-system");
 var import_lexical4 = require("lexical");
 var import_react39 = require("react");
@@ -3132,6 +3133,7 @@ function VariableChip({
   tooltip,
   reference,
   onClick,
+  clickToEdit,
   isFresh,
   selected,
   disabled
@@ -3139,7 +3141,7 @@ function VariableChip({
   const hasClickEvent = !!onClick;
   const referenceIsValidFr = isFresh ? true : referenceIsValid;
   const Wrapper = referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? import_react31.Fragment : UndefinedVariableReference;
-  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent ? "Click to edit" : void 0;
+  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     import_design_system15.MultilineChip,
     {
@@ -3186,7 +3188,7 @@ var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerCont
 var import_LexicalTypeaheadMenuPlugin = require("@lexical/react/LexicalTypeaheadMenuPlugin");
 var import_utils = require("@lexical/utils");
 var import_AiFillPlusCircle = require("@react-icons/all-files/ai/AiFillPlusCircle");
-var import_canvas2 = require("@uniformdev/canvas");
+var import_canvas3 = require("@uniformdev/canvas");
 var import_design_system17 = require("@uniformdev/design-system");
 var import_lite2 = require("dequal/lite");
 var import_lexical3 = require("lexical");
@@ -3660,7 +3662,7 @@ function useVariablesMenu({
           var _a;
           const targetVariable = variables[value];
           if (overwriteExistingValue) {
-            setVariablesEditorValue(editor, (0, import_canvas2.createVariableReference)(value));
+            setVariablesEditorValue(editor, (0, import_canvas3.createVariableReference)(value));
             return true;
           }
           const variableNode = $createVariableNode(value, {
@@ -3830,7 +3832,7 @@ function VariablesPlugin({
           if (!disableVariables) {
             const targetVariable = variablesRef.current.variables[reference];
             if (overwriteExistingValue) {
-              setVariablesEditorValue(editor, (0, import_canvas2.createVariableReference)(reference));
+              setVariablesEditorValue(editor, (0, import_canvas3.createVariableReference)(reference));
               return true;
             }
             const variableNode = $createVariableNode(reference, {
@@ -4030,7 +4032,7 @@ var VariableNode = class _VariableNode extends import_lexical4.DecoratorNode {
    * (albeit it won't get the fancy chip-node)
    */
   getTextContent() {
-    return (0, import_canvas3.createVariableReference)(this.reference);
+    return (0, import_canvas4.createVariableReference)(this.reference);
   }
   /** Creates the DOM wrapper that hosts the node */
   createDOM() {
@@ -4146,6 +4148,7 @@ function VariableNodeComponent({
       displayName: state.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_design_system18.LoadingIndicator, { size: "sm" }) : state.displayName,
       selected: isSelected,
       disabled: readOnly,
+      clickToEdit: state.hasClickEvent,
       onClick: state.hasClickEvent ? () => {
         setSelected(!isSelected);
         editor.dispatchCommand(EDIT_VARIABLE_COMMAND, {
@@ -4283,10 +4286,10 @@ var React10 = __toESM(require("react"));
 var import_react42 = require("react");
 
 // src/components/Variables/util/hasReferencedVariables.ts
-var import_canvas4 = require("@uniformdev/canvas");
+var import_canvas5 = require("@uniformdev/canvas");
 function hasReferencedVariables(value) {
   let result = false;
-  (0, import_canvas4.parseVariableExpression)(value, (token, type) => {
+  (0, import_canvas5.parseVariableExpression)(value, (token, type) => {
     if (type === "variable") {
       result = true;
       return false;
@@ -4572,7 +4575,7 @@ function SingleLineTextPlugin() {
 }
 
 // src/components/Variables/util/serializeVariablesEditorState.ts
-var import_canvas5 = require("@uniformdev/canvas");
+var import_canvas6 = require("@uniformdev/canvas");
 var import_lexical8 = require("lexical");
 
 // src/components/Variables/util/variableExpression.ts
@@ -4591,7 +4594,7 @@ function serializeRecursive(node, buffer) {
     buffer.push(node.text.replace(variablePrefix, "\\${"));
   }
   if (node.type === VariableNode.getType()) {
-    buffer.push((0, import_canvas5.createVariableReference)(node.reference));
+    buffer.push((0, import_canvas6.createVariableReference)(node.reference));
   }
   if (node.type === import_lexical8.LineBreakNode.getType()) {
     buffer.push("\n");
@@ -4637,6 +4640,7 @@ function VariablesComposer(props) {
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       import_LexicalOnChangePlugin.OnChangePlugin,
       {
+        ignoreSelectionChange: true,
         onChange: (state) => {
           editorState.current = state;
           if (updateTimeout.current) {
@@ -4910,7 +4914,7 @@ function InputVariablesOverlayMenu({
 
 // src/components/Variables/ParameterConnectionIndicator.tsx
 var import_CgUsbC2 = require("@react-icons/all-files/cg/CgUsbC");
-var import_canvas6 = require("@uniformdev/canvas");
+var import_canvas7 = require("@uniformdev/canvas");
 var import_design_system22 = require("@uniformdev/design-system");
 var import_react51 = require("react");
 
@@ -5015,7 +5019,7 @@ function ParameterConnectionIndicator({
 }) {
   const hasVariablesInValue = (0, import_react51.useMemo)(() => {
     let result = false;
-    (0, import_canvas6.bindVariablesToObject)({
+    (0, import_canvas7.bindVariablesToObject)({
       value,
       variables: {},
       handleBinding: () => {
@@ -6279,11 +6283,11 @@ var DataRefreshButton = ({
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
 var import_react66 = require("@emotion/react");
-var import_canvas8 = require("@uniformdev/canvas");
+var import_canvas9 = require("@uniformdev/canvas");
 var import_design_system35 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
-var import_canvas7 = require("@uniformdev/canvas");
+var import_canvas8 = require("@uniformdev/canvas");
 var import_react64 = require("react");
 var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
 var ObjectSearchContext = (0, import_react64.createContext)({
@@ -6382,7 +6386,7 @@ function useObjectSearchContext() {
   return (0, import_react64.useContext)(ObjectSearchContext);
 }
 function bindQuery(query, inputs) {
-  const { result, errors } = (0, import_canvas7.bindVariablesToObject)({
+  const { result, errors } = (0, import_canvas8.bindVariablesToObject)({
     value: query,
     variables: inputs,
     errorPrefix: "Dynamic input"
@@ -6546,22 +6550,22 @@ var ObjectSearchContainer = ({
   const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
   const { flatVariables } = useVariables(true);
   const inputValue = (_b = (_a = selectedListItems == null ? void 0 : selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
-  const listItems = resultList != null ? resultList : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DefaultResultList, {});
+  const listItems = resultList != null ? resultList : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    import_design_system35.ScrollableList,
+    {
+      role: "list",
+      css: import_react66.css`
+        > div {
+          transition: max-height var(--duration-slow) var(--timing-ease-out);
+          max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
+        }
+      `,
+      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DefaultResultList, {})
+    }
+  );
   const body = /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_design_system35.VerticalRhythm, { children: [
     searchFilters,
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-      import_design_system35.ScrollableList,
-      {
-        role: "list",
-        css: import_react66.css`
-          > div {
-            transition: max-height var(--duration-slow) var(--timing-ease-out);
-            max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
-          }
-        `,
-        children: listItems
-      }
-    )
+    listItems
   ] });
   const handleSelectedVariableChange = (selectedValue) => {
     var _a2;
@@ -6569,7 +6573,7 @@ var ObjectSearchContainer = ({
       onSelectItem([]);
       return;
     }
-    const { result, errors } = (0, import_canvas8.bindVariables)({
+    const { result, errors } = (0, import_canvas9.bindVariables)({
       value: selectedValue,
       variables: flatVariables,
       errorPrefix: "Dynamic input"
@@ -6673,10 +6677,7 @@ var ObjectSearchFilter = ({
     }
     return [
       ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
-      ...selectOptions ? selectOptions.map((option) => {
-        var _a2;
-        return { name: option == null ? void 0 : option.name, label: (_a2 = option.label) != null ? _a2 : option == null ? void 0 : option.name, id: option.id };
-      }) : []
+      ...selectOptions != null ? selectOptions : []
     ];
   }, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
   const shouldRenderSelect = memoizedSelectOptions.length > 0;

package/dist/index.mjs

@@ -2654,13 +2654,14 @@ function useConnectedDataAsVariables(connectedData) {
 }
 
 // src/hooks/useDynamicInputsAsVariables.tsx
+import { LOCALE_DYNAMIC_INPUT_NAME } from "@uniformdev/canvas";
 import { useMemo as useMemo4 } from "react";
 import { Fragment as Fragment4, jsx as jsx26 } from "@emotion/react/jsx-runtime";
 function useDynamicInputsAsVariables(dynamicInputs) {
   return useMemo4(() => {
     const result = Object.entries(dynamicInputs).reduce(
       (acc, [name, input3]) => {
-        const source = `from ${input3.type === "path" ? "URL path" : "query string"}`;
+        const source = `from ${name === LOCALE_DYNAMIC_INPUT_NAME ? "current locale" : input3.type === "path" ? "URL path" : "query string"}`;
         acc[name] = {
           readOnly: true,
           type: input3.type,
@@ -2944,6 +2945,7 @@ function VariableChip({
   tooltip,
   reference,
   onClick,
+  clickToEdit,
   isFresh,
   selected,
   disabled
@@ -2951,7 +2953,7 @@ function VariableChip({
   const hasClickEvent = !!onClick;
   const referenceIsValidFr = isFresh ? true : referenceIsValid;
   const Wrapper = referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? Fragment5 : UndefinedVariableReference;
-  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent ? "Click to edit" : void 0;
+  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
   return /* @__PURE__ */ jsx29(
     MultilineChip,
     {
@@ -3968,6 +3970,7 @@ function VariableNodeComponent({
       displayName: state.isLoading ? /* @__PURE__ */ jsx33(LoadingIndicator2, { size: "sm" }) : state.displayName,
       selected: isSelected,
       disabled: readOnly,
+      clickToEdit: state.hasClickEvent,
       onClick: state.hasClickEvent ? () => {
         setSelected(!isSelected);
         editor.dispatchCommand(EDIT_VARIABLE_COMMAND, {
@@ -4459,6 +4462,7 @@ function VariablesComposer(props) {
     /* @__PURE__ */ jsx37(
       OnChangePlugin,
       {
+        ignoreSelectionChange: true,
         onChange: (state) => {
           editorState.current = state;
           if (updateTimeout.current) {
@@ -6415,22 +6419,22 @@ var ObjectSearchContainer = ({
   const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
   const { flatVariables } = useVariables(true);
   const inputValue = (_b = (_a = selectedListItems == null ? void 0 : selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
-  const listItems = resultList != null ? resultList : /* @__PURE__ */ jsx60(DefaultResultList, {});
+  const listItems = resultList != null ? resultList : /* @__PURE__ */ jsx60(
+    ScrollableList,
+    {
+      role: "list",
+      css: css32`
+        > div {
+          transition: max-height var(--duration-slow) var(--timing-ease-out);
+          max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
+        }
+      `,
+      children: /* @__PURE__ */ jsx60(DefaultResultList, {})
+    }
+  );
   const body = /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
     searchFilters,
-    /* @__PURE__ */ jsx60(
-      ScrollableList,
-      {
-        role: "list",
-        css: css32`
-          > div {
-            transition: max-height var(--duration-slow) var(--timing-ease-out);
-            max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
-          }
-        `,
-        children: listItems
-      }
-    )
+    listItems
   ] });
   const handleSelectedVariableChange = (selectedValue) => {
     var _a2;
@@ -6542,10 +6546,7 @@ var ObjectSearchFilter = ({
     }
     return [
       ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
-      ...selectOptions ? selectOptions.map((option) => {
-        var _a2;
-        return { name: option == null ? void 0 : option.name, label: (_a2 = option.label) != null ? _a2 : option == null ? void 0 : option.name, id: option.id };
-      }) : []
+      ...selectOptions != null ? selectOptions : []
     ];
   }, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
   const shouldRenderSelect = memoizedSelectOptions.length > 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "19.80.1-alpha.170+07c5014817",
+  "version": "19.80.1-alpha.200+85da778e5f",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -50,9 +50,9 @@
     "@lexical/selection": "^0.12.0",
     "@lexical/utils": "^0.12.0",
     "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v4.10.1/react-icons-all-files-4.10.1.tgz",
-    "@uniformdev/canvas": "19.80.1-alpha.170+07c5014817",
-    "@uniformdev/design-system": "19.80.1-alpha.170+07c5014817",
-    "@uniformdev/mesh-sdk": "19.80.1-alpha.170+07c5014817",
+    "@uniformdev/canvas": "19.80.1-alpha.200+85da778e5f",
+    "@uniformdev/design-system": "19.80.1-alpha.200+85da778e5f",
+    "@uniformdev/mesh-sdk": "19.80.1-alpha.200+85da778e5f",
     "dequal": "^2.0.3",
     "lexical": "^0.12.0",
     "mitt": "^3.0.0",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "07c5014817c7acefceb653dc48d26a3b53341c1e"
+  "gitHead": "85da778e5fc4f47c47c585b9e4ccbe19a6a21563"
 }