@uniformdev/context-ui 20.7.1-alpha.4 → 20.8.2-alpha.15

package/dist/index.esm.js

@@ -289,23 +289,39 @@ var contextCriteriaMenuOperators = [
   {
     name: "has the weakest score",
     value: "-"
-  },
+  }
+];
+var enrichmentCriteriaMenuOperators = [
+  ...contextCriteriaMenuOperators,
   {
     name: "has strongest category score",
     value: "^"
   }
 ];
-function CriteriaOperatorMenu({ onChange, value, ...props }) {
+var quirkCriteriaMenuOperators = [
+  {
+    name: "=",
+    description: "equals",
+    value: "="
+  },
+  {
+    name: "\u2260",
+    description: "not equal",
+    value: "!="
+  }
+];
+function CriteriaOperatorMenu({ onChange, value, rhsType, ...props }) {
   var _a, _b;
+  const operators = rhsType === "QUIRK" ? quirkCriteriaMenuOperators : rhsType === "ENR" ? enrichmentCriteriaMenuOperators : contextCriteriaMenuOperators;
   return /* @__PURE__ */ jsx6(
     InputComboBox,
     {
       ...props,
       value: {
-        label: (_b = (_a = contextCriteriaMenuOperators.find((e) => e.value === value)) == null ? void 0 : _a.name) != null ? _b : value,
+        label: (_b = (_a = operators.find((e) => e.value === value)) == null ? void 0 : _a.name) != null ? _b : value,
         value
       },
-      options: contextCriteriaMenuOperators.map((option) => ({
+      options: operators.map((option) => ({
         label: option.description ? `${option.name}:${option.description}` : option.name,
         value: option.value
       })),
@@ -543,18 +559,23 @@ import { useState as useState5 } from "react";
 import { Icon } from "@uniformdev/design-system";
 
 // src/components/DimensionMenu/utils.ts
+import { useMemo } from "react";
 function dimensionToMenuOption(dimension) {
+  if ("dim" in dimension) {
+    return {
+      label: dimension.displayName,
+      value: dimension.dim,
+      original: dimension
+    };
+  }
+  const quirk = dimension;
   return {
-    label: dimension.displayName,
-    value: dimension.dim,
-    isDisabled: false
+    label: `Quirk:${quirk.name}`,
+    value: quirk.id,
+    original: quirk
   };
 }
-function dimensionIcon(displayName) {
-  if (!displayName) {
-    return "unavailable";
-  }
-  const [type] = displayName.split(":");
+function dimensionIcon(type) {
   switch (type.toLowerCase()) {
     case "signal":
       return "data";
@@ -566,25 +587,42 @@ function dimensionIcon(displayName) {
       return "user-list";
   }
 }
-function groupDimensions(dimensions) {
-  const result = [];
-  let lastType = "";
-  for (const dim of dimensions) {
-    const [type] = dim.displayName.split(":");
-    if (lastType !== type) {
-      result.push({ label: type, options: [] });
-      lastType = type;
+function useGroupedDimensions(dimensions, quirks) {
+  return useMemo(() => {
+    const result = [];
+    let lastType = "";
+    for (const dim of dimensions) {
+      const { type } = dimensionDisplayName(dim.displayName);
+      if (lastType !== type) {
+        result.push({ label: type != null ? type : "", options: [] });
+        lastType = type != null ? type : "";
+      }
+      result[result.length - 1].options.push(dimensionToMenuOption(dim));
+    }
+    if (quirks == null ? void 0 : quirks.length) {
+      result.push({
+        label: "Quirks",
+        options: quirks.map(dimensionToMenuOption)
+      });
     }
-    result[result.length - 1].options.push(dimensionToMenuOption(dim));
+    return result;
+  }, [dimensions, quirks]);
+}
+function dimensionDisplayName(displayName) {
+  if (!displayName) {
+    return {};
   }
-  return result;
+  const colonIndex = displayName.indexOf(":");
+  const type = colonIndex >= 0 ? displayName.substring(0, colonIndex) : void 0;
+  const name = colonIndex >= 0 ? displayName.substring(colonIndex + 1) : displayName;
+  return { type, name };
 }
 
 // src/components/DimensionMenu/DimensionGroupHeading.tsx
 import { jsx as jsx8, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
 var DimensionGroupHeading = (props) => {
-  var _a;
   const { data, getStyles, className } = props;
+  const { type } = dimensionDisplayName(data.label);
   return /* @__PURE__ */ jsx8(
     "div",
     {
@@ -599,7 +637,7 @@ var DimensionGroupHeading = (props) => {
         {
           css: { color: "var(--gray-500)", display: "flex", alignItems: "center", gap: "var(--spacing-xs)" },
           children: [
-            /* @__PURE__ */ jsx8(Icon, { icon: dimensionIcon((_a = data.label) != null ? _a : ""), iconColor: "currentColor", size: 16 }),
+            type ? /* @__PURE__ */ jsx8(Icon, { icon: dimensionIcon(type), iconColor: "currentColor", size: 16 }) : null,
             /* @__PURE__ */ jsx8("span", { children: data.label })
           ]
         }
@@ -630,9 +668,8 @@ function DimensionMenuErrorMessage({ message }) {
 // src/components/DimensionMenu/DimensionOption.tsx
 import { jsx as jsx10 } from "@emotion/react/jsx-runtime";
 var DimensionOption = (props) => {
-  var _a, _b;
   const { data, getStyles, cx, isDisabled, isFocused, isSelected, className, innerRef, innerProps } = props;
-  const [, value] = (_b = (_a = data.label) == null ? void 0 : _a.split(":")) != null ? _b : [];
+  const { name } = dimensionDisplayName(data.label);
   return /* @__PURE__ */ jsx10(
     "div",
     {
@@ -649,7 +686,7 @@ var DimensionOption = (props) => {
       ref: innerRef,
       "aria-disabled": isDisabled,
       ...innerProps,
-      children: /* @__PURE__ */ jsx10("div", { css: { color: "var(--gray-700)" }, children: value != null ? value : data.label })
+      children: /* @__PURE__ */ jsx10("div", { css: { color: "var(--gray-700)" }, children: name != null ? name : data.label })
     }
   );
 };
@@ -658,7 +695,7 @@ var DimensionOption = (props) => {
 import { Icon as Icon2 } from "@uniformdev/design-system";
 import { jsx as jsx11, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
 function DimensionValue({ displayName }) {
-  const [type, name] = displayName.split(":");
+  const { type, name } = dimensionDisplayName(displayName);
   return /* @__PURE__ */ jsxs4(
     "div",
     {
@@ -667,7 +704,7 @@ function DimensionValue({ displayName }) {
         overflow: "hidden"
       },
       children: [
-        name ? /* @__PURE__ */ jsxs4(
+        type ? /* @__PURE__ */ jsxs4(
           "small",
           {
             css: { color: "var(--gray-500)", display: "flex", alignItems: "center", gap: "var(--spacing-xs)" },
@@ -705,6 +742,7 @@ function CriteriaMatchMenu({
   );
   const rDim = criteriaMatch.rDim;
   const targetDim = criteriaMatch.rDim ? dimensions.dimIndex[criteriaMatch.rDim] : void 0;
+  const groupedDimensions = useGroupedDimensions(dimensions.dimensions, void 0);
   return /* @__PURE__ */ jsxs5(Fragment3, { children: [
     /* @__PURE__ */ jsx13(
       InputComboBox3,
@@ -723,7 +761,7 @@ function CriteriaMatchMenu({
             value: "",
             isDisabled: true
           },
-          ...groupDimensions(dimensions.dimensions)
+          ...groupedDimensions
         ],
         styles: {
           ...props.styles,
@@ -802,14 +840,23 @@ function isInt(value) {
 // src/components/DimensionMenu/DimensionMenu.tsx
 import { InputComboBox as InputComboBox4 } from "@uniformdev/design-system";
 import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
-function DimensionMenu({ onChange, value, dimensions, errorMessage, ...props }) {
+function DimensionMenu({
+  onChange,
+  value,
+  dimensions,
+  errorMessage,
+  quirks,
+  ...props
+}) {
+  const groupedDimensions = useGroupedDimensions(dimensions, quirks);
+  const valueAsMenuOption = value ? dimensionToMenuOption(value) : void 0;
   return /* @__PURE__ */ jsxs6(Fragment4, { children: [
     /* @__PURE__ */ jsx14(
       InputComboBox4,
       {
         ...props,
-        value: value ? dimensionToMenuOption(value) : void 0,
-        options: groupDimensions(dimensions),
+        value: valueAsMenuOption,
+        options: groupedDimensions,
         styles: {
           ...props.styles,
           valueContainer: (provided, state) => {
@@ -822,8 +869,10 @@ function DimensionMenu({ onChange, value, dimensions, errorMessage, ...props })
           }
         },
         onChange: (e) => {
-          if (e) {
-            onChange(dimensions.find((d) => d.dim === e.value));
+          if (e == null ? void 0 : e.original) {
+            onChange(e.original);
+          } else {
+            onChange(void 0);
           }
         },
         components: {
@@ -892,7 +941,7 @@ import {
   LoadingIndicator as LoadingIndicator3
 } from "@uniformdev/design-system";
 import { produce } from "immer";
-import { useMemo, useState as useState6 } from "react";
+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`
   flex: 2;
@@ -913,10 +962,10 @@ var EnrichmentTag = ({
   displayTitle = true
 }) => {
   const { loading, result: dimensions, error } = useDimensions(contextConfig);
-  const allEnrichments = useMemo(() => {
+  const allEnrichments = useMemo2(() => {
     if (dimensions) return dimensions.dimensions.filter((dimension) => dimension.category === "ENR");
   }, [dimensions]);
-  const remainingEnrichments = useMemo(() => {
+  const remainingEnrichments = useMemo2(() => {
     if (!value) return allEnrichments;
     if (allEnrichments)
       return allEnrichments.filter(
@@ -1262,7 +1311,16 @@ function opHasRhs(op) {
 // src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.tsx
 import { css as css7 } from "@emotion/react";
 import { CgCloseO as CgCloseO2 } from "@react-icons/all-files/cg/CgCloseO";
-import { AddListButton as AddListButton3, Callout as Callout3, Icon as Icon5, InputInlineSelect, Paragraph } from "@uniformdev/design-system";
+import {
+  AddListButton as AddListButton3,
+  Callout as Callout3,
+  Heading as Heading2,
+  Icon as Icon5,
+  Input as Input2,
+  InputInlineSelect,
+  InputSelect as InputSelect2,
+  Paragraph
+} from "@uniformdev/design-system";
 import { produce as produce2 } from "immer";
 
 // src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.styles.ts
@@ -1298,7 +1356,8 @@ var criteriaItem = css6`
 `;
 var criteriaItemInner = css6`
   display: flex;
-  gap: var(--spacing-base);
+  row-gap: var(--spacing-base);
+  column-gap: var(--spacing-xs);
   flex-grow: 1;
   flex-wrap: wrap;
   margin-right: var(--spacing-base);
@@ -1316,6 +1375,7 @@ var criteriaOperandWrapper = css6`
 `;
 var criteriaOperatorWrapper = css6`
   flex: 1;
+  flex-wrap: nowrap;
   min-width: 80px;
 `;
 var expand = css6`
@@ -1329,6 +1389,7 @@ var PersonalizationCriteriaStatic = ({
   value,
   setValue,
   dimensions,
+  quirks,
   onMenuOpen,
   onMenuClose,
   onAddCriteria,
@@ -1378,100 +1439,146 @@ var PersonalizationCriteriaStatic = ({
           fontSize: "var(--fs-md)",
           fontWeight: "var(--fw-bold)"
         },
-        children: "Personalize This"
+        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;
+      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 currentDimension = dimensions.dimIndex[currentCriteria.l];
+      const currentQuirk = quirks == null ? void 0 : quirks.find((q) => q.id === currentCriteria.l);
       return /* @__PURE__ */ jsxs9("div", { css: criteriaItem, "data-testid": "criteria-container", children: [
-        /* @__PURE__ */ jsxs9(
-          "div",
-          {
-            css: css7`
-                    ${criteriaItemInner}/* grid-template-columns: minmax(0, 1fr) ${critHasRhs ? "minmax(0, 79px) minmax(0, 1fr)" : "minmax(0, 1fr)"} */
-                  `,
-            className: "criteriaItemInner",
-            children: [
-              /* @__PURE__ */ jsx17(
-                "div",
+        /* @__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,
                 {
-                  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,
-                      onChange: (dim) => {
-                        update({ ...currentCriteria, l: dim.dim }, index);
-                      },
-                      value: dimensions.dimIndex[currentCriteria.l],
-                      onMenuOpen,
-                      onMenuClose
+                  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
                 }
-              ),
-              /* @__PURE__ */ jsx17(
-                "div",
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx17(
+            "div",
+            {
+              css: [criteriaWrapper, criteriaOperatorWrapper],
+              className: "criteria-wrapper",
+              "data-testid": "select-operator",
+              children: /* @__PURE__ */ jsx17(
+                CriteriaOperatorMenu,
                 {
-                  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,
-                      onChange: (op) => {
-                        if (op === "+" || op === "-") {
-                          update({ ...currentCriteria, op, r: void 0, rDim: void 0 }, index);
-                        } else {
-                          update({ ...currentCriteria, op }, index);
-                        }
-                      },
-                      onMenuOpen,
-                      onMenuClose
+                  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(
+              )
+            }
+          ),
+          critHasRhs ? /* @__PURE__ */ jsx17(
+            "div",
+            {
+              css: [criteriaWrapper, criteriaOperandWrapper],
+              className: "criteria-wrapper",
+              "data-testid": "select-match-criteria",
+              children: currentQuirk ? /* @__PURE__ */ jsx17(
                 "div",
                 {
-                  css: [criteriaWrapper, criteriaOperandWrapper],
-                  className: "criteria-wrapper",
-                  "data-testid": "select-match-criteria",
-                  children: /* @__PURE__ */ jsx17(
-                    CriteriaMatchMenu,
+                  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,
                     {
-                      errorMessage: (_c = errors.rhs) == null ? void 0 : _c[index],
-                      css: expand,
-                      styles: { control: (base) => ({ ...base, height: "100%" }) },
-                      criteriaMatch: currentCriteria,
-                      onChange: (match) => {
-                        update(match, index);
-                      },
-                      isDisabled: !critHasLhs,
-                      dimensions,
-                      onMenuOpen,
-                      onMenuClose
+                      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"
                     }
                   )
                 }
-              ) : null
-            ]
-          }
-        ),
+              ) : /* @__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
+                }
+              )
+            }
+          ) : null
+        ] }),
         /* @__PURE__ */ jsx17(
           "button",
           {
@@ -1497,7 +1604,7 @@ var PersonalizationCriteriaStatic = ({
               {
                 "data-testid": "dropdown-button-combine",
                 disabled: index > 1,
-                value: (_d = currentValue.op) != null ? _d : "&",
+                value: (_h = currentValue.op) != null ? _h : "&",
                 options: [
                   { label: "AND", value: "&" },
                   { label: "OR", value: "|" }
@@ -1729,6 +1836,7 @@ export {
   addEnrichmentLink,
   contextCriteriaMenuOperators,
   convertErrorsToObj,
+  enrichmentCriteriaMenuOperators,
   isEnrichmentTagData,
   isPersonalizationCriteriaData,
   opHasRhs,