@octaviaflow/core 3.1.0-beta.85 → 3.1.0-beta.87

package/dist/workflow.cjs

@@ -2324,6 +2324,7 @@ function Combobox({
   creatable = false,
   emptyMessage = "Type a custom value",
   filter = defaultFilter,
+  tokenizeKnownValue = false,
   id,
   name,
   required,
@@ -2338,6 +2339,8 @@ function Combobox({
   const panelRef = (0, import_react14.useRef)(null);
   const reactId = (0, import_react14.useId)();
   const inputId = id ?? `${reactId}-combobox`;
+  const matchedOption = tokenizeKnownValue ? options.find((o) => o.value === value) : void 0;
+  const showToken = Boolean(matchedOption) && !open;
   const listboxId = `${reactId}-listbox`;
   const errorId = `${reactId}-err`;
   const helperId = `${reactId}-help`;
@@ -2441,6 +2444,24 @@ function Combobox({
           required && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ods-combobox__required", "aria-hidden": "true", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: fieldRef, className: "ods-combobox__field", children: [
+          showToken && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ods-combobox__token", "data-ods-combobox-token": "", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ods-combobox__token-label", children: matchedOption.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "ods-combobox__token-clear",
+                onClick: () => {
+                  if (disabled) return;
+                  onChange("");
+                  inputRef.current?.focus();
+                },
+                "aria-label": `Clear ${matchedOption.label}`,
+                disabled,
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons3.CloseIcon, { "aria-hidden": "true" })
+              }
+            )
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "input",
             {
@@ -2448,7 +2469,10 @@ function Combobox({
               id: inputId,
               name,
               type: "text",
-              className: "ods-combobox__input",
+              className: cn(
+                "ods-combobox__input",
+                showToken && "ods-combobox__input--tokenized"
+              ),
               value,
               disabled,
               required,