@uniformdev/mesh-sdk-react 20.71.2-alpha.7 → 20.72.2-alpha.3

package/dist/index.d.mts

@@ -806,7 +806,7 @@ declare function serializeVariablesEditorSerializedState(serializedEditorState:
  * If newValue is a string, it will be treated as a variable-reference-containing string, and parsed to a Lexical AST
  * If newValue is a serialized Lexical AST, it will be used as-is. If the AST is invalid, the editor will be set to an empty state.
  */
-declare function setVariablesEditorValue(editor: LexicalEditor, newValue: string | undefined | SerializedEditorState<SerializedLexicalNode>, tag?: string): void;
+declare function setVariablesEditorValue(editor: LexicalEditor, newValue: string | undefined | null | SerializedEditorState<SerializedLexicalNode>, tag?: string): void;
 
 declare function variableDefaultTextValue(defaultValue: unknown): string;
 
@@ -1720,9 +1720,11 @@ type FilterItemProps = {
     initialCriteriaTitle?: string;
     /** How multiple criteria are joined together */
     criteriaGroupOperator?: 'and' | 'or';
+    /** When provided, renders an interactive dropdown on the second row to switch between and/or */
+    onCriteriaGroupOperatorChange?: (op: 'and' | 'or') => void;
 };
 /** A filter item component used to display filter options */
-declare const FilterItem: ({ index, operatorOptions, valueOptions, onFilterOptionChange, onFilterDynamicChange, onOperatorChange, onValueChange, initialCriteriaTitle, criteriaGroupOperator, }: FilterItemProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const FilterItem: ({ index, operatorOptions, valueOptions, onFilterOptionChange, onFilterDynamicChange, onOperatorChange, onValueChange, initialCriteriaTitle, criteriaGroupOperator, onCriteriaGroupOperatorChange, }: FilterItemProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type FilterMapper = Record<string, ComponentType<any> | null>;
 type SearchAndFilterProviderProps = {
@@ -1869,9 +1871,9 @@ type FilterItemsProps = {
     additionalFiltersContainer: SearchAndFilterProps['additionalFiltersContainer'];
     filterTitle?: string;
     resetButtonText?: string;
-} & Pick<FilterItemProps, 'initialCriteriaTitle' | 'criteriaGroupOperator'>;
+} & Pick<FilterItemProps, 'initialCriteriaTitle' | 'criteriaGroupOperator' | 'onCriteriaGroupOperatorChange'>;
 /** A filter items component used to display filter options */
-declare const FilterItems: ({ addButtonText, additionalFiltersContainer, filterTitle, resetButtonText, initialCriteriaTitle, criteriaGroupOperator, }: FilterItemsProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const FilterItems: ({ addButtonText, additionalFiltersContainer, filterTitle, resetButtonText, initialCriteriaTitle, criteriaGroupOperator, onCriteriaGroupOperatorChange, }: FilterItemsProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SearchAndFilterOptionsContainerProps = {
     /** The button row to be displayed at the bottom of the container */

package/dist/index.d.ts

@@ -806,7 +806,7 @@ declare function serializeVariablesEditorSerializedState(serializedEditorState:
  * If newValue is a string, it will be treated as a variable-reference-containing string, and parsed to a Lexical AST
  * If newValue is a serialized Lexical AST, it will be used as-is. If the AST is invalid, the editor will be set to an empty state.
  */
-declare function setVariablesEditorValue(editor: LexicalEditor, newValue: string | undefined | SerializedEditorState<SerializedLexicalNode>, tag?: string): void;
+declare function setVariablesEditorValue(editor: LexicalEditor, newValue: string | undefined | null | SerializedEditorState<SerializedLexicalNode>, tag?: string): void;
 
 declare function variableDefaultTextValue(defaultValue: unknown): string;
 
@@ -1720,9 +1720,11 @@ type FilterItemProps = {
     initialCriteriaTitle?: string;
     /** How multiple criteria are joined together */
     criteriaGroupOperator?: 'and' | 'or';
+    /** When provided, renders an interactive dropdown on the second row to switch between and/or */
+    onCriteriaGroupOperatorChange?: (op: 'and' | 'or') => void;
 };
 /** A filter item component used to display filter options */
-declare const FilterItem: ({ index, operatorOptions, valueOptions, onFilterOptionChange, onFilterDynamicChange, onOperatorChange, onValueChange, initialCriteriaTitle, criteriaGroupOperator, }: FilterItemProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const FilterItem: ({ index, operatorOptions, valueOptions, onFilterOptionChange, onFilterDynamicChange, onOperatorChange, onValueChange, initialCriteriaTitle, criteriaGroupOperator, onCriteriaGroupOperatorChange, }: FilterItemProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type FilterMapper = Record<string, ComponentType<any> | null>;
 type SearchAndFilterProviderProps = {
@@ -1869,9 +1871,9 @@ type FilterItemsProps = {
     additionalFiltersContainer: SearchAndFilterProps['additionalFiltersContainer'];
     filterTitle?: string;
     resetButtonText?: string;
-} & Pick<FilterItemProps, 'initialCriteriaTitle' | 'criteriaGroupOperator'>;
+} & Pick<FilterItemProps, 'initialCriteriaTitle' | 'criteriaGroupOperator' | 'onCriteriaGroupOperatorChange'>;
 /** A filter items component used to display filter options */
-declare const FilterItems: ({ addButtonText, additionalFiltersContainer, filterTitle, resetButtonText, initialCriteriaTitle, criteriaGroupOperator, }: FilterItemsProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const FilterItems: ({ addButtonText, additionalFiltersContainer, filterTitle, resetButtonText, initialCriteriaTitle, criteriaGroupOperator, onCriteriaGroupOperatorChange, }: FilterItemsProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SearchAndFilterOptionsContainerProps = {
     /** The button row to be displayed at the bottom of the container */

package/dist/index.esm.js

@@ -503,7 +503,7 @@ function refreshVariableNodeMetadata(editor) {
 
 // src/components/Variables/util/setVariablesEditorValue.ts
 function setVariablesEditorValue(editor, newValue, tag) {
-  if (typeof newValue === "undefined" || typeof newValue === "string") {
+  if (newValue === null || typeof newValue === "undefined" || typeof newValue === "string") {
     const parsedState = editor.parseEditorState(deserializeVariablesEditorState(newValue));
     editor.setEditorState(parsedState.clone(null), {
       tag
@@ -685,7 +685,8 @@ import {
   $isNodeSelection,
   $setSelection,
   COMMAND_PRIORITY_NORMAL,
-  createCommand
+  createCommand,
+  SKIP_DOM_SELECTION_TAG
 } from "lexical";
 import { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo6, useRef as useRef3, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
@@ -1147,6 +1148,11 @@ var DISCONNECT_VARIABLE_COMMAND = createCommand(
   "uniform:disconnect-variable"
 );
 var INSERT_VARIABLE_COMMAND = createCommand("uniform:insert-variable");
+function isEditorFocused(editor) {
+  var _a;
+  const rootElement = editor.getRootElement();
+  return (_a = rootElement == null ? void 0 : rootElement.contains(rootElement.ownerDocument.activeElement)) != null ? _a : false;
+}
 var DollarSignVariablesRegex = /(^.*)(\$\$(.{0,20}))$/;
 function getPossibleQueryMatch(text) {
   const match = DollarSignVariablesRegex.exec(text);
@@ -1441,7 +1447,7 @@ function VariablesPlugin({
     replaceValueOnVariableInsert,
     disableVariableDisplayNames
   ]);
-  const updateExistingNodeIfChanged = useCallback2(
+  const computeUpdatedVariableNodeState = useCallback2(
     (variableNode) => {
       var _a, _b, _c, _d;
       const targetVar = variablesRef.current.variables[variableNode.reference];
@@ -1449,7 +1455,7 @@ function VariablesPlugin({
       const isLoadingVariables = variablesRef.current.isLoading;
       const currentState = variableNode.getState();
       if (currentState.isFresh && !targetVar && !targetUndefinedVar) {
-        return;
+        return void 0;
       }
       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);
@@ -1462,26 +1468,50 @@ function VariablesPlugin({
         tooltip,
         isFresh: false
       };
-      if (!dequal(currentState, newState)) {
+      return dequal(currentState, newState) ? void 0 : newState;
+    },
+    [canEditVariable, disableVariableDisplayNames]
+  );
+  const updateExistingNodeIfChanged = useCallback2(
+    (variableNode) => {
+      const newState = computeUpdatedVariableNodeState(variableNode);
+      if (newState) {
         variableNode.setState(newState);
       }
     },
-    [canEditVariable, disableVariableDisplayNames]
+    [computeUpdatedVariableNodeState]
   );
   useEffect4(() => {
-    let selection;
+    const pendingUpdates = [];
     editor.read(() => {
-      selection = $getSelection();
+      $dfs().forEach(({ node }) => {
+        if ($isVariableNode(node)) {
+          const newState = computeUpdatedVariableNodeState(node);
+          if (newState) {
+            pendingUpdates.push({ key: node.getKey(), newState });
+          }
+        }
+      });
     });
+    if (pendingUpdates.length === 0) {
+      return;
+    }
+    const shouldSyncDomSelection = isEditorFocused(editor);
     editor.update(() => {
       var _a;
-      $addUpdateTag("skip-dom-selection");
-      $setSelection((_a = selection == null ? void 0 : selection.clone()) != null ? _a : null);
-      $dfs().filter(({ node }) => $isVariableNode(node)).forEach(({ node: variableNode }) => {
-        updateExistingNodeIfChanged(variableNode);
+      const selection = $getSelection();
+      pendingUpdates.forEach(({ key, newState }) => {
+        const node = $getNodeByKey(key);
+        if ($isVariableNode(node)) {
+          node.setState(newState);
+        }
       });
+      $setSelection((_a = selection == null ? void 0 : selection.clone()) != null ? _a : null);
+      if (!shouldSyncDomSelection) {
+        $addUpdateTag(SKIP_DOM_SELECTION_TAG);
+      }
     });
-  }, [editor, variables, knownUndefinedValues, canEditVariable, updateExistingNodeIfChanged]);
+  }, [editor, variables, knownUndefinedValues, computeUpdatedVariableNodeState]);
   useEffect4(() => {
     return editor.registerNodeTransform(VariableNode, (variableNode) => {
       updateExistingNodeIfChanged(variableNode);
@@ -6253,6 +6283,25 @@ var ResetConditionsBtn = css21`
     color: var(--gray-400);
   }
 `;
+var CriteriaGroupOperatorTrigger = css21`
+  && {
+    padding: 0;
+    border-radius: var(--rounded-sm);
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+
+    > div {
+      gap: 2px;
+    }
+
+    svg {
+      width: 10px;
+      height: 10px;
+      color: var(--gray-400);
+    }
+  }
+`;
 var IconBtn = css21`
   align-self: center;
   background: transparent;
@@ -6560,7 +6609,9 @@ var FilterControls = ({
   const [localSearchTerm, setLocalSearchTerm] = useState21(searchTerm);
   useDebounce7(
     () => {
-      setSearchTerm(localSearchTerm);
+      if (localSearchTerm !== searchTerm) {
+        setSearchTerm(localSearchTerm);
+      }
     },
     300,
     [localSearchTerm]
@@ -6639,7 +6690,13 @@ var FilterControls = ({
 
 // src/components/SearchAndFilter/FilterItem.tsx
 import { CgTrash as CgTrash2 } from "@react-icons/all-files/cg/CgTrash";
-import { Icon as Icon4, InputComboBox as InputComboBox5 } from "@uniformdev/design-system";
+import {
+  DropdownStyleMenuTrigger,
+  Icon as Icon4,
+  InputComboBox as InputComboBox5,
+  Menu as Menu3,
+  SelectableMenuItem
+} from "@uniformdev/design-system";
 import { useMemo as useMemo21 } from "react";
 
 // src/components/SearchAndFilter/util/isFilterBindable.ts
@@ -6659,7 +6716,8 @@ var FilterItem = ({
   onOperatorChange,
   onValueChange,
   initialCriteriaTitle = "Where",
-  criteriaGroupOperator = "and"
+  criteriaGroupOperator = "and",
+  onCriteriaGroupOperatorChange
 }) => {
   var _a, _b;
   const { filters, handleDeleteFilter, filterOptions } = useSearchAndFilter();
@@ -6697,8 +6755,45 @@ var FilterItem = ({
   } : {};
   const CustomLeftHandComponent = selectedFieldValue == null ? void 0 : selectedFieldValue.leftHandSideComponentWhenSelected;
   const isEmptyOperator = metaDataPossibleOptions === "empty";
+  const joinLabel = index === 0 ? initialCriteriaTitle : index === 1 && onCriteriaGroupOperatorChange ? /* @__PURE__ */ jsxs34(
+    Menu3,
+    {
+      menuTrigger: /* @__PURE__ */ jsx75(
+        DropdownStyleMenuTrigger,
+        {
+          bgColor: "transparent",
+          css: CriteriaGroupOperatorTrigger,
+          "data-testid": "criteria-group-operator",
+          "aria-label": "criteria group operator",
+          children: criteriaGroupOperator
+        }
+      ),
+      size: "small",
+      placement: "bottom-start",
+      children: [
+        /* @__PURE__ */ jsx75(
+          SelectableMenuItem,
+          {
+            selected: criteriaGroupOperator === "and",
+            onClick: () => onCriteriaGroupOperatorChange("and"),
+            "data-testid": "criteria-group-operator-and",
+            children: "and"
+          }
+        ),
+        /* @__PURE__ */ jsx75(
+          SelectableMenuItem,
+          {
+            selected: criteriaGroupOperator === "or",
+            onClick: () => onCriteriaGroupOperatorChange("or"),
+            "data-testid": "criteria-group-operator-or",
+            children: "or"
+          }
+        )
+      ]
+    }
+  ) : criteriaGroupOperator;
   return /* @__PURE__ */ jsxs34("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
-    /* @__PURE__ */ jsx75("span", { children: index === 0 ? initialCriteriaTitle : criteriaGroupOperator }),
+    /* @__PURE__ */ jsx75("span", { children: joinLabel }),
     /* @__PURE__ */ jsxs34("div", { css: [ConditionalInputRow, isEmptyOperator ? ConditionalInputRowEmpty : null], children: [
       CustomLeftHandComponent ? /* @__PURE__ */ jsx75(
         CustomLeftHandComponent,
@@ -6963,7 +7058,8 @@ var FilterItems = ({
   filterTitle,
   resetButtonText,
   initialCriteriaTitle,
-  criteriaGroupOperator
+  criteriaGroupOperator,
+  onCriteriaGroupOperatorChange
 }) => {
   const { filterOptions, filters, setFilters, handleAddFilter } = useSearchAndFilter();
   const handleUpdateFilter = (index, prop, value) => {
@@ -7033,7 +7129,8 @@ var FilterItems = ({
             onFilterDynamicChange: (e) => handleUpdateFilter(i, "dynamicField", e),
             valueOptions: possibleValueOptions,
             initialCriteriaTitle,
-            criteriaGroupOperator
+            criteriaGroupOperator,
+            onCriteriaGroupOperatorChange
           },
           i
         );
@@ -7625,7 +7722,7 @@ import {
   Label,
   LoadingIndicator as LoadingIndicator4,
   LoadingOverlay,
-  Menu as Menu3,
+  Menu as Menu4,
   MenuItem as MenuItem2,
   ParameterGroup,
   ParameterImage,
@@ -7692,7 +7789,7 @@ export {
   LoadingIndicator4 as LoadingIndicator,
   LoadingOverlay,
   MULTI_SELECT_OPERATORS,
-  Menu3 as Menu,
+  Menu4 as Menu,
   MenuItem2 as MenuItem,
   MeshApp,
   NUMBER_OPERATORS,

package/dist/index.js

@@ -678,7 +678,7 @@ function refreshVariableNodeMetadata(editor) {
 
 // src/components/Variables/util/setVariablesEditorValue.ts
 function setVariablesEditorValue(editor, newValue, tag) {
-  if (typeof newValue === "undefined" || typeof newValue === "string") {
+  if (newValue === null || typeof newValue === "undefined" || typeof newValue === "string") {
     const parsedState = editor.parseEditorState(deserializeVariablesEditorState(newValue));
     editor.setEditorState(parsedState.clone(null), {
       tag
@@ -1293,6 +1293,11 @@ var DISCONNECT_VARIABLE_COMMAND = (0, import_lexical4.createCommand)(
   "uniform:disconnect-variable"
 );
 var INSERT_VARIABLE_COMMAND = (0, import_lexical4.createCommand)("uniform:insert-variable");
+function isEditorFocused(editor) {
+  var _a;
+  const rootElement = editor.getRootElement();
+  return (_a = rootElement == null ? void 0 : rootElement.contains(rootElement.ownerDocument.activeElement)) != null ? _a : false;
+}
 var DollarSignVariablesRegex = /(^.*)(\$\$(.{0,20}))$/;
 function getPossibleQueryMatch(text) {
   const match = DollarSignVariablesRegex.exec(text);
@@ -1587,7 +1592,7 @@ function VariablesPlugin({
     replaceValueOnVariableInsert,
     disableVariableDisplayNames
   ]);
-  const updateExistingNodeIfChanged = (0, import_react15.useCallback)(
+  const computeUpdatedVariableNodeState = (0, import_react15.useCallback)(
     (variableNode) => {
       var _a, _b, _c, _d;
       const targetVar = variablesRef.current.variables[variableNode.reference];
@@ -1595,7 +1600,7 @@ function VariablesPlugin({
       const isLoadingVariables = variablesRef.current.isLoading;
       const currentState = variableNode.getState();
       if (currentState.isFresh && !targetVar && !targetUndefinedVar) {
-        return;
+        return void 0;
       }
       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);
@@ -1608,26 +1613,50 @@ function VariablesPlugin({
         tooltip,
         isFresh: false
       };
-      if (!(0, import_lite.dequal)(currentState, newState)) {
+      return (0, import_lite.dequal)(currentState, newState) ? void 0 : newState;
+    },
+    [canEditVariable, disableVariableDisplayNames]
+  );
+  const updateExistingNodeIfChanged = (0, import_react15.useCallback)(
+    (variableNode) => {
+      const newState = computeUpdatedVariableNodeState(variableNode);
+      if (newState) {
         variableNode.setState(newState);
       }
     },
-    [canEditVariable, disableVariableDisplayNames]
+    [computeUpdatedVariableNodeState]
   );
   (0, import_react15.useEffect)(() => {
-    let selection;
+    const pendingUpdates = [];
     editor.read(() => {
-      selection = (0, import_lexical4.$getSelection)();
+      (0, import_utils.$dfs)().forEach(({ node }) => {
+        if ($isVariableNode(node)) {
+          const newState = computeUpdatedVariableNodeState(node);
+          if (newState) {
+            pendingUpdates.push({ key: node.getKey(), newState });
+          }
+        }
+      });
     });
+    if (pendingUpdates.length === 0) {
+      return;
+    }
+    const shouldSyncDomSelection = isEditorFocused(editor);
     editor.update(() => {
       var _a;
-      (0, import_lexical4.$addUpdateTag)("skip-dom-selection");
-      (0, import_lexical4.$setSelection)((_a = selection == null ? void 0 : selection.clone()) != null ? _a : null);
-      (0, import_utils.$dfs)().filter(({ node }) => $isVariableNode(node)).forEach(({ node: variableNode }) => {
-        updateExistingNodeIfChanged(variableNode);
+      const selection = (0, import_lexical4.$getSelection)();
+      pendingUpdates.forEach(({ key, newState }) => {
+        const node = (0, import_lexical4.$getNodeByKey)(key);
+        if ($isVariableNode(node)) {
+          node.setState(newState);
+        }
       });
+      (0, import_lexical4.$setSelection)((_a = selection == null ? void 0 : selection.clone()) != null ? _a : null);
+      if (!shouldSyncDomSelection) {
+        (0, import_lexical4.$addUpdateTag)(import_lexical4.SKIP_DOM_SELECTION_TAG);
+      }
     });
-  }, [editor, variables, knownUndefinedValues, canEditVariable, updateExistingNodeIfChanged]);
+  }, [editor, variables, knownUndefinedValues, computeUpdatedVariableNodeState]);
   (0, import_react15.useEffect)(() => {
     return editor.registerNodeTransform(VariableNode, (variableNode) => {
       updateExistingNodeIfChanged(variableNode);
@@ -6323,6 +6352,25 @@ var ResetConditionsBtn = import_react63.css`
     color: var(--gray-400);
   }
 `;
+var CriteriaGroupOperatorTrigger = import_react63.css`
+  && {
+    padding: 0;
+    border-radius: var(--rounded-sm);
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+
+    > div {
+      gap: 2px;
+    }
+
+    svg {
+      width: 10px;
+      height: 10px;
+      color: var(--gray-400);
+    }
+  }
+`;
 var IconBtn = import_react63.css`
   align-self: center;
   background: transparent;
@@ -6622,7 +6670,9 @@ var FilterControls = ({
   const [localSearchTerm, setLocalSearchTerm] = (0, import_react65.useState)(searchTerm);
   (0, import_react_use7.useDebounce)(
     () => {
-      setSearchTerm(localSearchTerm);
+      if (localSearchTerm !== searchTerm) {
+        setSearchTerm(localSearchTerm);
+      }
     },
     300,
     [localSearchTerm]
@@ -6721,7 +6771,8 @@ var FilterItem = ({
   onOperatorChange,
   onValueChange,
   initialCriteriaTitle = "Where",
-  criteriaGroupOperator = "and"
+  criteriaGroupOperator = "and",
+  onCriteriaGroupOperatorChange
 }) => {
   var _a, _b;
   const { filters, handleDeleteFilter, filterOptions } = useSearchAndFilter();
@@ -6759,8 +6810,45 @@ var FilterItem = ({
   } : {};
   const CustomLeftHandComponent = selectedFieldValue == null ? void 0 : selectedFieldValue.leftHandSideComponentWhenSelected;
   const isEmptyOperator = metaDataPossibleOptions === "empty";
+  const joinLabel = index === 0 ? initialCriteriaTitle : index === 1 && onCriteriaGroupOperatorChange ? /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+    import_design_system45.Menu,
+    {
+      menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        import_design_system45.DropdownStyleMenuTrigger,
+        {
+          bgColor: "transparent",
+          css: CriteriaGroupOperatorTrigger,
+          "data-testid": "criteria-group-operator",
+          "aria-label": "criteria group operator",
+          children: criteriaGroupOperator
+        }
+      ),
+      size: "small",
+      placement: "bottom-start",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+          import_design_system45.SelectableMenuItem,
+          {
+            selected: criteriaGroupOperator === "and",
+            onClick: () => onCriteriaGroupOperatorChange("and"),
+            "data-testid": "criteria-group-operator-and",
+            children: "and"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+          import_design_system45.SelectableMenuItem,
+          {
+            selected: criteriaGroupOperator === "or",
+            onClick: () => onCriteriaGroupOperatorChange("or"),
+            "data-testid": "criteria-group-operator-or",
+            children: "or"
+          }
+        )
+      ]
+    }
+  ) : criteriaGroupOperator;
   return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: index === 0 ? initialCriteriaTitle : criteriaGroupOperator }),
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: joinLabel }),
     /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { css: [ConditionalInputRow, isEmptyOperator ? ConditionalInputRowEmpty : null], children: [
       CustomLeftHandComponent ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
         CustomLeftHandComponent,
@@ -7025,7 +7113,8 @@ var FilterItems = ({
   filterTitle,
   resetButtonText,
   initialCriteriaTitle,
-  criteriaGroupOperator
+  criteriaGroupOperator,
+  onCriteriaGroupOperatorChange
 }) => {
   const { filterOptions, filters, setFilters, handleAddFilter } = useSearchAndFilter();
   const handleUpdateFilter = (index, prop, value) => {
@@ -7095,7 +7184,8 @@ var FilterItems = ({
             onFilterDynamicChange: (e) => handleUpdateFilter(i, "dynamicField", e),
             valueOptions: possibleValueOptions,
             initialCriteriaTitle,
-            criteriaGroupOperator
+            criteriaGroupOperator,
+            onCriteriaGroupOperatorChange
           },
           i
         );

package/dist/index.mjs

@@ -503,7 +503,7 @@ function refreshVariableNodeMetadata(editor) {
 
 // src/components/Variables/util/setVariablesEditorValue.ts
 function setVariablesEditorValue(editor, newValue, tag) {
-  if (typeof newValue === "undefined" || typeof newValue === "string") {
+  if (newValue === null || typeof newValue === "undefined" || typeof newValue === "string") {
     const parsedState = editor.parseEditorState(deserializeVariablesEditorState(newValue));
     editor.setEditorState(parsedState.clone(null), {
       tag
@@ -685,7 +685,8 @@ import {
   $isNodeSelection,
   $setSelection,
   COMMAND_PRIORITY_NORMAL,
-  createCommand
+  createCommand,
+  SKIP_DOM_SELECTION_TAG
 } from "lexical";
 import { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo6, useRef as useRef3, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
@@ -1147,6 +1148,11 @@ var DISCONNECT_VARIABLE_COMMAND = createCommand(
   "uniform:disconnect-variable"
 );
 var INSERT_VARIABLE_COMMAND = createCommand("uniform:insert-variable");
+function isEditorFocused(editor) {
+  var _a;
+  const rootElement = editor.getRootElement();
+  return (_a = rootElement == null ? void 0 : rootElement.contains(rootElement.ownerDocument.activeElement)) != null ? _a : false;
+}
 var DollarSignVariablesRegex = /(^.*)(\$\$(.{0,20}))$/;
 function getPossibleQueryMatch(text) {
   const match = DollarSignVariablesRegex.exec(text);
@@ -1441,7 +1447,7 @@ function VariablesPlugin({
     replaceValueOnVariableInsert,
     disableVariableDisplayNames
   ]);
-  const updateExistingNodeIfChanged = useCallback2(
+  const computeUpdatedVariableNodeState = useCallback2(
     (variableNode) => {
       var _a, _b, _c, _d;
       const targetVar = variablesRef.current.variables[variableNode.reference];
@@ -1449,7 +1455,7 @@ function VariablesPlugin({
       const isLoadingVariables = variablesRef.current.isLoading;
       const currentState = variableNode.getState();
       if (currentState.isFresh && !targetVar && !targetUndefinedVar) {
-        return;
+        return void 0;
       }
       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);
@@ -1462,26 +1468,50 @@ function VariablesPlugin({
         tooltip,
         isFresh: false
       };
-      if (!dequal(currentState, newState)) {
+      return dequal(currentState, newState) ? void 0 : newState;
+    },
+    [canEditVariable, disableVariableDisplayNames]
+  );
+  const updateExistingNodeIfChanged = useCallback2(
+    (variableNode) => {
+      const newState = computeUpdatedVariableNodeState(variableNode);
+      if (newState) {
         variableNode.setState(newState);
       }
     },
-    [canEditVariable, disableVariableDisplayNames]
+    [computeUpdatedVariableNodeState]
   );
   useEffect4(() => {
-    let selection;
+    const pendingUpdates = [];
     editor.read(() => {
-      selection = $getSelection();
+      $dfs().forEach(({ node }) => {
+        if ($isVariableNode(node)) {
+          const newState = computeUpdatedVariableNodeState(node);
+          if (newState) {
+            pendingUpdates.push({ key: node.getKey(), newState });
+          }
+        }
+      });
     });
+    if (pendingUpdates.length === 0) {
+      return;
+    }
+    const shouldSyncDomSelection = isEditorFocused(editor);
     editor.update(() => {
       var _a;
-      $addUpdateTag("skip-dom-selection");
-      $setSelection((_a = selection == null ? void 0 : selection.clone()) != null ? _a : null);
-      $dfs().filter(({ node }) => $isVariableNode(node)).forEach(({ node: variableNode }) => {
-        updateExistingNodeIfChanged(variableNode);
+      const selection = $getSelection();
+      pendingUpdates.forEach(({ key, newState }) => {
+        const node = $getNodeByKey(key);
+        if ($isVariableNode(node)) {
+          node.setState(newState);
+        }
       });
+      $setSelection((_a = selection == null ? void 0 : selection.clone()) != null ? _a : null);
+      if (!shouldSyncDomSelection) {
+        $addUpdateTag(SKIP_DOM_SELECTION_TAG);
+      }
     });
-  }, [editor, variables, knownUndefinedValues, canEditVariable, updateExistingNodeIfChanged]);
+  }, [editor, variables, knownUndefinedValues, computeUpdatedVariableNodeState]);
   useEffect4(() => {
     return editor.registerNodeTransform(VariableNode, (variableNode) => {
       updateExistingNodeIfChanged(variableNode);
@@ -6253,6 +6283,25 @@ var ResetConditionsBtn = css21`
     color: var(--gray-400);
   }
 `;
+var CriteriaGroupOperatorTrigger = css21`
+  && {
+    padding: 0;
+    border-radius: var(--rounded-sm);
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+
+    > div {
+      gap: 2px;
+    }
+
+    svg {
+      width: 10px;
+      height: 10px;
+      color: var(--gray-400);
+    }
+  }
+`;
 var IconBtn = css21`
   align-self: center;
   background: transparent;
@@ -6560,7 +6609,9 @@ var FilterControls = ({
   const [localSearchTerm, setLocalSearchTerm] = useState21(searchTerm);
   useDebounce7(
     () => {
-      setSearchTerm(localSearchTerm);
+      if (localSearchTerm !== searchTerm) {
+        setSearchTerm(localSearchTerm);
+      }
     },
     300,
     [localSearchTerm]
@@ -6639,7 +6690,13 @@ var FilterControls = ({
 
 // src/components/SearchAndFilter/FilterItem.tsx
 import { CgTrash as CgTrash2 } from "@react-icons/all-files/cg/CgTrash";
-import { Icon as Icon4, InputComboBox as InputComboBox5 } from "@uniformdev/design-system";
+import {
+  DropdownStyleMenuTrigger,
+  Icon as Icon4,
+  InputComboBox as InputComboBox5,
+  Menu as Menu3,
+  SelectableMenuItem
+} from "@uniformdev/design-system";
 import { useMemo as useMemo21 } from "react";
 
 // src/components/SearchAndFilter/util/isFilterBindable.ts
@@ -6659,7 +6716,8 @@ var FilterItem = ({
   onOperatorChange,
   onValueChange,
   initialCriteriaTitle = "Where",
-  criteriaGroupOperator = "and"
+  criteriaGroupOperator = "and",
+  onCriteriaGroupOperatorChange
 }) => {
   var _a, _b;
   const { filters, handleDeleteFilter, filterOptions } = useSearchAndFilter();
@@ -6697,8 +6755,45 @@ var FilterItem = ({
   } : {};
   const CustomLeftHandComponent = selectedFieldValue == null ? void 0 : selectedFieldValue.leftHandSideComponentWhenSelected;
   const isEmptyOperator = metaDataPossibleOptions === "empty";
+  const joinLabel = index === 0 ? initialCriteriaTitle : index === 1 && onCriteriaGroupOperatorChange ? /* @__PURE__ */ jsxs34(
+    Menu3,
+    {
+      menuTrigger: /* @__PURE__ */ jsx75(
+        DropdownStyleMenuTrigger,
+        {
+          bgColor: "transparent",
+          css: CriteriaGroupOperatorTrigger,
+          "data-testid": "criteria-group-operator",
+          "aria-label": "criteria group operator",
+          children: criteriaGroupOperator
+        }
+      ),
+      size: "small",
+      placement: "bottom-start",
+      children: [
+        /* @__PURE__ */ jsx75(
+          SelectableMenuItem,
+          {
+            selected: criteriaGroupOperator === "and",
+            onClick: () => onCriteriaGroupOperatorChange("and"),
+            "data-testid": "criteria-group-operator-and",
+            children: "and"
+          }
+        ),
+        /* @__PURE__ */ jsx75(
+          SelectableMenuItem,
+          {
+            selected: criteriaGroupOperator === "or",
+            onClick: () => onCriteriaGroupOperatorChange("or"),
+            "data-testid": "criteria-group-operator-or",
+            children: "or"
+          }
+        )
+      ]
+    }
+  ) : criteriaGroupOperator;
   return /* @__PURE__ */ jsxs34("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
-    /* @__PURE__ */ jsx75("span", { children: index === 0 ? initialCriteriaTitle : criteriaGroupOperator }),
+    /* @__PURE__ */ jsx75("span", { children: joinLabel }),
     /* @__PURE__ */ jsxs34("div", { css: [ConditionalInputRow, isEmptyOperator ? ConditionalInputRowEmpty : null], children: [
       CustomLeftHandComponent ? /* @__PURE__ */ jsx75(
         CustomLeftHandComponent,
@@ -6963,7 +7058,8 @@ var FilterItems = ({
   filterTitle,
   resetButtonText,
   initialCriteriaTitle,
-  criteriaGroupOperator
+  criteriaGroupOperator,
+  onCriteriaGroupOperatorChange
 }) => {
   const { filterOptions, filters, setFilters, handleAddFilter } = useSearchAndFilter();
   const handleUpdateFilter = (index, prop, value) => {
@@ -7033,7 +7129,8 @@ var FilterItems = ({
             onFilterDynamicChange: (e) => handleUpdateFilter(i, "dynamicField", e),
             valueOptions: possibleValueOptions,
             initialCriteriaTitle,
-            criteriaGroupOperator
+            criteriaGroupOperator,
+            onCriteriaGroupOperatorChange
           },
           i
         );
@@ -7625,7 +7722,7 @@ import {
   Label,
   LoadingIndicator as LoadingIndicator4,
   LoadingOverlay,
-  Menu as Menu3,
+  Menu as Menu4,
   MenuItem as MenuItem2,
   ParameterGroup,
   ParameterImage,
@@ -7692,7 +7789,7 @@ export {
   LoadingIndicator4 as LoadingIndicator,
   LoadingOverlay,
   MULTI_SELECT_OPERATORS,
-  Menu3 as Menu,
+  Menu4 as Menu,
   MenuItem2 as MenuItem,
   MeshApp,
   NUMBER_OPERATORS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "20.71.2-alpha.7+2ec20a4ae2",
+  "version": "20.72.2-alpha.3+a1f072e7b4",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -50,10 +50,10 @@
     "@lexical/selection": "0.45.0",
     "@lexical/utils": "0.45.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.71.2-alpha.7+2ec20a4ae2",
-    "@uniformdev/design-system": "20.71.2-alpha.7+2ec20a4ae2",
-    "@uniformdev/mesh-sdk": "20.71.2-alpha.7+2ec20a4ae2",
-    "@uniformdev/richtext": "20.71.2-alpha.7+2ec20a4ae2",
+    "@uniformdev/canvas": "20.72.2-alpha.3+a1f072e7b4",
+    "@uniformdev/design-system": "20.72.2-alpha.3+a1f072e7b4",
+    "@uniformdev/mesh-sdk": "20.72.2-alpha.3+a1f072e7b4",
+    "@uniformdev/richtext": "20.72.2-alpha.3+a1f072e7b4",
     "dequal": "^2.0.3",
     "lexical": "0.45.0",
     "mitt": "3.0.1",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2ec20a4ae2d167b6e4e6ad47463b90fb16b73c47"
+  "gitHead": "a1f072e7b42ac4b3c694ebdd2e75216efd74a9c2"
 }