@uniformdev/context-ui 20.7.1-alpha.81 → 20.7.1-alpha.84

package/dist/index.mjs

@@ -310,13 +310,17 @@ var quirkCriteriaMenuOperators = [
     value: "!="
   }
 ];
+function getValidCriteriaOperatorsFor(rhsType) {
+  return rhsType === "QUIRK" ? quirkCriteriaMenuOperators : rhsType === "ENR" ? enrichmentCriteriaMenuOperators : contextCriteriaMenuOperators;
+}
 function CriteriaOperatorMenu({ onChange, value, rhsType, ...props }) {
   var _a, _b;
-  const operators = rhsType === "QUIRK" ? quirkCriteriaMenuOperators : rhsType === "ENR" ? enrichmentCriteriaMenuOperators : contextCriteriaMenuOperators;
+  const operators = getValidCriteriaOperatorsFor(rhsType);
   return /* @__PURE__ */ jsx6(
     InputComboBox,
     {
       ...props,
+      isDisabled: props.disabled,
       value: {
         label: (_b = (_a = operators.find((e) => e.value === value)) == null ? void 0 : _a.name) != null ? _b : value,
         value
@@ -553,7 +557,7 @@ function useDimensionsDataContext() {
 
 // src/components/DimensionMenu/CriteriaMatchMenu.tsx
 import { InputComboBox as InputComboBox3 } from "@uniformdev/design-system";
-import { useState as useState5 } from "react";
+import { useEffect as useEffect4, useRef, useState as useState5 } from "react";
 
 // src/components/DimensionMenu/DimensionGroupHeading.tsx
 import { Icon } from "@uniformdev/design-system";
@@ -692,32 +696,38 @@ var DimensionOption = (props) => {
 };
 
 // src/components/DimensionMenu/DimensionValue.tsx
-import { Icon as Icon2 } from "@uniformdev/design-system";
+import { css as css4 } from "@emotion/react";
+import { Icon as Icon2, Tooltip } from "@uniformdev/design-system";
 import { jsx as jsx11, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
+var styles = {
+  dimensionValueWrapper: css4`
+    white-space: normal;
+    overflow: hidden;
+  `,
+  dimensionName: css4`
+    color: var(--gray-500);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+  `,
+  dimensionValue: css4`
+    color: var(--gray-700);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  `
+};
 function DimensionValue({ displayName }) {
+  var _a;
   const { type, name } = dimensionDisplayName(displayName);
-  return /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      css: {
-        whiteSpace: "normal",
-        overflow: "hidden"
-      },
-      children: [
-        type ? /* @__PURE__ */ jsxs4(
-          "small",
-          {
-            css: { color: "var(--gray-500)", display: "flex", alignItems: "center", gap: "var(--spacing-xs)" },
-            children: [
-              type ? /* @__PURE__ */ jsx11(Icon2, { icon: dimensionIcon(type), iconColor: "currentColor", size: 16 }) : null,
-              /* @__PURE__ */ jsx11("span", { "data-testid": "dimension-name", children: type })
-            ]
-          }
-        ) : null,
-        /* @__PURE__ */ jsx11("div", { css: { color: "var(--gray-700)" }, "data-testid": "dimension-value", children: name != null ? name : type })
-      ]
-    }
-  );
+  const tooltip = (_a = name != null ? name : type) != null ? _a : "";
+  return /* @__PURE__ */ jsxs4("div", { css: styles.dimensionValueWrapper, children: [
+    type ? /* @__PURE__ */ jsxs4("small", { css: styles.dimensionName, children: [
+      type ? /* @__PURE__ */ jsx11(Icon2, { icon: dimensionIcon(type), iconColor: "currentColor", size: 16 }) : null,
+      /* @__PURE__ */ jsx11("span", { "data-testid": "dimension-name", children: type })
+    ] }) : null,
+    /* @__PURE__ */ jsx11(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx11("div", { css: styles.dimensionValue, "data-testid": "dimension-value", children: name != null ? name : type }) })
+  ] });
 }
 
 // src/components/DimensionMenu/DimensionSingleValue.tsx
@@ -740,6 +750,15 @@ function CriteriaMatchMenu({
   const [inputValue, setInputValue] = useState5(
     typeof criteriaMatch.r !== "undefined" && isInt(criteriaMatch.r) !== null ? criteriaMatch.r.toString(10) : ""
   );
+  const currentInputValue = useRef(inputValue);
+  currentInputValue.current = inputValue;
+  useEffect4(() => {
+    if (currentInputValue.current !== criteriaMatch.r && !criteriaMatch.rDim) {
+      setInputValue(
+        typeof criteriaMatch.r !== "undefined" && isInt(criteriaMatch.r) !== null ? criteriaMatch.r.toString(10) : ""
+      );
+    }
+  }, [criteriaMatch.r, criteriaMatch.rDim]);
   const rDim = criteriaMatch.rDim;
   const targetDim = criteriaMatch.rDim ? dimensions.dimIndex[criteriaMatch.rDim] : void 0;
   const groupedDimensions = useGroupedDimensions(dimensions.dimensions, void 0);
@@ -748,6 +767,7 @@ function CriteriaMatchMenu({
       InputComboBox3,
       {
         ...props,
+        isDisabled: props.disabled,
         inputValue,
         menuShouldScrollIntoView: true,
         value: {
@@ -855,6 +875,7 @@ function DimensionMenu({
       InputComboBox4,
       {
         ...props,
+        isDisabled: props.disabled,
         value: valueAsMenuOption,
         options: groupedDimensions,
         getOptionValue: (option) => option.label,
@@ -893,8 +914,8 @@ import { CgChevronRight } from "@react-icons/all-files/cg/CgChevronRight";
 import { Icon as Icon3 } from "@uniformdev/design-system";
 
 // src/components/EditLink/EditLink.styles.ts
-import { css as css4 } from "@emotion/react";
-var editLink = css4`
+import { css as css5 } from "@emotion/react";
+var editLink = css5`
   display: flex;
   align-items: center;
   font-weight: var(--fw-bold);
@@ -927,7 +948,7 @@ var EditLink = ({ linkTo, name, linkText = `Edit ${name} Component` }) => {
 };
 
 // src/components/EnrichmentTag/EnrichmentTag.tsx
-import { css as css5 } from "@emotion/react";
+import { css as css6 } from "@emotion/react";
 import { CgCloseO } from "@react-icons/all-files/cg/CgCloseO";
 import { CgMathMinus } from "@react-icons/all-files/cg/CgMathMinus";
 import { CgMathPlus } from "@react-icons/all-files/cg/CgMathPlus";
@@ -944,7 +965,7 @@ import {
 import { produce } from "immer";
 import { useMemo as useMemo2, useState as useState6 } from "react";
 import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
-var addEnrichmentLink = css5`
+var addEnrichmentLink = css6`
   flex: 2;
   display: flex;
   width: 50%;
@@ -1133,7 +1154,7 @@ var NoEnrichmentsView = ({ contextConfig }) => /* @__PURE__ */ jsx16(Callout2, {
 var getCappedValue = (value, maxCap = 100, minCap = 0) => {
   return Math.max(Math.min(value, maxCap), minCap);
 };
-var scoreCounterMinusButtonStyles = css5`
+var scoreCounterMinusButtonStyles = css6`
   position: absolute;
   bottom: 0.875rem;
   left: var(--spacing-sm);
@@ -1146,7 +1167,7 @@ var scoreCounterMinusButtonStyles = css5`
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-full);
 `;
-var scoreCounterPlusButtonStyles = css5`
+var scoreCounterPlusButtonStyles = css6`
   ${scoreCounterMinusButtonStyles}
   left: auto;
   right: var(--spacing-sm);
@@ -1310,7 +1331,7 @@ function opHasRhs(op) {
 }
 
 // src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.tsx
-import { css as css7 } from "@emotion/react";
+import { css as css8 } from "@emotion/react";
 import { CgCloseO as CgCloseO2 } from "@react-icons/all-files/cg/CgCloseO";
 import {
   AddListButton as AddListButton3,
@@ -1320,19 +1341,20 @@ import {
   Input as Input2,
   InputInlineSelect,
   InputSelect as InputSelect2,
-  Paragraph
+  Paragraph,
+  VerticalRhythm
 } from "@uniformdev/design-system";
 import { produce as produce2 } from "immer";
 
 // src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.styles.ts
-import { css as css6 } from "@emotion/react";
+import { css as css7 } from "@emotion/react";
 var spaceBetweenCriteriaItems = "6rem";
-var criteriaItem = css6`
+var criteriaItem = css7`
   position: relative;
   padding: var(--spacing-md) var(--spacing-base);
   border: 1px solid var(--gray-300);
-  box-shadow: var(--shadow-base);
-  background-color: white;
+  box-shadow: var(--elevation-200);
+  background-color: var(--white);
   border-radius: var(--rounded-base);
   margin-top: ${spaceBetweenCriteriaItems};
   display: flex;
@@ -1349,13 +1371,13 @@ var criteriaItem = css6`
   }
 
   &:first-of-type {
-    margin-top: var(--spacing-md);
+    margin-top: 0;
     &:before {
       display: none;
     }
   }
 `;
-var criteriaItemInner = css6`
+var criteriaItemInner = css7`
   display: flex;
   row-gap: var(--spacing-base);
   column-gap: var(--spacing-xs);
@@ -1363,23 +1385,23 @@ var criteriaItemInner = css6`
   flex-wrap: wrap;
   margin-right: var(--spacing-base);
 `;
-var criteriaWrapper = css6`
+var criteriaWrapper = css7`
   width: 100%;
   display: flex;
   align-items: stretch;
   position: relative;
 `;
-var criteriaOperandWrapper = css6`
+var criteriaOperandWrapper = css7`
   flex: 2;
   height: 52px;
   min-width: 200px;
 `;
-var criteriaOperatorWrapper = css6`
+var criteriaOperatorWrapper = css7`
   flex: 1;
   flex-wrap: nowrap;
   min-width: 80px;
 `;
-var expand = css6`
+var expand = css7`
   height: 100%;
   width: 100%;
 `;
@@ -1397,7 +1419,8 @@ var PersonalizationCriteriaStatic = ({
   onRemoveCriteria,
   displayTitle = true,
   components,
-  errors = {}
+  errors = {},
+  readOnly
 }) => {
   var _a;
   const currentValue = { crit: [], ...value };
@@ -1443,192 +1466,204 @@ var PersonalizationCriteriaStatic = ({
         children: /* @__PURE__ */ jsx17(Heading2, { level: 5, withMarginBottom: false, children: "Personalization Variation" })
       }
     ) : null,
-    (components == null ? void 0 : components.CustomVariantName) ? /* @__PURE__ */ jsx17(components.CustomVariantName, {}) : null,
-    (components == null ? void 0 : components.ControlPercentage) ? /* @__PURE__ */ jsx17(components.ControlPercentage, {}) : null,
-    !currentValue.crit.length ? /* @__PURE__ */ jsx17(Callout3, { title: "Default variant", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ jsx17(Paragraph, { children: 'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.' }) }) : /* @__PURE__ */ jsx17("div", { children: currentValue.crit.map((currentCriteria, index) => {
-      var _a2, _b, _c, _d, _e, _f, _g, _h;
-      const critHasLhs = ((_a2 = currentCriteria.l) == null ? void 0 : _a2.length) > 0;
-      const critHasRhs = opHasRhs(currentCriteria.op);
-      const selectedValueIsQuirk = "t" in currentCriteria && currentCriteria.t === "q";
-      const currentDimension = selectedValueIsQuirk ? void 0 : dimensions.dimIndex[currentCriteria.l];
-      const currentQuirk = selectedValueIsQuirk ? quirks == null ? void 0 : quirks.find((q) => q.id === currentCriteria.l) : void 0;
-      return /* @__PURE__ */ jsxs9("div", { css: criteriaItem, "data-testid": "criteria-container", children: [
-        /* @__PURE__ */ jsxs9("div", { css: criteriaItemInner, className: "criteriaItemInner", children: [
+    /* @__PURE__ */ jsxs9(VerticalRhythm, { children: [
+      (components == null ? void 0 : components.CustomVariantName) ? /* @__PURE__ */ jsx17(components.CustomVariantName, {}) : null,
+      (components == null ? void 0 : components.ControlPercentage) ? /* @__PURE__ */ jsx17(components.ControlPercentage, {}) : null,
+      !currentValue.crit.length ? /* @__PURE__ */ jsx17(Callout3, { title: "Default variant", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ jsx17(Paragraph, { children: 'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.' }) }) : /* @__PURE__ */ jsx17("div", { children: currentValue.crit.map((currentCriteria, index) => {
+        var _a2, _b, _c, _d, _e, _f, _g, _h;
+        const critHasLhs = ((_a2 = currentCriteria.l) == null ? void 0 : _a2.length) > 0;
+        const critHasRhs = opHasRhs(currentCriteria.op);
+        const selectedValueIsQuirk = "t" in currentCriteria && currentCriteria.t === "q";
+        const currentDimension = selectedValueIsQuirk ? void 0 : dimensions.dimIndex[currentCriteria.l];
+        const currentQuirk = selectedValueIsQuirk ? quirks == null ? void 0 : quirks.find((q) => q.id === currentCriteria.l) : void 0;
+        return /* @__PURE__ */ jsxs9("div", { css: criteriaItem, "data-testid": "criteria-container", children: [
+          /* @__PURE__ */ jsxs9("div", { css: criteriaItemInner, className: "criteriaItemInner", children: [
+            /* @__PURE__ */ jsx17(
+              "div",
+              {
+                css: [criteriaWrapper, criteriaOperandWrapper],
+                className: "criteria-wrapper",
+                "data-testid": "select-criteria",
+                children: /* @__PURE__ */ jsx17(
+                  DimensionMenu,
+                  {
+                    errorMessage: (_b = errors.lhs) == null ? void 0 : _b[index],
+                    css: expand,
+                    styles: { control: (base) => ({ ...base, height: "100%" }) },
+                    dimensions: dimensions.dimensions,
+                    quirks,
+                    onChange: (selection) => {
+                      if (!selection) {
+                        return;
+                      }
+                      if ("dim" in selection) {
+                        const validOperators = getValidCriteriaOperatorsFor(selection.category);
+                        const existingOpRemainsValid = !("t" in currentCriteria && currentCriteria.t === "q") && validOperators.some((op) => op.value === currentCriteria.op);
+                        const newCriteria = {
+                          ...currentCriteria,
+                          l: selection.dim,
+                          t: void 0,
+                          op: existingOpRemainsValid ? currentCriteria.op : ">",
+                          r: existingOpRemainsValid ? currentCriteria.r : 0,
+                          rDim: existingOpRemainsValid ? currentCriteria.rDim : void 0
+                        };
+                        update(newCriteria, index);
+                      } else {
+                        update({ ...currentCriteria, l: selection.id, t: "q", op: "=", r: "" }, index);
+                      }
+                    },
+                    value: currentDimension != null ? currentDimension : currentQuirk,
+                    onMenuOpen,
+                    onMenuClose,
+                    disabled: readOnly
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx17(
+              "div",
+              {
+                css: [criteriaWrapper, criteriaOperatorWrapper],
+                className: "criteria-wrapper",
+                "data-testid": "select-operator",
+                children: /* @__PURE__ */ jsx17(
+                  CriteriaOperatorMenu,
+                  {
+                    name: `op-${index}`,
+                    css: expand,
+                    styles: { control: (base) => ({ ...base, height: "100%" }) },
+                    value: currentCriteria.op,
+                    rhsType: currentQuirk ? "QUIRK" : currentDimension == null ? void 0 : currentDimension.category,
+                    onChange: (op) => {
+                      if (op === "+" || op === "-") {
+                        update({ ...currentCriteria, op, r: void 0, rDim: void 0 }, index);
+                      } else {
+                        update({ ...currentCriteria, op }, index);
+                      }
+                    },
+                    onMenuOpen,
+                    onMenuClose,
+                    disabled: readOnly
+                  }
+                )
+              }
+            ),
+            critHasRhs ? /* @__PURE__ */ jsx17(
+              "div",
+              {
+                css: [criteriaWrapper, criteriaOperandWrapper],
+                className: "criteria-wrapper",
+                "data-testid": "select-match-criteria",
+                children: currentQuirk ? /* @__PURE__ */ jsx17(
+                  "div",
+                  {
+                    css: css8`
+                              width: 100%;
+                              // InputSelect wrapper is unstylable so need a descendant selector
+                              // to full-width it
+                              & > * {
+                                width: 100%;
+                              }
+                            `,
+                    children: currentQuirk.options ? /* @__PURE__ */ jsx17(
+                      InputSelect2,
+                      {
+                        label: "quirk match value",
+                        showLabel: false,
+                        value: (_c = currentCriteria.r) != null ? _c : "",
+                        errorMessage: (_d = errors.rhs) == null ? void 0 : _d[index],
+                        onChange: (e) => update({ ...currentCriteria, r: e.currentTarget.value }, index),
+                        options: [
+                          { label: "Select\u2026", value: "" },
+                          ...currentQuirk.options.map((o) => ({ label: o.name, value: o.value }))
+                        ],
+                        disabled: readOnly
+                      }
+                    ) : /* @__PURE__ */ jsx17(
+                      Input2,
+                      {
+                        type: "text",
+                        label: "quirk match value",
+                        showLabel: false,
+                        value: (_e = currentCriteria.r) != null ? _e : "",
+                        errorMessage: (_f = errors.rhs) == null ? void 0 : _f[index],
+                        onChange: (e) => update({ ...currentCriteria, r: e.currentTarget.value }, index),
+                        placeholder: "Enter a value",
+                        disabled: readOnly
+                      }
+                    )
+                  }
+                ) : /* @__PURE__ */ jsx17(
+                  CriteriaMatchMenu,
+                  {
+                    errorMessage: (_g = errors.rhs) == null ? void 0 : _g[index],
+                    css: expand,
+                    styles: { control: (base) => ({ ...base, height: "100%" }) },
+                    criteriaMatch: currentCriteria,
+                    onChange: (match) => {
+                      update(match, index);
+                    },
+                    isDisabled: !critHasLhs,
+                    dimensions,
+                    onMenuOpen,
+                    onMenuClose,
+                    disabled: readOnly
+                  }
+                )
+              }
+            ) : null
+          ] }),
           /* @__PURE__ */ jsx17(
-            "div",
+            "button",
             {
-              css: [criteriaWrapper, criteriaOperandWrapper],
-              className: "criteria-wrapper",
-              "data-testid": "select-criteria",
-              children: /* @__PURE__ */ jsx17(
-                DimensionMenu,
-                {
-                  errorMessage: (_b = errors.lhs) == null ? void 0 : _b[index],
-                  css: expand,
-                  styles: { control: (base) => ({ ...base, height: "100%" }) },
-                  dimensions: dimensions.dimensions,
-                  quirks,
-                  onChange: (selection) => {
-                    if (!selection) {
-                      return;
-                    }
-                    if ("dim" in selection) {
-                      const newCriteria = {
-                        ...currentCriteria,
-                        l: selection.dim,
-                        t: void 0,
-                        op: ">",
-                        r: 0
-                      };
-                      update(newCriteria, index);
-                    } else {
-                      update({ ...currentCriteria, l: selection.id, t: "q", op: "=", r: "" }, index);
-                    }
-                  },
-                  value: currentDimension != null ? currentDimension : currentQuirk,
-                  onMenuOpen,
-                  onMenuClose
-                }
-              )
+              type: "button",
+              onClick: () => removeFromList(index),
+              title: `Delete Personalization`,
+              css: { backgroundColor: "transparent", backgroundImage: "none", borderWidth: 0 },
+              "data-testid": "button-delete",
+              disabled: readOnly,
+              children: /* @__PURE__ */ jsx17(Icon5, { icon: CgCloseO2, iconColor: "red", size: "1.5rem" })
             }
           ),
-          /* @__PURE__ */ jsx17(
+          index > 0 ? /* @__PURE__ */ jsx17(
             "div",
             {
-              css: [criteriaWrapper, criteriaOperatorWrapper],
-              className: "criteria-wrapper",
-              "data-testid": "select-operator",
+              className: "criteria-group-operation",
+              css: {
+                position: "absolute",
+                top: "-4rem",
+                transform: "translateX(calc(1.5rem - 50%))"
+              },
               children: /* @__PURE__ */ jsx17(
-                CriteriaOperatorMenu,
+                InputInlineSelect,
                 {
-                  name: `op-${index}`,
-                  css: expand,
-                  styles: { control: (base) => ({ ...base, height: "100%" }) },
-                  value: currentCriteria.op,
-                  rhsType: currentQuirk ? "QUIRK" : currentDimension == null ? void 0 : currentDimension.category,
-                  onChange: (op) => {
-                    if (op === "+" || op === "-") {
-                      update({ ...currentCriteria, op, r: void 0, rDim: void 0 }, index);
-                    } else {
-                      update({ ...currentCriteria, op }, index);
-                    }
-                  },
-                  onMenuOpen,
-                  onMenuClose
-                }
-              )
-            }
-          ),
-          critHasRhs ? /* @__PURE__ */ jsx17(
-            "div",
-            {
-              css: [criteriaWrapper, criteriaOperandWrapper],
-              className: "criteria-wrapper",
-              "data-testid": "select-match-criteria",
-              children: currentQuirk ? /* @__PURE__ */ jsx17(
-                "div",
-                {
-                  css: css7`
-                            width: 100%;
-                            // InputSelect wrapper is unstylable so need a descendant selector
-                            // to full-width it
-                            & > * {
-                              width: 100%;
-                            }
-                          `,
-                  children: currentQuirk.options ? /* @__PURE__ */ jsx17(
-                    InputSelect2,
-                    {
-                      label: "quirk match value",
-                      showLabel: false,
-                      value: (_c = currentCriteria.r) != null ? _c : "",
-                      errorMessage: (_d = errors.rhs) == null ? void 0 : _d[index],
-                      onChange: (e) => update({ ...currentCriteria, r: e.currentTarget.value }, index),
-                      options: [
-                        { label: "Select\u2026", value: "" },
-                        ...currentQuirk.options.map((o) => ({ label: o.name, value: o.value }))
-                      ]
-                    }
-                  ) : /* @__PURE__ */ jsx17(
-                    Input2,
-                    {
-                      type: "text",
-                      label: "quirk match value",
-                      showLabel: false,
-                      value: (_e = currentCriteria.r) != null ? _e : "",
-                      errorMessage: (_f = errors.rhs) == null ? void 0 : _f[index],
-                      onChange: (e) => update({ ...currentCriteria, r: e.currentTarget.value }, index),
-                      placeholder: "Enter a value"
-                    }
-                  )
-                }
-              ) : /* @__PURE__ */ jsx17(
-                CriteriaMatchMenu,
-                {
-                  errorMessage: (_g = errors.rhs) == null ? void 0 : _g[index],
-                  css: expand,
-                  styles: { control: (base) => ({ ...base, height: "100%" }) },
-                  criteriaMatch: currentCriteria,
-                  onChange: (match) => {
-                    update(match, index);
-                  },
-                  isDisabled: !critHasLhs,
-                  dimensions,
-                  onMenuOpen,
-                  onMenuClose
+                  "data-testid": "dropdown-button-combine",
+                  disabled: index > 1 || readOnly,
+                  value: (_h = currentValue.op) != null ? _h : "&",
+                  options: [
+                    { label: "AND", value: "&" },
+                    { label: "OR", value: "|" }
+                  ],
+                  onChange: (v) => {
+                    setOp(v.value);
+                  }
                 }
               )
             }
           ) : null
-        ] }),
-        /* @__PURE__ */ jsx17(
-          "button",
-          {
-            type: "button",
-            onClick: () => removeFromList(index),
-            title: `Delete Personalization`,
-            css: { backgroundColor: "transparent", backgroundImage: "none", borderWidth: 0 },
-            "data-testid": "button-delete",
-            children: /* @__PURE__ */ jsx17(Icon5, { icon: CgCloseO2, iconColor: "red", size: "1.5rem" })
-          }
-        ),
-        index > 0 ? /* @__PURE__ */ jsx17(
-          "div",
-          {
-            className: "criteria-group-operation",
-            css: {
-              position: "absolute",
-              top: "-4rem",
-              transform: "translateX(calc(1.5rem - 50%))"
-            },
-            children: /* @__PURE__ */ jsx17(
-              InputInlineSelect,
-              {
-                "data-testid": "dropdown-button-combine",
-                disabled: index > 1,
-                value: (_h = currentValue.op) != null ? _h : "&",
-                options: [
-                  { label: "AND", value: "&" },
-                  { label: "OR", value: "|" }
-                ],
-                onChange: (v) => {
-                  setOp(v.value);
-                }
-              }
-            )
-          }
-        ) : null
-      ] }, index);
-    }) }),
-    dimensions.dimensions.length === 0 && !(quirks == null ? void 0 : quirks.length) ? (components == null ? void 0 : components.NoDimensionsDefined) ? /* @__PURE__ */ jsx17(components.NoDimensionsDefined, {}) : /* @__PURE__ */ jsx17(Callout3, { title: "Dimensions", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ jsx17("p", { children: "You do not have any dimensions configured." }) }) : /* @__PURE__ */ jsx17(
-      AddListButton3,
-      {
-        "data-testid": "button-add-criteria",
-        className: "add-more",
-        buttonText: "Add Criteria",
-        onButtonClick: addToList
-      }
-    )
+        ] }, index);
+      }) }),
+      dimensions.dimensions.length === 0 && !(quirks == null ? void 0 : quirks.length) ? (components == null ? void 0 : components.NoDimensionsDefined) ? /* @__PURE__ */ jsx17(components.NoDimensionsDefined, {}) : /* @__PURE__ */ jsx17(Callout3, { title: "Dimensions", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ jsx17("p", { children: "You do not have any dimensions configured." }) }) : /* @__PURE__ */ jsx17(
+        AddListButton3,
+        {
+          "data-testid": "button-add-criteria",
+          className: "add-more",
+          buttonText: "Add Criteria",
+          onButtonClick: addToList,
+          disabled: readOnly
+        }
+      )
+    ] })
   ] });
 };
 
@@ -1757,7 +1792,7 @@ function ProjectUIVersion({ children, versionMap, contextConfig }) {
 }
 
 // src/hooks/useValidateContextConfig.ts
-import { useEffect as useEffect4, useState as useState8 } from "react";
+import { useEffect as useEffect5, useState as useState8 } from "react";
 
 // src/utils/validateContextConfig.ts
 import { UncachedManifestClient } from "@uniformdev/context/api";
@@ -1798,7 +1833,7 @@ var useValidateContextConfig = (contextConfig) => {
     error: void 0
   });
   const { apiKey, apiHost, projectId } = contextConfig || {};
-  useEffect4(() => {
+  useEffect5(() => {
     if (!apiKey || !apiHost) {
       return;
     }
@@ -1839,6 +1874,7 @@ export {
   contextCriteriaMenuOperators,
   convertErrorsToObj,
   enrichmentCriteriaMenuOperators,
+  getValidCriteriaOperatorsFor,
   isEnrichmentTagData,
   isPersonalizationCriteriaData,
   opHasRhs,