@octaviaflow/core 3.1.0-beta.59 → 3.1.0-beta.60

package/dist/components/ConditionBuilder/ConditionBuilder.d.ts

@@ -11,6 +11,11 @@ export interface ConditionOperator {
     symbol?: string;
     description?: string;
 }
+export interface ConditionValueOption {
+    value: string;
+    label: string;
+    description?: string;
+}
 export interface Condition {
     field: string;
     operator: string;
@@ -30,6 +35,12 @@ export interface ConditionBuilderProps extends Omit<ComponentPropsWithoutRef<"di
     onChange: (conditions: Condition[]) => void;
     fields: ConditionField[];
     operators: ConditionOperator[];
+    /** Optional per-row value suggestions. When this returns a non-empty list
+     *  for a condition, that row's value field becomes an editable combobox: a
+     *  free-text input with an attached dropdown button listing the options —
+     *  clicking one fills the input, and the user can still type any value not in
+     *  the list. Omit / return [] to keep a plain text input. */
+    getValueOptions?: (condition: Condition, index: number) => ConditionValueOption[];
     /** Auto-enables search above 8 options. Force on/off via boolean. */
     searchable?: boolean;
     allowGroups?: boolean;

package/dist/components/ConditionBuilder/ConditionBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionBuilder.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/ConditionBuilder.tsx"],"names":[],"mappings":"AAQA,OAAO,EACL,KAAK,wBAAwB,EAG7B,KAAK,SAAS,EAQf,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd;;4DAEwD;IACxD,YAAY,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CAC7B;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,KAAK,GAAG,IAAI,CAAC;IAC3B,UAAU,EAAE,CAAC,SAAS,GAAG,cAAc,CAAC,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzD,UAAU,EAAE,SAAS,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IAC5C,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,SAAS,EAAE,iBAAiB,EAAE,CAAC;IAC/B,qEAAqE;IACrE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC;4EACwE;IACxE,YAAY,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAC5B;yEACqE;IACrE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,mDAAmD;IACnD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;mEAI+D;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA0OD,eAAO,MAAM,gBAAgB,kHA+M3B,CAAC"}
+{"version":3,"file":"ConditionBuilder.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/ConditionBuilder.tsx"],"names":[],"mappings":"AAQA,OAAO,EACL,KAAK,wBAAwB,EAG7B,KAAK,SAAS,EAQf,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd;;4DAEwD;IACxD,YAAY,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CAC7B;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,KAAK,GAAG,IAAI,CAAC;IAC3B,UAAU,EAAE,CAAC,SAAS,GAAG,cAAc,CAAC,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzD,UAAU,EAAE,SAAS,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IAC5C,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,SAAS,EAAE,iBAAiB,EAAE,CAAC;IAC/B;;;;iEAI6D;IAC7D,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,oBAAoB,EAAE,CAAC;IAClF,qEAAqE;IACrE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC;4EACwE;IACxE,YAAY,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAC5B;yEACqE;IACrE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,mDAAmD;IACnD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;mEAI+D;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAiYD,eAAO,MAAM,gBAAgB,kHA4N3B,CAAC"}

package/dist/components/ConditionBuilder/index.d.ts

@@ -1,2 +1,2 @@
-export { type Condition, ConditionBuilder, type ConditionBuilderProps, type ConditionField, type ConditionOperator, } from "./ConditionBuilder";
+export { type Condition, ConditionBuilder, type ConditionBuilderProps, type ConditionField, type ConditionOperator, type ConditionValueOption, } from "./ConditionBuilder";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ConditionBuilder/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EACnB,KAAK,iBAAiB,GACvB,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,GAC1B,MAAM,oBAAoB,CAAC"}

package/dist/index.cjs

@@ -9076,11 +9076,155 @@ function OptionDropdown({
     )
   ] });
 }
