@uniformdev/mesh-sdk-react 20.71.2-alpha.14 → 20.71.2-alpha.19

package/dist/index.d.mts

@@ -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

@@ -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

@@ -6283,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;
@@ -6671,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
@@ -6691,7 +6716,8 @@ var FilterItem = ({
   onOperatorChange,
   onValueChange,
   initialCriteriaTitle = "Where",
-  criteriaGroupOperator = "and"
+  criteriaGroupOperator = "and",
+  onCriteriaGroupOperatorChange
 }) => {
   var _a, _b;
   const { filters, handleDeleteFilter, filterOptions } = useSearchAndFilter();
@@ -6729,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,
@@ -6995,7 +7058,8 @@ var FilterItems = ({
   filterTitle,
   resetButtonText,
   initialCriteriaTitle,
-  criteriaGroupOperator
+  criteriaGroupOperator,
+  onCriteriaGroupOperatorChange
 }) => {
   const { filterOptions, filters, setFilters, handleAddFilter } = useSearchAndFilter();
   const handleUpdateFilter = (index, prop, value) => {
@@ -7065,7 +7129,8 @@ var FilterItems = ({
             onFilterDynamicChange: (e) => handleUpdateFilter(i, "dynamicField", e),
             valueOptions: possibleValueOptions,
             initialCriteriaTitle,
-            criteriaGroupOperator
+            criteriaGroupOperator,
+            onCriteriaGroupOperatorChange
           },
           i
         );
@@ -7657,7 +7722,7 @@ import {
   Label,
   LoadingIndicator as LoadingIndicator4,
   LoadingOverlay,
-  Menu as Menu3,
+  Menu as Menu4,
   MenuItem as MenuItem2,
   ParameterGroup,
   ParameterImage,
@@ -7724,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

@@ -6352,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;
@@ -6752,7 +6771,8 @@ var FilterItem = ({
   onOperatorChange,
   onValueChange,
   initialCriteriaTitle = "Where",
-  criteriaGroupOperator = "and"
+  criteriaGroupOperator = "and",
+  onCriteriaGroupOperatorChange
 }) => {
   var _a, _b;
   const { filters, handleDeleteFilter, filterOptions } = useSearchAndFilter();
@@ -6790,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,
@@ -7056,7 +7113,8 @@ var FilterItems = ({
   filterTitle,
   resetButtonText,
   initialCriteriaTitle,
-  criteriaGroupOperator
+  criteriaGroupOperator,
+  onCriteriaGroupOperatorChange
 }) => {
   const { filterOptions, filters, setFilters, handleAddFilter } = useSearchAndFilter();
   const handleUpdateFilter = (index, prop, value) => {
@@ -7126,7 +7184,8 @@ var FilterItems = ({
             onFilterDynamicChange: (e) => handleUpdateFilter(i, "dynamicField", e),
             valueOptions: possibleValueOptions,
             initialCriteriaTitle,
-            criteriaGroupOperator
+            criteriaGroupOperator,
+            onCriteriaGroupOperatorChange
           },
           i
         );

package/dist/index.mjs

@@ -6283,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;
@@ -6671,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
@@ -6691,7 +6716,8 @@ var FilterItem = ({
   onOperatorChange,
   onValueChange,
   initialCriteriaTitle = "Where",
-  criteriaGroupOperator = "and"
+  criteriaGroupOperator = "and",
+  onCriteriaGroupOperatorChange
 }) => {
   var _a, _b;
   const { filters, handleDeleteFilter, filterOptions } = useSearchAndFilter();
@@ -6729,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,
@@ -6995,7 +7058,8 @@ var FilterItems = ({
   filterTitle,
   resetButtonText,
   initialCriteriaTitle,
-  criteriaGroupOperator
+  criteriaGroupOperator,
+  onCriteriaGroupOperatorChange
 }) => {
   const { filterOptions, filters, setFilters, handleAddFilter } = useSearchAndFilter();
   const handleUpdateFilter = (index, prop, value) => {
@@ -7065,7 +7129,8 @@ var FilterItems = ({
             onFilterDynamicChange: (e) => handleUpdateFilter(i, "dynamicField", e),
             valueOptions: possibleValueOptions,
             initialCriteriaTitle,
-            criteriaGroupOperator
+            criteriaGroupOperator,
+            onCriteriaGroupOperatorChange
           },
           i
         );
@@ -7657,7 +7722,7 @@ import {
   Label,
   LoadingIndicator as LoadingIndicator4,
   LoadingOverlay,
-  Menu as Menu3,
+  Menu as Menu4,
   MenuItem as MenuItem2,
   ParameterGroup,
   ParameterImage,
@@ -7724,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.14+e527b409ae",
+  "version": "20.71.2-alpha.19+29ab6d7f60",
   "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.14+e527b409ae",
-    "@uniformdev/design-system": "20.71.2-alpha.14+e527b409ae",
-    "@uniformdev/mesh-sdk": "20.71.2-alpha.14+e527b409ae",
-    "@uniformdev/richtext": "20.71.2-alpha.14+e527b409ae",
+    "@uniformdev/canvas": "20.71.2-alpha.19+29ab6d7f60",
+    "@uniformdev/design-system": "20.71.2-alpha.19+29ab6d7f60",
+    "@uniformdev/mesh-sdk": "20.71.2-alpha.19+29ab6d7f60",
+    "@uniformdev/richtext": "20.71.2-alpha.19+29ab6d7f60",
     "dequal": "^2.0.3",
     "lexical": "0.45.0",
     "mitt": "3.0.1",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e527b409ae4d2b190d4f9195e6787f5c8b89fc85"
+  "gitHead": "29ab6d7f60af8eee4244b495f391611999326075"
 }