+function ValueCombobox({ value, options, onChange, placeholder = "Value", ariaLabel }) {
+  const [open, setOpen] = (0, import_react59.useState)(false);
+  const [activeIdx, setActiveIdx] = (0, import_react59.useState)(0);
+  const wrapRef = (0, import_react59.useRef)(null);
+  const inputRef = (0, import_react59.useRef)(null);
+  const panelRef = (0, import_react59.useRef)(null);
+  const listboxId = (0, import_react59.useId)();
+  const [panelPos, setPanelPos] = (0, import_react59.useState)(null);
+  const updatePanelPos = (0, import_react59.useCallback)(() => {
+    if (!wrapRef.current) return;
+    const r = wrapRef.current.getBoundingClientRect();
+    setPanelPos({ top: r.bottom + 4, left: r.left, width: r.width });
+  }, []);
+  (0, import_react59.useLayoutEffect)(() => {
+    if (!open) return;
+    updatePanelPos();
+    window.addEventListener("scroll", updatePanelPos, true);
+    window.addEventListener("resize", updatePanelPos);
+    return () => {
+      window.removeEventListener("scroll", updatePanelPos, true);
+      window.removeEventListener("resize", updatePanelPos);
+    };
+  }, [open, updatePanelPos]);
+  const filtered = (0, import_react59.useMemo)(() => {
+    const q2 = value.trim().toLowerCase();
+    if (!q2) return options;
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(q2) || o.value.toLowerCase().includes(q2)
+    );
+  }, [options, value]);
+  (0, import_react59.useEffect)(() => {
+    setActiveIdx(0);
+  }, [value, open]);
+  (0, import_react59.useEffect)(() => {
+    if (!open) return;
+    const onDoc = (e) => {
+      const t = e.target;
+      if (!wrapRef.current?.contains(t) && !panelRef.current?.contains(t)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [open]);
+  const pick = (v) => {
+    onChange(v);
+    setOpen(false);
+    inputRef.current?.focus();
+  };
+  const handleKey = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!open) {
+        setOpen(true);
+        return;
+      }
+      setActiveIdx((i) => Math.min(i + 1, Math.max(filtered.length - 1, 0)));
+    } else if (e.key === "ArrowUp") {
+      if (!open) return;
+      e.preventDefault();
+      setActiveIdx((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter") {
+      if (open && filtered[activeIdx]) {
+        e.preventDefault();
+        pick(filtered[activeIdx].value);
+      }
+    } else if (e.key === "Escape") {
+      if (open) {
+        e.preventDefault();
+        setOpen(false);
+      }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref: wrapRef, className: "ods-cb-combo", onKeyDown: handleKey, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        className: "ods-cb-combo__input",
+        value,
+        onChange: (e) => {
+          onChange(e.target.value);
+          if (!open) setOpen(true);
+        },
+        placeholder,
+        "aria-label": ariaLabel,
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-controls": open ? listboxId : void 0,
+        "aria-autocomplete": "list"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "button",
+      {
+        type: "button",
+        className: cn("ods-cb-combo__toggle", open && "ods-cb-combo__toggle--open"),
+        onClick: () => {
+          setOpen((o) => !o);
+          inputRef.current?.focus();
+        },
+        "aria-label": `${ariaLabel} options`,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        tabIndex: -1,
+        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_icons9.ChevronDownIcon, { "aria-hidden": "true", className: "ods-cb-combo__chev" })
+      }
+    ),
+    open && panelPos && typeof document !== "undefined" && (0, import_react_dom5.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        "div",
+        {
+          ref: panelRef,
+          className: "ods-cb-dd__panel ods-cb-dd__panel--portal",
+          role: "presentation",
+          style: { position: "fixed", top: panelPos.top, left: panelPos.left, minWidth: panelPos.width },
+          children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("ul", { id: listboxId, role: "listbox", "aria-label": ariaLabel, className: "ods-cb-dd__list", children: [
+            filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("li", { className: "ods-cb-dd__empty", children: "Type a custom value" }),
+            filtered.map((opt, idx) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": opt.value === value,
+                className: cn(
+                  "ods-cb-dd__opt",
+                  opt.value === value && "ods-cb-dd__opt--selected",
+                  idx === activeIdx && "ods-cb-dd__opt--active"
+                ),
+                onClick: () => pick(opt.value),
+                onMouseEnter: () => setActiveIdx(idx),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "ods-cb-dd__opt-text", children: opt.label }),
+                  opt.description && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "ods-cb-dd__opt-desc", children: opt.description })
+                ]
+              }
+            ) }, opt.value))
+          ] })
+        }
+      ),
+      document.body
+    )
+  ] });
+}
 var ConditionBuilder = (0, import_react59.forwardRef)(function ConditionBuilder2({
   conditions,
   onChange,
   fields,
   operators,
+  getValueOptions,
   searchable,
   joinMode = "global",
   joinOperator = "AND",
@@ -9213,17 +9357,28 @@ var ConditionBuilder = (0, import_react59.forwardRef)(function ConditionBuilder2
               minWidth: 140
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            "input",
-            {
-              type: "text",
-              className: "ods-condition-row__value",
-              value: condition.value,
-              onChange: (e) => handleValueChange(index, e.target.value),
-              placeholder: "Value",
-              "aria-label": "Value"
-            }
-          ),
+          (() => {
+            const valueOpts = getValueOptions?.(condition, index) ?? [];
+            return valueOpts.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              ValueCombobox,
+              {
+                ariaLabel: "Value",
+                value: condition.value,
+                options: valueOpts,
+                onChange: (v) => handleValueChange(index, v)
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              "input",
+              {
+                type: "text",
+                className: "ods-condition-row__value",
+                value: condition.value,
+                onChange: (e) => handleValueChange(index, e.target.value),
+                placeholder: "Value",
+                "aria-label": "Value"
+              }
+            );
+          })(),
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "button",
             {